iOS 动画-定时器动画

前言

任何动画离不开一个重要的概念——时间,CoreAnimation动画创建后在动画后续的不同时间点渲染了不同的图像帧,使值改变前后生成一个过渡的流畅动画

11783864-d43992ca3fe4d1d9

定时器的作用类似于CoreAnimation的操作,在定时器启动后对应的时间点插入回调任务。如果每个回调任务之间的间隔足够短,并在每个任务之间绘制图案,就能达成自制动画的效果。本文分别使用NSTimerCADisplayLink两个定时器来实现不同的动画

关于定时器

iOS开发中有三种常见的定时器:NSTimerCADisplayLink以及GCD Timer,前两个定时器在使用时要加入到某个运行的RunLoop当中,在每个回调时间点会唤醒线程,执行任务。GCD Timer依赖于派发线程,从准确度上而言要强于前两者,但是本文并不涉及这种定时器的使用。

  • NSTimer
    NSTimer是最常使用的定时器,启动后会添加到RunLoop的定时器源中,然后在后续设置好的时间点唤醒RunLoop执行回调。如果在回调时间点遇到了CPU正在执行大量指令时,普遍认为该时间点的任务会被跳过,但实际效果可能与认识有偏差。在iOS10中,NSTimer还存在着不能正常释放引用对象的bug。详细请参考下面的文章链接
  • CADisplayLink
    CADisplayLink比较特殊,它的回调频率保持16.67ms一次,与屏幕的刷新频率一样。与NSTimer相似的地方在于两者都会在回调时唤醒所在的RunLoop,但CADisplayLink会不断处理来自内核的信号,可能导致大量的不必要的资源损耗,因此使用CADisplayLink的时间应当保证尽可能的短暂,具体参考下面的文章链接

两个定时器都能协助我们很好的实现动画效果,更详细的介绍参考iOS10定时消息的改动。下面放上本篇博客的动画效果

12783864-2446f83df0fb2473

声波动画

声波动画参照自支付鸨的咻一咻功能,现在的版本貌似取消了(ps:吐槽一句支付鸨更新之后看个余额都费劲)。从gif图中不难看到动画是由多个图层缩放消失叠加在一起实现的,其中单个缩放消失的动画在我上一篇按钮动画中有提到,基于上篇文章的动画,笔者在点击按钮的时候添加了一个NSTimer用来保证每隔一段时间新增一个动画图层。理论上来说可以将这些动画的CAShapLayer保存起来重复使用,但demo中偷懒,每次回调创建新的图层进行动画

通过修改animation.duration来确定同一时间停留在屏幕上的图层数量。另外,由于demo中每次回调创建一个图层,为了避免长时间动画后,视图上保留的CAShapeLayer过多时,在每次动画结束后移除对应的图层。

方法可以将图层通过键值对的方式保存在动画对象animation中,并在动画结束时取出图层。iOS10之前所有NSObject的子类都自动遵守了动画协议,但在iOS10中我们需要手动遵守CAAnimationDelegate

另外,图层的位置是通过bounds + position来确认的,前者确认图层大小尺寸,后者确认中心点

弹性动画

认识CoreAnimation一文中展示过类似的弹性动画,这里对CoreAnimation动画的流程进行介绍

  • 判断keyPath对应属性是否为可动画属性,如果否,不执行下一步
  • 根据toValuefromValue计算出动画差值,根据duration属性计算出动画帧数,然后两者计算出每一帧的图层属性
  • 根据fillMode参数判断是否将图层的presentation设置为动画第一帧的图层属性并提交渲染
  • 逐帧设置presentation并渲染
  • 根据autoreverses判断是否逆向执行一次动画
  • 动画结束调用代理对象的animationDidStop方法,根据isRemovedOnCompletion属性判断是否移除动画
  • 如果上一步未移除动画,根据fillMode属性判断是否将图层设置为最后一帧的属性。或者将presentation同步为模型树属性

上面是笔者使用CoreAnimation对流程的大致总结,具体可能还有改动,但基本如此。根据这些步骤,笔者使用CADisplayLink在屏幕刷新时重新绘制图层实现波浪效果,在制作这个动画之前,我们先将波浪动画的gif单独放出来:

13783864-478a6514e44a4cbc

中间的弹出速度要快于两边,并且在达到最高点之后来回弹动。用弹簧动画是可以很简单的实现这种弹动效果,但是却没办法帮我们绘制这种效果,即便有人告诉你弹簧的计算公式,然后让你实现效果

 14783864-6a5ca37fd016c756
对于笔者这样的学渣来说无疑是坑爹。所以为了能准确计算出中间的弹动效果,我们需要一些assistant来帮忙

为了不影响动画视觉,这两个view应该设置为hidden或者透明色。每次屏幕刷新时,获取两个视图的presentation的位置,然后绘制出路径,设置到图层上显示

在用户点击按钮的时候,创建定时器对象,并且给两个assistant添加对应的弹出动画。这里笔者两个弹出都使用了CASpringAnimation弹簧动画,经过多次试验,如果referView只是使用简单的移动动画,整体的弹出效果会有些不自然。只要保证左右两侧的弹动力远低于中间,就能看到很好的效果了

其他

使用assistant是一种动画常见的方式,尤其在弹性动画方面更是家常便饭。在开发中CoreAnimation已经能够很好的应付95%的动画效果,合理的结合定时器可以让动效变得更加棒。最后吐槽一下苹果的spring动画,如果你尝试在模拟器上slow animation,很容易就看到苹果的弹性动画回弹时是对称的(⊙﹏⊙)b ,本文demo

上一篇:按钮动画

1 2 收藏 评论

关于作者:林欣达

iOS码农一枚 个人主页 · 我的文章 · 1 ·     

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部