转载

iOS 动画分享（关键帧动画和波浪动画）

一.关键帧动画

效果如下（模仿Twitter的启动动画）

需要知道的

什么是CAKeyframeAnimation

顾名思义，CAKeyframeAnimation 就相当于 Flash 里的关键帧动画，如果你用过 Flash 制作动画的话你就知道，如果我们要实现一个简单的位置平移、大小缩放、形状变换，我们只需要使用补间动画就可以实现。具体操作就是给出动画的起始状态和结束状态两个关键帧，中间的动画过程只需要设置一个补间即可，剩下的事情软件会自动完成。而这里的起始状态和结束状态的概念，也被沿用到了 CAKeyframeAnimation 里所说的关键帧。

代码中，设置了3个关键帧，

[transAnimation setValues:@[[NSValue valueWithCGRect:firstBounds],[NSValue valueWithCGRect:secondBounds],[NSValue valueWithCGRect:finalBounds]]];

并且设置对应的时间点

transAnimation.keyTimes = @[@0,@0.5,@1];

也就是动画一开始时 bounds 处于 firstBounds 状态；duration 一半时间时处于 secondBounds 状态；动画结束时处于 finalBounds 状态。

补充

当你给一个 CALayer 添加动画的时候，动画其实并没有改变这个 layer 的实际属性。取而代之的，系统会创建一个原始 layer 的拷贝。在文档中，苹果称这个原始 layer 为 Model Layer ，而这个复制的 layer 则被称为 Presentation Layer 。 Presentation Layer 的属性会随着动画的进度实时改变，而 Model Layer 中对应的属性则并不会改变。这里就可以引出 removedOnCompletion 和 fillMode 了。

removedOnCompletion 的官方解释是：

/* When true, the animation is removed from the render tree once its  * active duration has passed. Defaults to YES. */

也就是默认情况下系统会在 duration 时间后自动移除这个 CAKeyframeAnimation。当 remove 了某个动画，那么系统就会自动销毁这个 layer 的 Presentation Layer ，只留下 Model Layer 。而前面提到 Model Layer 的属性其实并没有变化，所以也就有了你前面看到的结果，视图在一瞬间回到了动画的初始状态。要解决这种情况，你需要先把 removedOnCompletion 设置为 no ，然后设置 fillMode 为kCAFillModeForwards 。关于 fillMode ，它有四个值：

kCAFillModeRemoved 这个是默认值，也就是说当动画开始前和动画结束后，动画对layer都没有影响，动画结束后，layer会恢复到之前的状态。
kCAFillModeForwards 当动画结束后，layer会一直保持着动画最后的状态。
kCAFillModeBackwards 这个和 kCAFillModeForwards 是相对的，就是在动画开始前，你只要将动画加入了一个layer，layer便立即进入动画的初始状态并等待动画开始。你可以这样设定测试代码，将一个动画加入一个layer的时候延迟5秒执行。然后就会发现在动画没有开始的时候，只要动画被加入了 layer , layer 便处于动画初始状态，动画结束后，layer 也会恢复到之前的状态。
kCAFillModeBoth 理解了上面两个，这个就很好理解了，这个其实就是上面两个的合成。动画加入后立即开始，layer便处于动画初始状态，动画结束后layer保持动画最后的状态。

什么是mask(蒙版)

CALayer有一个属性叫做mask，通常被称为蒙版图层，这个属性本身也是CALayer类型，有和其他图层一样的绘制和布局属性。它类似于一个子视图，相对于父图层（即拥有该属性的图层）布局，但是它却不是一个普通的子视图。不同于一般的subLayer，mask定义了父图层的可见区域，简单点说就是最终父视图显示的形态是父视图自身和它的属性mask的交集部分。

iOS 动画分享（关键帧动画和波浪动画）

 //mask 蒙版     CALayer *maskLayer = [CALayer layer];     [maskLayer setFrame:self.waveView.bounds];     maskLayer.contents = (id)[UIImage imageNamed:@"TwitterLogo_white"].CGImage;     self.waveView.layer.mask = maskLayer;

原理解释

解释一下，首先毫无疑问APP启动一开始显示 LaunchScreen 。接下来 LaunchScreen 消失了，即将进入 NavigationController 时，我们为其设置遮罩，并且把遮罩的位置约束在和 LaunchScreen 中星星同一个位置，这样看起来就好像星星一直停在原地。不过虽然星星的位置不动了，但是 LaunchScreen 一旦结束之后就会露出一个黑底(UIWindow)，立刻就露馅。解决方法也是简单粗暴，只要把 UIWindow 的背景色改成和 LaunchScreen 一样的颜色就行了。

实现步骤

第一步设置 mask（蒙版）和动画

