iOS动画-定时器动画

前言

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

iOS动画-定时器动画_第1张图片

定时器的作用类似于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定时消息的改动。下面放上本篇博客的动画效果

iOS动画-定时器动画_第2张图片

声波动画

声波动画参照自支付鸨的咻一咻功能,现在的版本貌似取消了(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对应属性是否为可动画属性,如果否,不执行下一步
  • 根据toValuefromValue计算出动画差值,根据duration属性计算出动画帧数,然后两者计算出每一帧的图层属性
  • 根据fillMode参数判断是否将图层的presentation设置为动画第一帧的图层属性并提交渲染
  • 逐帧设置presentation并渲染
  • 根据autoreverses判断是否逆向执行一次动画
  • 动画结束调用代理对象的animationDidStop方法,根据isRemovedOnCompletion属性判断是否移除动画
  • 如果上一步未移除动画,根据fillMode属性判断是否将图层设置为最后一帧的属性。或者将presentation同步为模型树属性

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

iOS动画-定时器动画_第3张图片

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

对于笔者这样的学渣来说无疑是坑爹。所以为了能准确计算出中间的弹动效果,我们需要一些 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

上一篇:按钮动画

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

你可能感兴趣的:(iOS动画-定时器动画)