iOS进阶4 -- 动画总结

Even_DC

墨衍会员 · AI 创作全网分发码龄12年

关注

转载最新推荐文章于 2026-10-04 13:48:19 发布 524 阅读 AI 写同款· GEO 优化 ›

iOS透明导航栏的平滑过渡（进阶版）使用Category和Runtime来做到真正的透明导航栏，以及与不透明导航栏之间切换时的平滑渐变过渡效果阅读详情

1.基础：逐帧与关键帧

逐帧动画：
类似于手绘翻页方式，我们可以将这个水杯在每帧画面中的位置一一找出来，这样实现动画的方式就叫作逐帧动画，我们需要处理动画中的每一帧。

我们一般在计算机上用 FPS ( Frames Per Second) ，即 每秒的帧数 来表示动画的刷新速度，基于屏幕的刷新率等其他原因，在计算机上一般采用 60 FPS。
如果运动变化幅度较缓，减半到 30 FPS 时，我们肉眼也是可接受的。
较低的 FPS 会让我们有“卡顿”的感觉。

关键帧动画：
一个涉及数学和物理的问题：一个杯子初始位置在左边，n秒后匀速运动到右边，那么在每 1/60 秒的时候，这个杯子的位置显然是可以计算出来的了。
所以，我们其实只需要指定一些关键信息就能让计算机自己计算出每一帧杯子的位置了：

起始位置，比如一个坐标 (0,0)
结束位置，再比如一个坐标 (100,0)
动画总时间，比如 0.25 秒
匀速运动
这种方式就称之为关键帧动画。即我们只需要给定几个关键帧的画面信息，关键帧与关键帧之间的过渡帧都将由计算机自动生成。

这里说的 关键帧动画，是指的广义上的一种动画制作方式，并不仅指 CAKeyframeAnimation，CABasicAnimation的实现方式也属于 关键帧动画

2.iOS 动画

一个动画的本质，就是动画对象（这里是 UIView）的状态，基于时间变化的反应了。简单说，就是给定任意一个时刻，如果你都能得到这个动画对象的位置和、形状等等属性，你就能实现这个动画了。
属性值的变化，既可能是位置、透明度、旋转角度等的变化，也包括形状的改变，比如从一条直线变化成一个圆圈，目标就是要得到变化过程中特定时刻的中间态。

iOS 的动画分为两大类：
系统提供的 关键帧动画 实现方式；用户指定 关键 信息，系统实现动画过程，对用户而言操作起来会简单些。
逐帧动画 实现方式；用户自己 画 出每一帧画面，系统操作方法简单，但用户操作的工作量就会大一些。

逐帧方法绘制：

简单的说，要实现逐帧的方式，就是需要周期性的调用绘制方法，绘制每帧的动画对象。

这里说的绘制，不光是指覆写 UIView 的 - drawRect:的方法来手动重绘视图，也包括修改 UIView 它的属性，比如位置、颜色等。

iOS 的动画都是基于 CALayer 的，iOS 的 UIView 背后都有一个对应的 CALayer 。对 UIView 的修改实际上都是对背后 CALayer 的修改。
但如果在逐帧绘制的方法中修改了一个自建的 CALayer，这个 CALayer 不是对应某个 UIView 的，需注意系统的 隐式动画 的影响，后面会提到这点。

用逐帧方法绘制的原理不是很麻烦，麻烦的是绘制过程。
对于一个复杂动画，你可能需要运用各种物理、几何知识去计算视图中间状态的信息。
比如要实现一条直线卷曲变化为一个圆的动画，你就需要计算出中间态的曲线的弯曲程度和位置。

著名的 facebook 的 pop 动画框架，就是使用 CADisplayLink 这种逐帧绘制的方式实现的。

关键帧动画实现方式：
用 UIView 移动的简单例子。这里面有两个关键帧，起始帧和结束帧，除此之外还有2个关键信息：

起始帧，变化信息：坐标为 (0,0)
结束帧，变化信息：坐标为 (100,0)
动画时间，0.25秒
匀速运动
坐标信息是 UIView 的一个属性（实际是对应到 CALayer 的属性），在动画实现里，我们只需要指定起始和结束的两个关键值就够了，中间的过渡值都有系统自动生成。
这里出现了两种值，一个是我们设定的，一个是系统生成的，所以要先在这里插入一个模型层和展现层的概念了

CALayer 的同一个属性值，会分别保存在模型层 modelLayer ，和展现层 presentationLayer 中。当我们修改属性值时，是修改的模型层的数值，动画时系统根据模型层的变化，生成的过渡值，是保存在展现层中的。

在 CALayer 的对象里能直接访问到这两层的信息。
而 CALayer 的底层实现实际不止这两层，但我们现在讨论动画的时候，可以只关心这两层。

在整个动画过程中，呈现出来的过程是这样的：
动画前，显示模型层的当前值；
动画开始，切换显示展现层的值；
动画过程中，展现层的值根据时间变化，我们看到的实际是展现层的值在变化；
动画结束，切换回显示模型层的值，此时模型层的值应被修改为动画结束时的值。
用一段代码来解释下动画过程。

 UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    view.backgroundColor = [UIColor redColor];
    [self.view addSubview:view];

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
    animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(50, 0)];
    animation.toValue = [NSValue valueWithCGPoint:CGPointMake(150, 0)];
    [view.layer addAnimation:animation forKey:nil];

//    view.frame = CGRectOffset(view.frame, 100, 0);

你会发现动画结束后，view 又跳回了原来的位置，这是因为最后一行代码注释了，而这行代码的功能就是实现第4步，将模型层的值修改为动画结束时的值。

动画实现

代码中的 CABasicAnimation 就是真正的动画实现部分，也就是设定关键帧信息的地方。

将动画加入 CALayer 的代码定义为：

- (void)addAnimation:(CAAnimation *)anim forKey:(NSString *)key

接受的类型是 CAAnimation 类型，有下面这些子类：

CABasicAnimation，可设定起始结束两个关键帧的信息。
CAKeyframeAnimation，除首尾外，还可添加多个中间关键点。
CAAnimationGroup ，可组合多个动画，因为上面两种动画一次只能设置一个属性值。
CATransition，图层过渡动画，默认是淡入。比如修改一个 CALayer的背景色时，是从初始色慢慢淡入过渡到结束色。
可修改为新颜色把旧颜色顶出去等效果。还可使用 CIFilter 滤镜做过渡效果，一些开源 UIViewController 的过渡动画使用了这种方式。