CALayer *maskLayer = [CALayer layer];     [maskLayer setFrame:CGRectMake(0, 0, 200, 120)];     maskLayer.contents = (id)[UIImage imageNamed:@"111111"].CGImage;     navVC.view.layer.mask = maskLayer;     maskLayer.position = navVC.view.center;     CAKeyframeAnimation *transAnimation = [CAKeyframeAnimation animationWithKeyPath:@"bounds"];     transAnimation.duration = 1;     transAnimation.beginTime = CACurrentMediaTime() + 1;     CGRect firstBounds = navVC.view.layer.mask.bounds;     CGRect secondBounds = CGRectMake(0, 0, 400, 240);     CGRect finalBounds = CGRectMake(0, 0, 20000, 20000);      [transAnimation setValues:@[[NSValue valueWithCGRect:firstBounds],[NSValue valueWithCGRect:secondBounds],[NSValue valueWithCGRect:finalBounds]]];      transAnimation.keyTimes = @[@0,@0.5,@1];     transAnimation.timingFunctions = @[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];     transAnimation.removedOnCompletion = NO;     transAnimation.fillMode = kCAFillModeForwards;      [navVC.view.layer.mask addAnimation:transAnimation forKey:@"maskAnimation"];

第二步设置 NavigationController的view的形变动画

CAKeyframeAnimation *viewTransAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];      viewTransAnimation.duration = 0.6;     viewTransAnimation.keyTimes = @[@0,@0.5,@1];     viewTransAnimation.beginTime = CACurrentMediaTime() + 1.1;     [viewTransAnimation setValues:@[[NSValue valueWithCATransform3D:CATransform3DIdentity],[NSValue valueWithCATransform3D:CATransform3DScale(CATransform3DIdentity, 1.1, 1.1, 1)],[NSValue valueWithCATransform3D:CATransform3DIdentity]]];      [navVC.view.layer addAnimation:viewTransAnimation forKey:@"viewAnimation"];     navVC.view.layer.transform = CATransform3DIdentity;

然而，如果你现在运行以上的代码，你会发现仍有不足。因为 mask 一开始就存在，所以你可以在程序启动时就能透过 mask 看到后面的视图。而我们希望的是 mask 后面的内容是在 mask 扩大的过程中逐渐显示出来的，正如一开始效果视频中展示的那样。这里的 solution 就要善于「作弊」。我们要做的就是在 NavigationController.view 和 mask 之间再加一层背景色为白色的图层，让这个图层挡住背后的内容，同时这个图层在 mask 动画的同时做透明度渐变到 0 的动画。也就是第三步中实现的内容

第三步添加白色遮罩

UIView *whiteView = [[UIView alloc] initWithFrame:navVC.view.bounds];     [whiteView setBackgroundColor:[UIColor whiteColor]];     [navVC.view addSubview:whiteView];      [UIView animateWithDuration:0.1 delay:1.35 options:UIViewAnimationOptionCurveEaseInOut animations:^{         whiteView.alpha = 0;     } completion:^(BOOL finished) {         [whiteView removeFromSuperview];         navVC.view.layer.mask = nil;     }];

OK,打完收工

二.波浪动画

主要有以下两种效果

iOS 动画分享（关键帧动画和波浪动画）

需要知道的

什么是CADisplayLink

CADisplayLink是一个能让我们以和屏幕刷新率相同的频率将内容画到屏幕上的定时器。我们在应用中创建一个新的 CADisplayLink 对象，把它添加到一个runloop中，并给它提供一个 target 和selector 在屏幕刷新的时候调用。

一但 CADisplayLink 以特定的模式注册到runloop之后，每当屏幕需要刷新的时候，runloop就会调用CADisplayLink绑定的target上的selector，这时target可以读到 CADisplayLink 的每次调用的时间戳，用来准备下一帧显示需要的数据。例如一个视频应用使用时间戳来计算下一帧要显示的视频数据。在UI做动画的过程中，需要通过时间戳来计算UI对象在动画的下一帧要更新的大小等等。

frameInterval属性是可读可写的NSInteger型值，标识间隔多少帧调用一次selector 方法，默认值是1，即每帧都调用一次。如果每帧都调用一次的话，对于iOS设备来说那刷新频率就是60HZ也就是每秒60次，如果将 frameInterval 设为2 那么就会两帧调用一次，也就是变成了每秒刷新30次。

我们通过pause属性开控制CADisplayLink的运行。当我们想结束一个CADisplayLink的时候，应该调用-(void)invalidate

从runloop中删除并删除之前绑定的 target跟selector

另外CADisplayLink 不能被继承。

NSTimer和CADisplayLink有什么不同？

iOS设备的屏幕每秒会刷新60次，正常情况下CADisplayLink在屏幕每次刷新时都会调用，精确度非常高，并且CADisplayLink的使用场合相对专一，适合做UI的不停重绘，比如动画的连续绘制。

