包教包会 - 弹性动画的原理与实现

时间 2019-11-30

标签包教弹性动画原理实现繁體版

原文原文链接

弹性动画一直以来都深深地吸引我，随着知识储备增多，渐渐探索出一套弹性动画的实现原理。javascript

简介

本文将从零开始，一步步解析弹性动画原理，包教包会。本文Demo简单地封装了一个动画库来测试，支持UIView的三种动画类型：Size、Position、Scale，动画运动曲线有：bounce、easeInOut。CALayer动画暂不支持。java

运动曲线

从初中开始，咱们就开始接触正弦曲线、余弦曲线，如今真的排上用场了(后悔当初数学没学好)。咱们能够经过对正弦余弦作一些处理，来获得动画的运动曲线。弹性动画稍微复杂一些，主要分为两部分，一是 波动(波形) 、二是衰减，将两者结合就能获得咱们想要的动画运动曲线。git

1. 淡入淡出运动曲线

正弦曲线 ，Y坐标随着X坐标的变化而变化，新手乍一看，这跟动画根本没有半毛钱关系，咱们还须要进行精加工处理，才能使用。
github

无论是弹性动画仍是线性动画，咱们都有一个起点和终点，弹性动画不一样的是它的值在某些时候会超越最终值，而后又回到最终值。总之，咱们须要一个绝对起点值为0，绝对终点值为1，progress值范围在0~1。举个栗子，咱们要从(100,100)移动到(200，200)，x和y初始值和最终值相差100，减去初始值，这0~100就是progress的从0~1的过程。spring

无论是正弦仍是余弦，通过咱们的翻转位移以后都能获得一个从0到1的曲线：函数

这就是easeInOut动画的运动曲线图，在开始和结尾比较平缓，而中间波动较大，即淡入淡出的效果。
测试

2. 弹性运动曲线

a. 衰减曲线 弹性动画中从0~1的过程主要由指数衰减函数来控制，指数倍数越小，衰减速度越快，在动画参数中至关于 弹性阻尼。动画

b. 余弦曲线 在这里的咱们使用余弦来做为弹性动画波动曲线，x倍数值越大，振动频率 越快。
spa

c. 衰减的余弦曲线 衰减函数和余弦函数相乘，获得初步的弹性运动曲线。3d

d. 0~1的衰减的余弦曲线 ，将曲线函数翻转(加负号)后上移1(+1)便可获得最终弹性曲线，曲线从0开始，y值随着x值变化波动后渐渐平稳归于1。x值递增越快， 动画速度 越快，整个动画所需时间越短。

经过运动曲线生成动画

1. CADisplayLink

CADisplayLink是一个能让咱们以和屏幕刷新率相同的频率将动画显示到屏幕上的定时器。经过定时器咱们利用当前动画progress得出运动曲线当前Y的值，即代码中的timeLineY。

举个例子，移动position的动画，是用动画的startPoint+(endPoint-startPoint)*timeLineY=动画当前progress的的position，当按顺序将这些position显示出来就造成了咱们须要的动画。

// 新建一个displayLink
self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateDisplayLink)];

- (void)updateDisplayLink {
    // 获取弹性动画曲线当前进度的曲线的Y坐标
    float timeLineY = [self getSpringAnimation:animation springOffset:animation.progress];
    // +进度
    animation.progress+=animation.speed;
    // 使用Y坐标值 算出View当前位置
    CGRect tempFrame = animationView.frame;
    NSValue *fromValue = animation.fromValue;
    CGPoint startPoint = fromValue.CGPointValue;
    NSValue *toValue = animation.toValue;
    CGPoint endPoint = toValue.CGPointValue;

    tempFrame.origin.x = startPoint.x+(endPoint.x - startPoint.x)*timeLineY;
    tempFrame.origin.y = startPoint.y+(endPoint.y - startPoint.y)*timeLineY;
    animationView.frame = tempFrame;
}复制代码

下面将会提到各类动画是如何获取当前timeLineY，提供了相应的曲线函数、代码和动画效果图。

2. 非曲线动画

非曲线意思就是0~1运动轨迹是直线递增，整个动画会显得比较生硬。

函数：y=x

动画效果：

3. 淡入淡出动画

EaseInOut曲线在动画在起点和终点的位置递增比较慢，动画开启和结束的地方比较平滑。

曲线函数：

转换成OC代码：

- (CGFloat)getEaseInOutAnimation:(FDSpringAnimation *)animation springOffset:(CGFloat)x {
    result = MIN(-cos(M_PI*animation.progress)/2.0+0.5, 1.000);
    return result;
}复制代码

动画效果：

4. 弹性动画

弹性动画增长了2个参数，分别是阻尼:damping和波动频率:frequency。

曲线函数：

转换成OC代码：

- (CGFloat)getSpringAnimation:(FDSpringAnimation *)animation springOffset:(CGFloat)x {
    result = -pow(2, -animation.damping * x) * cos(animation.frequency*x)+1;
}复制代码

动画效果：

拓展

上面的内容基本能够实现一个简单的弹性动画，本文Demo在此基础上增长了同时多个动画运行、completionBlock等功能，正在运行的动画暂停，移除正在运行的动画、替换正在运行的动画等功能待加入。

本文全部曲线经过Grapher绘画。

总结

之前一直都是直接用POP或者UIView动画实现弹性动画的效果，对于原理实现不甚了解，可是一直保持着好奇心，终因而本身实现了一套方案(路子比较野)。

我的水平有限，欢迎提出建议。