图层时间CAMediaTiming

CoreAnimationXmind.png

这是 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)
    }

效果如下:

CATimingAutoreverses.gif

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)
    }

效果如下:

CAtimeOffset.gif

1.4 fillMode

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

1.4.1 removed

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

CAfillModeRemoved.png
1.4.2 backwards

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

CAfillModeBackwards.png
1.4.3 forwards

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

CAfillModeForwards.png
1.4.4 both

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

CAfillModeBoth.png

如果想保留上一部分动画结束状态,可以设置动画为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

欢迎更多指正:https://github.com/pro648/tips

本文地址:https://github.com/pro648/tips/blob/master/sources/图层时间CAMediaTiming.md

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,347评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,435评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,509评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,611评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,837评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,987评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,730评论 0 267
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,194评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,525评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,664评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,334评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,944评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,764评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,997评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,389评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,554评论 2 349

推荐阅读更多精彩内容