iOS – CoreAnimation笔记(1)

CoreAnimation 学习笔记1

独立线程执行,不会堵塞主线程。

核心API

  • CAAnimation: 所有动画基类,实现CAMediaTiming协议。提供了动画的持续时间、速度和重复计数等。
  • CATransition: CAAnimation的子类,使用预设过渡效果控制过度动画。
  • CAPropertyAnimation: CAAnimation的子类,抽象类,创建动画主要使用它的两个子类。
  • CABasicAnimation: CAPropertyAnimation子类,简单控制layer层的属性慢慢改变,达到动画效果。很多非root layer的属性值修改时默认会执行这个动画类。
  • CAKeyframeAnimation: CAPropertyAnimation子类,关键帧动画。
  • CAAnimationGroup: 用于将多个动画组合在一起执行。
  • CASpringAnimation: CABasicAnimation的子类,弹簧动画。

详解

CAMediaTiming

该协议为layer和animation提供一个时间体系。

// 开始时间,更像是去设置一个延时运行的时间,比如5s后运行。 当然不可以直接设置为5,因为可能是一个过去的时间,所以可以设置为CACurrentMediaTime() + 5
public var beginTime: CFTimeInterval { get set }

// 持续时间
public var duration: CFTimeInterval { get set }

// 速度
public var speed: Float { get set }

// 动画重复次数
public var repeatCount: Float { get set }

// 我理解为总共需要重复的时间,比如duration为1,repeatDuration为10,则表示重复10次
public var repeatDuration: CFTimeInterval { get set }

// 如果为true,则表示动画从初始值到最终值,然后返回来回到初始值。默认为false
public var autoreverses: Bool { get set }

// 动画一开始跳过timeOffset设定的时间,
public var timeOffset: CFTimeInterval { get set }

// 动画模式
public var fillMode: CAMediaTimingFillMode { get set }

duration为3秒,offset为1秒的动画。

CAMediaTimingFillMode

分为四种

  • forwards: 动画结束后,layer处于结束后的那一刻。
  • backwards: 动画开始前,layer处于动画开始那一刻的状态。
  • both: 结合上述两种状态。
  • removed: 默认模式,动画对layer的状态没有影响。动画开始前和结束后,layer都处于添加动画前的状态。

这里有一个demo:

  1. 一个正方形
  2. 一开始添加到屏幕最左边 (添加动画前的状态)
  3. 添加动画
  4. 动画的起始x位置为屏幕中间位置 (动画开始)
  5. 动画结束位置为屏幕右侧 (动画结束)
  6. 延迟一秒执行。

1. fillMode = .removed

2291385-7a0b0c2af78f98ee

特点:

  • 开始结束状态不受影响。最后回到添加动画前的状态。
  • 即使延迟一秒,动画在开始时也一直保持添加动画前的状态。
  • 结束后恢复到添加动画前的状态。

2. fillMode = .backwards

2291385-f4f7b63dcc7af5b1

特点:

  • 动画处于开始时的状态。 可对比 .removed。
  • 动画开始时直接进入动画开始的状态,然后在中点位置停留了1秒。
  • 结束后恢复到添加动画前的状态。

3. fillMode = .forward

2291385-6a2627ff37aa7523

  • 即使延迟一秒,动画在开始时也一直保持添加动画前的状态。
  • 动画结束后保持最后的状态

4. fillMode = .both

2291385-3e36a68562f2ff2e

  • 动画处于开始时的状态。 可对比 .removed。
  • 动画开始时直接进入动画开始的状态,然后在中点位置停留了1秒。
  • 动画结束后保持最后的状态

CAAnimation

// 速度控制函数,控制动画运行的节奏. 默认是linear线性动画
open var timingFunction: CAMediaTimingFunction?

// delegate
open var delegate: CAAnimationDelegate?

// 一旦动作结束就移除动画。默认是true
open var isRemovedOnCompletion: Bool

CAMediaTimingFunctionName

有几种类型

  • linear: 线性动画
  • easeIn: 动画缓慢开始,然后逐渐加速
  • easeOut: 动画迅速开始,在结束时减速
  • easeInEaseOut: 动画慢慢开始,然后加速,在结束之前减速

CAAnimationDelegate

// 动画开始时调用
optional public func animationDidStart(_ anim: CAAnimation)

// 动画结束后调用
optional public func animationDidStop(_ anim: CAAnimation, finished flag: Bool)