Skip to content

图层时间CAMediaTiming

pro648 edited this page Aug 17, 2020 · 1 revision

CoreAnimationXmind

这是 Core Animation 的系列文章,介绍了 Core Animation 的用法,以及如何进行性能优化。

  1. CoreAnimation基本介绍
  2. CGAffineTransform和CATransform3D
  3. CALayer及其各种子类
  4. CAAnimation:属性动画CABasicAnimation、CAKeyframeAnimation以及过渡动画、动画组
  5. 图层时间CAMediaTiming
  6. 计时器CADisplayLink
  7. 影响动画性能的因素及如何使用 Instruments 检测
  8. 图像IO之图片加载、解码,缓存
  9. 图层性能之离屏渲染、栅格化、回收池

上一篇文章介绍了使用CAAnimation及其子类创建多种类型动画。动画是一段时间的变化,因此时间也是一个至关重要的概念。这一篇文章介绍 Core Animation 中的时间。

1. CAMediaTiming 协议

CAMediaTiming协议定义了一系列属性,用于管理动画过程中的时间。CALayerCAAnimation都遵守CAMediaTiming协议,因此,时间可以针对于图层,也可以针对于动画。

1.1 常用属性

  • duration:是CFTimeInterval类型,单位为秒,与NSTimeInterval类似。指定动画单次迭代时长。

  • repeatCount:指定动画重复次数。如果duration为2秒,repeatCount为3.5次,则动画总时长为7秒。

    durationrepeatCount属性默认均为0,但不意味着动画时长0秒,播放0次,这里的0表示使用默认值,即0.25秒、1次。

  • repeatDuration:指定循环时间,而非repeatCount的循环次数。

  • autoreverses:如果为true,则向前播放后后退播放。默认为false。

1.2 使用 repeatDuration 和 autoreverses 实现摆动动画

下面代码实现了无限摆动门的动画。其中,使用autoreverses实现自动反转摆动,设置repeatDurationinfinity实现永不停歇摆动。repeatCountrepeatDuration可能冲突,同时使用的结果可能是未定义的。

    private func swingingDoorUsingAutoreverse() {
        doorLayer.bounds = CGRect(x: 0, y: 0, width: 128, height: 256)
        // 设置锚点为layer左边缘中点
        doorLayer.anchorPoint = CGPoint(x: 0, y: 0.5)
        doorLayer.contents = UIImage(named: "Door")?.cgImage
        view.layer.addSublayer(doorLayer)
        
        // Apply perspective transform
        var perspective = CATransform3DIdentity
        perspective.m34 = -1.0 / 500.0
        view.layer.sublayerTransform = perspective
        
        // Apply swinging animation
        let animation = CABasicAnimation(keyPath: "transform.rotation.y")
        animation.toValue = -.pi/2.0
        animation.duration = 2.0
        animation.repeatDuration = .infinity
        animation.autoreverses = true
        doorLayer.add(animation, forKey: nil)
    }

效果如下:

autoreverses

1.3 相对时间

Core Animation 中的时间是相对时间,每个动画有自身的时间概念,可以独立的加速、延时或偏移。

beginTime属性指定动画开始之前的延迟时间,动画起点从添加到可见图层开始计算。默认值为0,即添加到可见图层后动画立即开始。

speed是时间的倍数,默认为1.0。speed减小,动画、图层时间会变慢;speed增大,动画、图层时间会变快。如果speed为2.0,对于一个duration为1秒的动画,实际上0.5秒就会完成。如果为 layer 的speed是2.0,则所有添加到该 layer 的速度都会变为二倍。如果动画speed是3,layer 的speed是0.5,则动画是正常速度的1.5倍。

timeOffset指定时间偏移量。beginTime延迟动画开始时间,timeOffset快进到指定时间。例如,动画时长1秒,timeOffset为0.5秒意味着动画从0.5秒开始,执行到结束后再次从0秒执行到0.5秒。

beginTime不同,timeOffset不受speed影响。例如,动画duration时间为1秒,设置speed为2.0、timeOffset为0.5,此时动画时长变为0.5秒。timeOffset让动画从结束位置开始,但仍然会播放一个完整的时长(这里时0.5秒),这个动画仅仅是从结尾开始播放,最终完成了一个循环。

