Skip to content

AXSpringAnimation

aixing edited this page Jan 13, 2017 · 1 revision

动画曲线

动画曲线用来描述动画随时间进行的速度的快慢,优雅的动画曲线描述的动画通常都比较优美而不会显得突兀(除非有意而为之),在iOS中,通常使用CAMediaTimingFunction时间函数来描述动画曲线,当然,CoreAnimation系统已经为我们提供了5个默认的时间函数,他们分别是:

Default: 先缓慢加速,再缓慢减速

Default

EaseIn: 开始时缓慢减速

EaseIn

EaseOut: 结束时缓慢减速

EaseOut

EaseInOut: 开始和结束都减速

EaseInOut

Linear:

Linear

当然,也可以通过方法:

+ (instancetype)functionWithControlPoints:(float)c1x :(float)c1y :(float)c2x :(float)c2y;

来创建自定义的动画曲线,通过传入两个控制点而得到一条三次贝塞尔曲线,即能满足自定义的需求. 编辑贝塞尔曲线.

动画曲线在使用的时候将需要设置的时间函数设置给CAAnimationtimingFunction即可,但是Spring动画却不能使用CAMediaTimingFunction来描述,我们可以注意到,在以上动画曲线里,所描述的速度时间的关系两者都区间都是[0,1],意味着动画若需要在结束时减速,则开始时也不可能同时减速. 总而言之,三次贝塞尔无法描述Spring动画的曲线.

什么是Spring动画

Spring:弹性、弹簧. Spring动画指的就是弹性动画,在iOS2.0以来,CoreAnimation就为我们提供了丰富的动画库,可以使用CABasicAnimation来创建基础动画,初始化CABasicAnimation之后,设置动画时间(CAMediaTiming协议相关的一系列属性),并设置初始值、结束值之后添加到CALayer上即可开始动画,想要更复杂的动画,就可以使用帧动画CAKeyframeAnimation,更详细的使用教程参考:iOS开发之让你的应用“动”起来. 那么说到底,什么是Spring动画呢?计算机图形发展到现在,不管绘图也好,动画也好,都有相应的数学模型可以追溯. 在iOS里边,CAAnimation类实现了CAMediaTiming协议以实现对动画的时间管理,在CAMediaTiming里边有个属性timingFunction,这个属性是用来控制动画曲线的,动画曲线是用来描述动画随时间进行的速度的模型,在数学里,就是斜率. 在CoreAnimation进行动画的时候,会根据动画曲线的描述来进行动画,所以我们可以实现很多很漂亮很流畅的动画. Spring动画对应的函数模型是阻尼震动. 函数曲线如下:

curve

阻尼震动

阻尼震动的详细解释可以参考:阻尼震动. 根据维基百科描述,我们可以得到以下运动方程:

修订中...

Clone this wiki locally