Michael

写写代码,说说人生

您好,我是Michael,欢迎来到我的个人家园。
代码搬运工,目前就职于XX证券,努力修行中。


H5 / Java / Objc / Swift / Vue / RN

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

bounce

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

简介

本文将从零开始,一步步解析弹性动画原理,包教包会。本文Demo简单地封装了一个动画库来测试,支持UIView的三种动画类型:SizePositionScale,动画运动曲线有:bounceeaseInOutCALayer动画暂不支持。

运动曲线

从初中开始,我们就开始接触正弦曲线、余弦曲线,现在真的排上用场了(😭后悔当初数学没学好)。我们可以通过对正弦余弦做一些处理,来得到动画的运动曲线。弹性动画稍微复杂一些,主要分为两部分,一是 波动(波形) 、二是 衰减 ,将二者结合就能得到我们想要的动画运动曲线。

1. 淡入淡出运动曲线

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

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

不管是正弦还是余弦,经过我们的翻转位移之后都能得到一个从0到1的曲线:

正弦函数 0~1

余弦函数 0~1

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

2. 弹性运动曲线

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

指数衰减函数

指数衰减曲线

b. 余弦曲线在这里的我们使用余弦来作为弹性动画波动曲线,x倍数值越大,振动频率 越快。 余弦振幅函数

余弦曲线

c. 衰减的余弦曲线衰减函数和余弦函数相乘,得到初步的弹性运动曲线。

衰减的余弦函数

衰减的余弦曲线(浅色线为衰减曲线)

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

0~1的衰减的余弦函数

0~1的衰减的余弦曲线

通过运动曲线生成动画

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

动画效果: line_position.gif

line_scale.gif

3. 淡入淡出动画

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

曲线函数: 余弦函数 0~1 转换成OC代码:

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

动画效果:

easeInOut_position.gif

easeInOut_scale.gif

4. 弹性动画

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

曲线函数: 0~1的衰减的余弦函数 转换成OC代码:

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

动画效果: bounce_position.gif

bounce_scale.gif

拓展

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

本文所有曲线通过Grapher绘画。

Grapher

总结

以前一直都是直接用POP或者UIView动画实现弹性动画的效果,对于原理实现不甚了解,但是一直保持着好奇心,终于是自己实现了一套方案(路子比较野😂)。

个人水平有限,欢迎发表建议。

最近的文章

开发者所需要知道的 iOS 11 SDK 新特性

年纪大了过了能熬夜看 WWDC 的时代了,但是还是在小小宝的哭闹和妈妈大人换尿布的催促中起了个大早。于是算趁着“热乎”把 WWDC 2017 的 Keynote 看完了。和往年差不多,虽然 WWDC 是一个开发者会议,但是 Keynote 并不是专门针对我们开发者的,它还承担了公司状况说明,新品发布等功能。作为技术人员,可能接下来的 session 会更有意义。要用一句话来评价今年 Keynote 所展现出来的内容的话,就是小步革新。大的技术方面可以说只有 ARKit 可堪研究,但是我们还...…

能工巧匠集继续阅读
更早的文章

iOS - 被赶尽杀绝的Crash

Crash曾经是折磨我们的梦魇,程序员的头顶的一把铡刀,你永远不知道它什么时候降下来…背景现在市面上Crash收集做得好的平台已经很多了,比如说听云、Bugly等,听云的功能确实强大、Crash的崩溃轨迹是其他平台上没有看到的,但是其价格有点惊人,而Bugly只记录页面轨迹,但是Bugly是免费的。不管是听云还是Bugly,他们的功能其实都是很好实现的,下面我会一一介绍。收集Crash在AppDelegate加入收集Crash的方法,具体监听Crash代码新建一个类目或者建一个单例都可...…

开发测试继续阅读