使用下面的示例设置不同的speedtimeOffset,点击 Play 按钮查看播放效果:

    private func createShip() {
        // Create a path
        let centerX = view.bounds.size.width / 2
        let centerY = view.bounds.size.height / 2

        bezierPath.move(to: CGPoint(x: view.bounds.size.width / 2 - 150, y: centerY))
        bezierPath.addCurve(to: CGPoint(x: centerX + 150, y: centerY), controlPoint1: CGPoint(x: centerX - 75, y: centerY - 150), controlPoint2: CGPoint(x: centerX + 75, y: centerY + 150))
        
        // Draw the path using a CAShapeLayer
        let pathLayer = CAShapeLayer()
        pathLayer.path = bezierPath.cgPath
        pathLayer.fillColor = UIColor.clear.cgColor
        pathLayer.strokeColor = UIColor.red.cgColor
        pathLayer.lineWidth = 3.0
        view.layer.addSublayer(pathLayer)
        
        // Add the ship
        shipLayer.bounds = CGRect(x: 0, y: 0, width: 64, height: 64)
        shipLayer.position = CGPoint(x: centerX - 150, y: centerY)
        shipLayer.contents = UIImage(named: "Ship")?.cgImage
        view.layer.addSublayer(shipLayer)
        
        updateSliders()
    }
    
    @IBAction func updateSliders() {
        let timeOffset = timeOffsetSlide.value
        timeOffsetLabel.text = String(format: "%.2f", timeOffset)
        
        let speed = speedSlide.value
        speedLabel.text = String(format: "%.2f", speed)
    }
    
    @IBAction func playButtonTapped(_ sender: Any) {
        // Create the keyframe animation
        let animation = CAKeyframeAnimation(keyPath: "position")
        animation.timeOffset = CFTimeInterval(timeOffsetSlide.value)
        animation.speed = speedSlide.value
        animation.duration = 1.0
        animation.path = bezierPath.cgPath
        animation.rotationMode = .rotateAuto
        animation.isRemovedOnCompletion = true
        shipLayer.add(animation, forKey: nil)
    }

效果如下:

timeOffset

1.4 fillMode

fillMode属性可以管理动画开始、结束时的表现。

1.4.1 removed

fillMode默认值为CAMediaTimingFillMode.removed。如果设置了beginTime,动画从beginTime开始;如果没有设置,则立即开始。动画结束后移除动画。

removed

1.4.2 backwards

无论是否立即执行动画,CAMediaTimingFillMode.backwards都会展示动画的第一帧。

backwards

1.4.3 forwards

CAMediaTimingFillMode.forwards像往常一样播放动画,但将动画的最后一帧保留到屏幕上,直到你移除动画。

forwards

1.4.4 both

CAMediaTimingFillMode.bothforwardsbackwards的组合,即立即显示动画的第一帧,动画结束后保留最后一帧。

both

如果想保留上一部分动画结束状态,可以设置动画为forwards,并设置isRemovedOnCompletion为 false。

那我们是否需要使用fillMode?是否应该移除动画?应如何更新图层以实现平滑动画?

最重要的一条原则就是:移除动画并尽可能避免使用fillMode,除非要实现的效果没有其他方式可以实现。fillMode会使UI元素失去交互性,并且图层与model不匹配。一般在添加动画后立即更新图层 model 即可。如果出现动画起始、终止时闪烁,可以尝试添加动画前更新 model。

2. 时间层级关系

在第一篇文章CoreAnimation基本介绍中介绍了图层层级结构,动画时间也有类似结构。

每个动画、图层有自身时间概念。调整一个图层的时间会影响其自身及其子类的动画,但不会影响父图层。

2.1 全局时间和本地时间

Core Animation 的全局时间也称为马赫时间(mach time),mach 是iOS、macOS系统内核名称。在同一设备的不同线程、进程中,mach time 相同;不同设备 mach time 不同。mach time 可以作为动画时间参照点。使用以下函数获取马赫时间:

        let machTime = CACurrentMediaTime()

CACurrentMediaTime()具体值无关紧要,真实作用在于为动画时间测量提供了一个相对值。CACurrentMediaTime()不能用于更新时钟时间。

每个CALayerCAAnimation实例有自身时间概念,是根据父图层、动画层级中的beginTimetimeOffsetspeed等属性计算出。就跟转换不同layer间坐标系统一样,CALayer也提供了转换不同图层之间的本地时间方法:

  • convertTime:fromLayer:将 time interval 从指定 layer 转换为接收者时间空间。
  • convertTime:toLayer:将 time interval 从接收者空间转换为指定 layer 时间空间。

想要同步多个具有不同speedtimeOffsetbeginTime的图层时,上述方法会非常有效。

2.1 暂停、回退和快进

动画speed被设置为零会暂停动画,但动画被添加到图层后不能修改,因此不能使用speed属性暂停运行中的动画。添加CAAnimation到 layer 时,复制一份不可变动画对象,因此修改原始动画对进行中的动画没有效果。使用animation(forKey:)可以获取进行中的动画,但不能修改获取的动画,修改该动画会导致无法预期的行为。

从图层移除进行中的动画,动画会急速返回动画之前的状态。在动画被移除前,复制 presentation layer 的属性,并赋值给 model layer,动画就会有看起来停止了的效果。

增大主window layer 的speed,可以加快整个应用动画速度,达到快进效果。设置speed为负值,可以达到回退效果。在模拟器中,勾选 Debug > Slow Animations 后可以开启慢动画,可以用于调试动画效果。

Demo名称:CoreAnimation
源码地址:https://github.com/pro648/BasicDemos-iOS/tree/master/CoreAnimation

上一篇:CAAnimation:属性动画CABasicAnimation、CAKeyframeAnimation以及过渡动画、动画组

下一篇:计时器CADisplayLink

参考资料:

  1. Controlling Animation Timing
Clone this wiki locally