xietao3

探索之旅,学习之路

你好,我是谢涛!欢迎来到我的个人主页.
90后代码搬运工,目前就职于上海天天果园,任职iOS高级开发工程师。


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

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动画实现弹性动画的效果,对于原理实现不甚了解,但是一直保持着好奇心,终于是自己实现了一套方案(路子比较野😂)。

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

最近的文章

包教包会-贝塞尔曲线的绘制原理与应用

说来话长,这一切都得从PhotoShop中的钢笔工具开始说起…声明:本文不含复杂数学公式,学渣放心阅读吧😂(我仿佛看到了学渣们留下了激动的泪水)背景贝塞尔曲线(Bézier curve)是应用于二维图形应用程序的数学曲线,贝塞尔曲线基于多个点构成。它的应用非常广泛,比如说PS中的钢笔工具所绘画的曲线就是贝塞尔曲线,绘制动画的运动轨迹等等,而最近一次想用到贝塞尔曲线是想做一个 路径动画 。简介在iOS开发中一般通过UIBezierPath来实现贝塞尔曲线的绘制,平时一般使用绘制二阶和三阶...…

继续阅读
更早的文章

iOS - 被赶尽杀绝的Crash

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

继续阅读