UIView Animation 动画学习总结

2022-09-01 09:28 由 reyzhang 发表于 #移动端开发

一、前言
二、UIView Animation
三、CALayer Animation

一、前言

动画一直是 iOS 开发中很重要的一部分。设计良好，效果炫酷的动画往往能对用户体验的提升起到很大的作用，在这里将自己学习 iOS 动画的体会记录下来，希望能对别人有所帮助。

iOS 的动画框架，即 CoreAnimation，本身十分庞大和复杂，这里暂时分两个部分进行介绍，分别是 UIView 动画 和 CALayer 动画。

二、UIView Animation

2.1 简单动画

对于 UIView 上简单的动画，iOS 提供了很方便的函数：

animateWithDuration:animations:

第一个参数是动画的持续时间，
第二个参数是一个 block，在 animations block 中对 UIView 的属性进行调整，设置 UIView 动画结束后最终的效果，iOS 就会自动补充中间帧，形成动画。

可以更改的属性有:

frame
bounds
center
transform
alpha
backgroundColor
contentStretch

这些属性大都是 View 的基本属性，下面是一个例子，这个例子中的动画会同时改变 View 的 frame，backgroundColor 和 alpha ：

[UIView animateWithDuration:2.0 animations:^{
    myView.frame = CGRectMake(50, 200, 200, 200);
    myView.backgroundColor = [UIColor blueColor];
    myView.alpha = 0.7;
}];

其中有一个比较特殊的 transform 属性，它的类型是 CGAffineTransform，即 2D 仿射变换，这是个数学中的概念，用一个三维矩阵来表述 2D 图形的矢量变换。用 transform 属性对 View 进行：

旋转
缩放
其他自定义 2D 变换

iOS 提供了下面的函数可以创建简单的 2D 变换：

CGAffineTransformMakeScale
CGAffineTransformMakeRotation
CGAffineTransformMakeTranslation

例如下面的代码会将 View 缩小至原来的 1/4 大小：

[UIView animateWithDuration:2.0 animations:^{
    myView.transform = CGAffineTransformMakeScale(0.5, 0.5);
}];

调节参数

完整版的 animate 函数其实是这样的：

animateWithDuration:delay:options:animations:completion:

可以通过 delay 参数调节让动画延迟产生，同时还一个 options 选项可以调节动画进行的方式。可用的 options 可分为两类：

一、控制过程

例如 UIViewAnimationOptionRepeat 可以让动画反复进行， UIViewAnimationOptionAllowUserInteraction 可以让允许用户对动画进行过程中同 View 进行交互（默认是不允许的）

二、控制速度

动画的进行速度可以用速度曲线来表示（参考这里），提供的选项例如：

UIViewAnimationOptionCurveEaseIn 是先慢后快，
UIViewAnimationOptionCurveEaseOut 是先快后慢。

不同的选项直接可以通过“与”操作进行合并，同时使用，例如:

UIViewAnimationOptionRepeat | UIViewAnimationOptionAllowUserInteraction

2.2 关键帧动画

上面介绍的动画中，我们只能控制开始和结束时的效果，然后由系统补全中间的过程，有些时候我们需要自己设定若干关键帧，实现更复杂的动画效果，这时候就需要关键帧动画的支持了。下面是一个示例：

[UIView animateKeyframesWithDuration:2.0 delay:0.0 options:UIViewKeyframeAnimationOptionRepeat | UIViewKeyframeAnimationOptionAutoreverse animations:^{

    [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{
        self.myView.frame = CGRectMake(10, 50, 100, 100);
    }];

    [UIView addKeyframeWithRelativeStartTime: 0.5 relativeDuration:0.3 animations:^{
        self.myView.frame = CGRectMake(20, 100, 100, 100);
    }];

    [UIView addKeyframeWithRelativeStartTime:0.8 relativeDuration:0.2 animations:^{
        self.myView.transform = CGAffineTransformMakeScale(0.5, 0.5);
    }];
} completion:nil];

这个例子添加了三个关键帧，在外面的 animateKeyframesWithDuration 中我们设置了持续时间为 2.0 秒，这是真实意义上的时间，里面的 startTime 和 relativeDuration 都是相对时间。以第一个为例，startTime 为 0.0，relativeTime 为 0.5，这个动画会直接开始，持续时间为 2.0 X 0.5 = 1.0 秒，下面第二个的开始时间是 0.5，正好承接上一个结束，第三个同理，这样三个动画就变成连续的动画了。

2.3 View 的转换

iOS 还提供了两个函数，用于进行两个 View 之间通过动画换场：

transitionWithView:duration:options:animations:completion:
transitionFromView:toView:duration:options:completion:

需要注意的是，换场动画会在这两个 View 共同的父 View 上进行，在写动画之前，先要设计好 View 的继承结构。

同样，View 之间的转换也有很多选项可选，例如

UIViewAnimationOptionTransitionFlipFromLeft 从左边翻转，
UIViewAnimationOptionTransitionCrossDissolve 渐变等等。

三、CALayer Animation

UIView 的动画简单易用，但是能实现的效果相对有限，上面介绍的 UIView 的几种动画方式，实际上是对底层 CALayer 动画的一种封装。直接使用 CALayer 层的动画方法可以实现更多高级的动画效果。
更多内容详见：《ios animation 动画学习总结》