NSTimer的使用范围要广泛很多，可以做单次或者循环处理某个任务，精度相比CADisplayLink要低。

什么是CAShapeLayer

CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。你指定诸如颜色和线宽等属性，用CGPath来定义想要绘制的图形，最后CAShapeLayer就自动渲染出来了。当然，你也可以用Core Graphics直接向原始的CALyer的内容中绘制一个路径，相比直下，使用CAShapeLayer有以下一些优点：

渲染快速。CAShapeLayer使用了硬件加速，绘制同一图形会比用Core Graphics快很多。
高效使用内存。一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形，所以无论有多大，都不会占用太多的内存。
不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。你的图层路径不会像在使用Core Graphics的普通CALayer一样被剪裁掉。
不会出现像素化。当你给CAShapeLayer做3D变换时，它不像一个有寄宿图的普通图层一样变得像素化。

绘制波浪轮廓

背景知识

三角函数

常见的三角函数包括正弦函数、余弦函数和正切函数。

iOS 动画分享（关键帧动画和波浪动画）

正弦余弦函数图像

iOS 动画分享（关键帧动画和波浪动画）

正弦函数图像变换

y =Asin（ωx+φ）+ C

iOS 动画分享（关键帧动画和波浪动画）

在代码中

A 表示振幅，也就是使用这个变量来调整波浪的高度
ω表示周期，也就是使用这个变量来调整在屏幕内显示的波浪的数量
φ表示波浪横向的偏移，也就是使用这个变量来调整波浪的流动
C表示波浪纵向的位置，也就是使用这个变量来调整波浪在屏幕中竖直的位置。

通过上面的函数，我们就能计算出波浪曲线上任意位置的坐标点。通过UIBezierPath的函数addLineToPoint来把这些点连接起来，就构建了波浪形状的path。只要我们的设定相邻两点的间距够小，就能构建出平滑的正弦曲线，构建正弦波浪的代码如下：

-(void)setCurrentFirstWaveLayerPath {     //创建一个路径     UIBezierPath *path = [UIBezierPath new];     CGFloat y = self.currentK;     //将点移动到 x=0,y=currentK的位置     [path moveToPoint:CGPointMake(0, y)];     for (NSInteger x = 0.0f; x<=self.waterWaveWidth; x++) {         //正玄波浪公式         y = self.waveA * sin(self.waveW * x + self.offsetX)+self.currentK;         //将点连成线         [path addLineToPoint:CGPointMake(x, y)];     }     [path addLineToPoint:CGPointMake(self.waterWaveWidth, self.frame.size.height)];     [path addLineToPoint:CGPointMake(0, self.frame.size.height)];     self.firstWaveLayer.path = path.CGPath; }

让波浪曲线动起来

正弦或者余弦曲线上的点，不论角度如何，在y轴上的变化范围在它的波峰与波谷之间。拿单位正交直角坐标系来说，只要我们规律性的增加角度值，那么曲线上的点就会在[1, -1]之间变化，我们以曲线上x=0的点为例，角度的不断增加，会让它的y值规律性的来回变化：

iOS 动画分享（关键帧动画和波浪动画）

如若曲线上的点都能这样规律的变化，我们就能让波浪曲线浪起来。

要让曲线上所有的点都动起来，在这里我们使用CADisplayLink来不断刷新由UIBezierPath创建的形状，两次刷新之间曲线的变化通过增加初相来实现，代码如下：

//启动定时器     self.waveDisplaylink = [CADisplayLink displayLinkWithTarget:self selector:@selector(getCurrentWave:)]; //慢动作 //    self.waveDisplaylink.frameInterval = 10;     [self.waveDisplaylink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];  -(void)getCurrentWave:(CADisplayLink *)displayLink {     //实时的位移     self.offsetX += self.waveSpeed;     [self setCurrentFirstWaveLayerPath];     [self setCurrentSecondWaveLayerPath];  }

让波浪有规律的张闭

需要让波浪有规律的张闭需要修改一下上面的 getCurrentWave 方法：

-(void)getCurrentWave:(CADisplayLink *)displayLink {     //实时的位移     self.offsetX += self.waveSpeed;     double intPart;     //取得整数部分     modf(self.offsetX, &intPart);     NSLog(@"%lf",intPart);     //整数取余，5秒中张开一秒     if (fmod(intPart, 5) == 0) {         if (self.waveA = 5) {             //闭合速度             self.waveA -= 0.5;             self.currentK -= 0.5;         }     }     [self setCurrentFirstWaveLayerPath];     [self setCurrentSecondWaveLayerPath]; }

好的，打完收工

参考资料

动画黄金搭档:CADisplayLink & CAShapeLayer

《A GUIDE TO IOS ANIMATION》

正文到此结束