iOS Core Animation - UIView Animation

UIView Animation

简单动画

对于 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

关键帧动画

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

[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，正好承接上一个结束，第三个同理，这样三个动画就变成连续的动画了。

View 的转换

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

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

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

同样，View 之间的转换也有很多选项可选，例如 UIViewAnimationOptionTransitionFlipFromLeft 从左边翻转，UIViewAnimationOptionTransitionCrossDissolve 渐变等等。

参考：https://zhuanlan.zhihu.com/p/20031427?columnSlug=cheerfox#!