`
LiYunpeng
  • 浏览: 952357 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

IOS缓动动画Easing算法使用分析

    博客分类:
  • IOS
阅读更多
对于一个区间内的缓动动画来说

中间的过渡值算法,很多都在使用Easing这种,无论是ActionScript、JavaScript还是刚刚才研究的Objective-C

具体思路如下

首先是计算出这个区间内的各个阶段

比如这个过程是分60帧的动画,那么在这60帧中的每一帧,计算出这一帧所得的值,放到一个数组里面,然后通过CAKeyframeAnimation来对这一组数值分别进行更换
而这组数值就是通过Easing的各种不同算法算出来的

具体代码如下
+ (id)animationWithKeyPath:(NSString *)path function:(AHEasingFunction)function fromPoint:(CGPoint)fromPoint toPoint:(CGPoint)toPoint keyframeCount:(size_t)keyframeCount
{
	NSMutableArray *values = [NSMutableArray arrayWithCapacity:keyframeCount];
	
	CGFloat t = 0.0;
	CGFloat dt = 1.0 / (keyframeCount - 1);
	for(size_t frame = 0; frame < keyframeCount; ++frame, t += dt)
	{
		CGFloat x = fromPoint.x + function(t) * (toPoint.x - fromPoint.x);
		CGFloat y = fromPoint.y + function(t) * (toPoint.y - fromPoint.y);
		[values addObject:[NSValue valueWithCGPoint:CGPointMake(x, y)]];
	}
	
	CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:path];
	[animation setValues:values];
	return animation;
}

定义一个数组,用来存放每一帧的预期值
定义一个时间t,其实是0.0
定义一个每帧平分的比例,dt
然后for循环,计算中间平分每一帧的预期值,如x
预期值=起始值+Easing的变换方程带入(当前帧占总帧的百分比)*起始到预期之间的差距值
这样每帧就会按照Easing不同方程的规律得出相应的变化值了

关于animationWithKeyPath方法的参数,可以是如下
transform.scale = 比例轉換
transform.scale.x = 闊的比例轉換
transform.scale.y = 高的比例轉換
transform.rotation.z = 平面圖的旋轉
opacity = 透明度
margin
zPosition
backgroundColor
cornerRadius
borderWidth
bounds
contents
contentsRect
cornerRadius
frame
hidden
mask
masksToBounds
opacity
position
shadowColor
shadowOffset
shadowOpacity
shadowRadius

当然,这些事CAKeyframeAnimation所支持的,还可以自己去写自定义的属性值
分享到:
评论

相关推荐

    C# 缓动动画类库(c# Easing animation) 及winform使用示例

    C# 缓动动画类库(c# Easing animation) 及winform使用示例 文章详见: https://blog.csdn.net/surfsky/article/details/139511866 var ani = new Animator() .AddPath(AnimationType.ExponentialEaseOut, 100, 300...

    Unity Dotween缓冲动画示例easing_demo-离线文件 ease type

    InBack缓冲类型是一种返回运动的缓动方式,它在动画开始时会让物体稍微向回移动一点,然后再向前,给人一种强烈的弹跳感。这种效果在模拟物理行为或者增加视觉吸引力时非常有用。 InCubic缓冲类型是三次方的缓入...

    iOS核心动画高级技巧(iOS Core Animation: Advanced Techniques)

    9. 图层时间和缓动(Timing and Easing)是动画节奏的关键。CAMediaTiming协议定义了动画时间的相关属性,而层级时间则是管理嵌套动画时间的机制。 10. 缓存策略(Caching Strategies)用于优化动画性能,特别是在...

    IOS动画效果

    同时,合理利用缓动函数(easing functions)可以使动画看起来更加自然。 总之,iOS提供了多种方式来实现控件的动画效果,开发者可以根据需求选择合适的工具和方法。通过深入了解并熟练掌握这些技术,你可以为iOS...

    easing动画运动效果.zip

    在动画领域,easing(缓动)是指控制对象在运动过程中的速度变化,使得运动轨迹不局限于简单的匀速直线运动。通过调整缓动函数,我们可以实现各种复杂的运动效果,比如从快到慢、从慢到快、瞬间加速或减速等。这种...

    jquery.easing动画插件

    `jquery.easing.js`是基于jQuery的一款轻量级动画插件,它扩展了jQuery的`.animate()`方法,增加了多种缓动函数(easing functions),这些函数能够改变元素在动画过程中的速度变化,创造出各种不同的视觉体验。...

    iOS Core Animation Advanced Techniques(iOS核心动画高级技巧)中文版

    3. **动画的创建和控制**:掌握不同类型的CAAnimation,如CABasicAnimation、CAKeyframeAnimation、CAPropertyAnimation等,以及如何自定义动画行为,如使用 Timing Functions 和 Easing Curves。 4. **图层组合与...

    greensock-js,js网页动画用到的缓动类库

    这个库提供了丰富的缓动(easing)功能,使得开发者能够轻松地创建复杂的动画效果,从而让网页交互更加生动有趣。 **一、什么是缓动** 缓动是动画中一种重要的技术,它指的是物体在运动过程中的速度变化。在真实...

    ios-顶部动画.zip

    此外,利用iOS的`Core Animation`框架,可以对动画的缓动函数(easing functions)进行自定义,以达到更加自然的运动效果。 综上所述,"ios-顶部动画.zip"中的"贝塞尔曲线画动画"很可能包含了一个用贝塞尔曲线实现...

    ios-波纹动画.zip

    6. **动画缓动函数(easing functions)**:为了使动画看起来更加真实和自然,开发者可能会使用缓动函数来控制动画的速度变化,比如加速开始、减速结束。 7. **扩展性与可配置性**:为了适应不同的项目需求,...

    js-animation-easing:具有缓动功能的 JS 动画队列。 使用二次方程计算缓入或缓出的动画位置

    js动画缓动带有一点缓和的香草 JS! 这只是我打来的一个有趣的项目。 它是一个 JavaScript 类,可以管理屏幕周围多个元素的动画,所有元素都具有不同的动画时间和 3 种不同的缓动选项,线性、缓入和缓出。 缓动函数...

    WPF与缓动 指数缓动

    在本文中,我们将深入探讨WPF(Windows Presentation Foundation)中的动画技术,特别是指数缓动(Exponential Easing)的应用。WPF是微软开发的一种UI框架,它提供了丰富的图形和动画功能,让开发者能够创建出富有...

    jQuery easing动画运动效果.zip

    本资源“jQuery easing动画运动效果.zip”显然聚焦于jQuery的动画特性,特别是其easing(缓动)功能。缓动是使动画更加平滑、自然的一种技术,它允许我们自定义元素在运动过程中的速度变化,比如从快速到慢速或反之...

    ios-仿window阿里旺旺登陆界面,打印机吐纸动画效果.zip

    - **动画缓动函数(easing functions)**:让动画在开始和结束时有加速或减速的效果,提高视觉舒适度。 - **交互性(Interactivity)**:允许用户在动画进行中暂停或停止,提高用户体验。 总之,"ios-仿window阿里旺旺...

    jquery实现的带缓动动画带图标的菜单demo

    在本文中,我们将深入探讨如何使用jQuery来实现一个带缓动动画和图标的前端菜单。jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理以及动画效果的创建。这个"jquery实现的带缓动动画带图标的...

    ios 动画实践

    - **动画缓动函数(easing functions)**:通过调整动画的速率曲线,可以实现加速、减速或弹簧效果,使动画更自然。 - **动画重复与反向**:通过`repeatCount`和`autoreverses`属性,可以让动画无限循环或在完成时...

    ActionScript动画算法(中文版)

    文档会介绍如何用ActionScript模拟物体的平移、旋转、缩放以及弹性运动等,这包括使用缓动函数(easing functions)来创建平滑的过渡效果。 5. **动画框架**:对于复杂的动画序列,可以使用自定义动画框架来管理。...

    Android代码-三十种不同的缓动动画(给代码家丢肥皂可不能缓动)

    @(github-cimi-chen)[Github,Readme,Easing function,Interpolator,Animation] Thirty different easing animation interpolators for Android. Demo Installation In order to use the library, there are 2 ...

    flash actionscript3制作超酷的缓动效果,as3源码

    在这个例子中,`TweenLite.to()`方法用于创建一个从当前位置到(x:500, y:0)的缓动动画,持续时间为2秒,使用了Quad.easeInOut缓动函数,这是一种缓入缓出的效果。 为了实现更复杂的缓动效果,你可以调整缓动函数,...

    Gtween缓动

    Gtween缓动库的核心概念是“缓动函数”(Easing Function),这些函数决定了属性变化的速度和节奏。通过调整不同的缓动函数,可以实现各种动画风格,例如加速、减速、弹跳或循环等。缓动函数的种类多样,包括线性、...

Global site tag (gtag.js) - Google Analytics