定时器动画

0 views

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

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

关于定时器

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

  • NSTimer NSTimer是最常使用的定时器，启动后会添加到RunLoop的定时器源中，然后在后续设置好的时间点唤醒RunLoop执行回调。如果在回调时间点遇到了CPU正在执行大量指令时，普遍认为该时间点的任务会被跳过，但实际效果可能与认识有偏差。在iOS10中，NSTimer还存在着不能正常释放引用对象的bug。详细请参考下面的文章链接

  • CADisplayLink CADisplayLink比较特殊，它的回调频率保持16.67ms一次，与屏幕的刷新频率一样。与NSTimer相似的地方在于两者都会在回调时唤醒所在的RunLoop，但CADisplayLink会不断处理来自内核的信号，可能导致大量的不必要的资源损耗，因此使用CADisplayLink的时间应当保证尽可能的短暂，具体参考下面的文章链接

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

声波动画

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

let twinkleInteval = 0.6
@IBAction func signIn(_ sender: UIButton) {
    self.timer = Timer(timeInterval: twinkleInteval, repeats: true, block: { [unowned self] (timer) in
        let frame = self.signInButton.frame
        let layer = self.roundLayer(with: frame)
        self.view.layer.insertSublayer(layer, below: self.signInButton.layer)
            self.twinkle(layer: layer)
    })
}

func twinkle(layer: CAShapeLayer) {
    let scale = CABasicAnimation(keyPath: "transform")
    scale.toValue = NSValue(caTransform3D: CATransform3DMakeScale(4, 4, 1))
    
    let opacity = CABasicAnimation(keyPath: "opacity")
    opacity.fromValue = NSNumber(floatLiteral: 0.75)
    opacity.toValue = NSNumber(floatLiteral: 0)
    
    let animation = CAAnimationGroup()
    animation.animations = [scale, opacity]
    animation.duration = twinkleInteval * 3
    animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
    animation.setValue(layer, forKey: layerKey)
    animation.delegate = self
    layer.opacity = 0
    layer.add(animation, forKey: nil)
}

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

 open func setValue(_ value: Any?, forKey key: String)

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

let layerKey = "layerKey"
extension XiuXiuViewController, CAAnimationDelegate {
    func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
        if let layer: CALayer = anim.value(forKey: layerKey) as? CALayer {
            layer.removeFromSuperlayer()
        }
    }
}

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

func roundLayer(with frame: CGRect) -> CAShapeLayer {
    let layer = CAShapeLayer()
    layer.path = UIBezierPath(roundedRect: frame, cornerRadius: frame.height / 2).cgPath
    layer.bounds = frame
    layer.position = signInButton.center
    layer.fillColor = UIColor(colorLiteralRed: 34/255.0, green: 192/255.0, blue: 100/255.0, alpha: 1).cgColor
    return layer
}

弹性动画

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

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

上面是笔者使用CoreAnimation对流程的大致总结，具体可能还有改动，但基本如此。根据这些步骤，笔者使用CADisplayLink在屏幕刷新时重新绘制图层实现波浪效果，在制作这个动画之前，我们先将波浪动画的gif单独放出来： 中间的弹出速度要快于两边，并且在达到最高点之后来回弹动。用弹簧动画是可以很简单的实现这种弹动效果，但是却没办法帮我们绘制这种效果，即便有人告诉你弹簧的计算公式，然后让你实现效果 对于笔者这样的学渣来说无疑是坑爹。所以为了能准确计算出中间的弹动效果，我们需要一些assistant来帮忙

@IBOutlet private weak var referView: UIView!
@IBOutlet private weak var springView: UIView!

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

func animateWave() {
    let path = CGMutablePath()
    path.move(to: .zero)
    path.addLine(to: CGPoint(x: view.frame.width, y: 0))
    
    let controlY = springView.layer.presentation()?.position.y
    let referY = referView.layer.presentation()?.position.y
    
    path.addLine(to: CGPoint(x: view.frame.width, y: referY!))
    path.addQuadCurve(to: CGPoint(x: 0, y: referY!), control: CGPoint(x: view.frame.width / 2, y: controlY!))
    path.addLine(to: .zero)
    layer.path = path
}

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

@IBAction func animate(_ sender: Any) {
    let target = CGPoint(x: 0, y: view.center.y / 2)
    referView.layer.position = target
    springView.layer.position = target
    
    displayLink?.invalidate()
    displayLink = CADisplayLink(target: self, selector: selector(animateWave))
    displayLink?.add(to: RunLoop.current, forMode: .commonModes)
    
    let move = CASpringAnimation(keyPath: "position")
    move.fromValue = NSValue(cgPoint: .zero)
    move.toValue = NSValue(cgPoint: target)
    move.duration = 2
    
    let spring = CASpringAnimation(keyPath: "position")
    spring.fromValue = NSValue(cgPoint: .zero)
    spring.toValue = NSValue(cgPoint: target)
    spring.duration = 2
    spring.damping = 7
    
    referView.layer.add(move, forKey: nil)
    springView.layer.add(spring, forKey: nil)
    referView.layer.position = target
    springView.layer.position = target
}

其他

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

转载请注明本文作者和转载地址

PREVIOUS闲聊内存管理
NEXT位运算