[关闭]
@zyl06 2017-02-11T09:23:54.000000Z 字数 15208 阅读 1604

CoreAnimation小结

iOS Animation

1 动画主体

在游戏中，动画的主体基本上是各种精灵 (Spirit)，如主人公、敌人、子弹等等。而在 iOS 系统中，各种动画的主体就是 UIView 和 CALayer

UIView : 是各种控件的基类，用于显示内容，也处理各种点击、手势操作。可以通过在 ViewController 的根 UIView 下嵌入各种 UIView 来形成一个场景树，也就是 APP 用户看到的一个页面。

CALayer : 和 UIView 的特征非常相似，是一个矩形方块，用于显示内容 (如图片、文本等)；也可以相互组合形成一颗场景树；一个很大的区别就是，CALayer 并不接受用户的交互，同时 UIView 包含一个 CALayer 的属性。

CALayer 在功能上是主要用于显示的，也提供了丰富的属性用于动画的执行，如背景颜色、3D 模型变换矩阵、位置、透明度等等。因此在 CoreAnimation 中，大部分的动画都是在 CALayer 上执行的。

一个 CALayer 分别拥有一个 modelLayer 和 一个 presentationLayer 属性，动画执行期间通过更新 presentationLayer 来显示动画效果，动画结束的时候通过 modelLayer 来显示动画的结果。

至于苹果官方为什么设计出 UIView 和 CALayer 2个看似有些类似的 class，可以参看 你给我解析清楚，都有了CALayer了，为什么还要UIView，该文讲述了CALayer和UIView各自的必要性以及苹果设计上考虑的周全性。

2 属性动画

2.1 CABasicAnimation

先直接来看一段示例代码

  2. CABasicAnimation *anim = [CABasicAnimation animation];
  3.     // 设置动画的类型为“位移动画”
  4.     anim.keyPath = @"position";
  5.     // 设置动画的执行时间为 10 秒
  6.     anim.duration = 10;
  7.     // 设置位移动画开始的起点绝对位置
  8.     anim.fromValue = [NSValue valueWithCGPoint:pointSrc];
  9.     // 设置位移动画结束的终点绝对位置
  10.     anim.toValue = [NSValue valueWithCGPoint:pointDes];
  12.     // 设置位移动画结束的终点相对起点的位置
  13.     //anim.byValue = [NSValue valueWithCGPoint:CGPointMake(10, 60)];
  15.     // 若为true，动画在结束的时候，会自动从CALayer上移除 anim 对象；
  16.     // 若为false，动画结束的时候需要程序猿手动调用 `removeAnimationForKey` 移除
  17.     //anim.removedOnCompletion = NO;
  19.     // 动画执行的回调对象
  20.     //anim.delegate = self;
  22.     // 动画重复执行的次数，若设置为 `HUGE_VALF` 可以认为是在无限循环
  23.     //anim.repeatCount = HUGE_VALF; //2;
  25.     // 在设置的时间内，动画重复执行，不能和 `repeatCount` 一起使用
  26.     //anim.repeatDuration = 25;
  28.     // 设置结束的时候，自动执行逆动画
  29.     //anim.autoreverses = YES;
  31.     // 设置动画开始时间，通过在 `CALayer` 当前时间上添加值，显示延迟或者提前启动动画
  32.     //anim.beginTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil] + 5;
  34.     // 设置动画的偏移时间
  35.     //anim.timeOffset = 5;
  37.     // 设置动画的执行速度，默认为 1
  38.     //anim.speed = speed;
  40.     // 设置动画执行的开始和结束，是否将 `presentationLayer` 的对应动画属性设置 `modelLayer`
  41.     // 可选值有kCAFillModeRemoved, kCAFillModeBackwards, kCAFillModeForwards, kCAFillModeBackwards (默认)
  42.     //anim.fillMode = kCAFillModeBoth;
  44.     // 设置动画执行的时间轴，通俗的讲就是设置动画执行的各个时间的速率
  45.     //anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
  46.     //anim.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.2 :0.2 :0.8 :0.8];
  48.     // 加动画对象添加给 `CALayer`，并开始执行动画
  49.     [self.button.layer addAnimation:anim forKey:nil];

这段实例代码涵盖了 CABasicAnimation 中可以设置的属性，注释中也给出了各个属性的意义

  1.     CGPoint point = self.sunImageView.layer.position;
  2.     CGPoint pointSrc = CGPointMake(point.x + 20, point.y);
  3.     CGPoint pointDes = CGPointMake(pointSrc.x + 120, pointSrc.y);
  5.     CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"position"];
  6.     anim.duration = 5;
  7.     anim.fromValue = [NSValue valueWithCGPoint:pointSrc];
  8.     anim.toValue = [NSValue valueWithCGPoint:pointDes];

image

  1.     anim.repeatCount = HUGE_VALF;
  2.     anim.autoreverses = true;

image

  1.     anim.beginTime=[self.button.layer 
  2.         convertTime:CACurrentMediaTime() fromLayer:nil] - 4;

image

  1.     // anim.beginTime=[self.button.layer convertTime:CACurrentMediaTime() fromLayer:nil] - 4;
  2.     anim.timeOffset = 4;

image

  1.     anim.speed = 2;

image

  1.     anim.speed = 2;
  2.     anim.beginTime=[self.button.layer
  3.         convertTime:CACurrentMediaTime() fromLayer:nil] - 1.5;

image

  1.     anim.speed = 2;
  2.     anim.timeOffset = 1.5;

image

  1.     anim.fillMode = kCAFillModeRemoved;
  2.     anim.beginTime=[self.button.layer convertTime:CACurrentMediaTime() fromLayer:nil] + 1.5;

image

  1.     anim.fillMode = kCAFillModeBackwards;
  2.     anim.beginTime=[self.button.layer convertTime:CACurrentMediaTime() fromLayer:nil] + 1.5;

image

  1.     anim.timingFunction = [CAMediaTimingFunction 
  2.         functionWithName:kCAMediaTimingFunctionEaseIn];

image

  1.     anim.timingFunction = [CAMediaTimingFunction 
  2.         functionWithControlPoints:0.5 :0.1 :0.5 :0.9];

image

说明：

  1. toValue 和 byValue 不应该同时设置；

  2. repeatCount 指动画完整执行的次数，repeatDuration 指定在一段时间内动画能重复执行，如 duration 为 5，repeatCount 为 2，则等价于 repeatDuration 为 10；

  3. repeatCount 和 repeatDuration 不应该同时设置；

  4. 设置 beginTime 不为0，会延长或者缩短动画执行时间，但设置 timeOffset 会偏移的动画执行，但并不影响总的动画执行时间；

  5. speed 参数能加快或者减慢动画执行速度，会影响 duration 的表现值；如 示例 5 中，duration=5; speed = 2; 则动画真正的执行时间为 2.5 秒；

  6. 见示例 6， speed 和 beginTime 一起使用，beginTime 设置提前 1.5 秒，这里的 1.5 秒是相对动画动画真正的执行时间为 2.5 秒而言，而不是 duration 参数指定的 5 秒；

  7. 见示例 7， speed 和 timeOffset 一起使用，timeOffset 设置提前 1.5 秒，这里的 1.5 秒是相对 duration 参数指定的 5 秒，而不是动画真正的执行时间为 2.5 秒而言；

  8. 见示例 8， fillMode 的默认值为 kCAFillModeRemoved，在动画开始之前等待时间内，动画主体在原位置等待；当值为 kCAFillModeBackwards，动画主体在起点位置等待；当值为 kCAFillModeForwards，动画主体在终点位置等待；kCAFillModeBoth 动画主体分别在起点和终点位置等待

  9. 见示例 9， timingFunction 的默认值为 kCAMediaTimingFunctionLinear，为动画匀速执行；其他可选值有：kCAMediaTimingFunctionEaseIn (先慢后快), kCAMediaTimingFunctionEaseOut (先快后慢), kCAMediaTimingFunctionEaseInEaseOut (先慢后快再慢), kCAMediaTimingFunctionDefault (先慢后快); 也可以使用设置 3 次 4 控制点贝塞尔曲线的中间 2 个控制点位置设置

2.2 Transaction动画

2.2.1 显式Transaction动画
  1. [CATransaction begin];
  2. [CATransaction setAnimationDuration:2.0];
  4. [CATransaction setAnimationTimingFunction:
  5.     [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault]];
  7. // 动画执行结束时调用
  8. [CATransaction setCompletionBlock:^{
  9.     [CATransaction begin];
  10.     [CATransaction setAnimationDuration:5.0];
  12.     // 动画结束的时候，修改属性 2
  14.     [CATransaction commit];
  15. }];
  17. // 修改属性 1
  19. [CATransaction commit];
  1. self.actionLayerView.layer.backgroundColor = [UIColor colorWithRed:1.0
  2.                                                       green:0.0
  3.                                                        blue:0.0
  4.                                                       alpha:1.0].CGColor;
  1. self.actionLayerView.layer.backgroundColor = [UIColor colorWithRed:0.0
  2.                                                              green:1.0
  3.                                                               blue:0.0
  4.                                                              alpha:1.0].CGColor;

image

2.2.2 隐式Transaction动画
  1. CGFloat red = arc4random() / (CGFloat)INT_MAX;
  2. CGFloat green = arc4random() / (CGFloat)INT_MAX;
  3. CGFloat blue = arc4random() / (CGFloat)INT_MAX;
  5. self.actionLayerView.layer.backgroundColor = [UIColor colorWithRed:red
  6.                                                              green:green
  7.                                                               blue:blue
  8.                                                              alpha:1.0].CGColor;

image

说明：

  1. 直接对 UIView 内置 CALayer 进行设置背景颜色，其他并没有设置，但也能看到一个较快的动画效果，这个就是隐式动画。
  2. 这里执行的动画效果是默认的动画效果，那如何能自定义隐式动画效果呢？

我们定义 CALayer 中的显示属性发生改变时所执行的动画为 actions，而系统中获取 action 的顺序如下：

  1. 当 CALayer 设置了 delegate 属性，并且 delegate 中实现了 CALayerDelegate 中的 -actionForLayer:forKey，则通过调用该方法得到 action 值。

  2. 若并没有设置 delegate 属性或者 CALayerDelegate 中并没有定义 -actionForLayer:forKey，则检查 CALayer 的 actions 字典属性，获取 action 值。

  3. 若 actions 并未定义，则检查 CALayer 的 style 属性。

  4. 若 style 属性并未定义，则 通过 + (id)defaultValueForKey:(NSString *)key 获取 action 值。

由上可知，上面代码的执行正是通过 + (id)defaultValueForKey:(NSString *)key 获取的 action 值。

  1. - (void)viewDidLoad
  2. {
  3.     [super viewDidLoad];
  5.     CABasicAnimation *anim = [CABasicAnimation 
  6.         animationWithKeyPath:@"backgroundColor"];
  7.     anim.duration = 5;
  9.     self.actionLayerView.layer.actions = @{@"backgroundColor":anim};
  10. }

属性修改代码同 示例11

image

3 计时器控制动画

NSTimer 和 CADisplayLink 都能开启计时器，并在每次计时器的回调中设置显示属性

  1. - (void)viewDidLoad
  2. {
  3.     [super viewDidLoad];
  5.     //adjust anchor points
  6.     self.secondHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f);
  7.     self.minuteHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f);
  8.     self.hourHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f);
  10.     //start timer
  11.     self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0
  12.                                                   target:self
  13.                                                 selector:@selector(tick)
  14.                                                 userInfo:nil
  15.                                                  repeats:YES];
  17.     //set initial hand positions
  18.     [self tick];
  19. }
  21. - (void)tick
  22. {
  23.     //convert time to hours, minutes and seconds
  24.     NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSGregorianCalendar];
  25.     NSUInteger units = NSHourCalendarUnit | NSMinuteCalendarUnit | NSSecondCalendarUnit;
  26.     NSDateComponents *components = [calendar components:units fromDate:[NSDate date]];
  28.     //calculate hour hand angle
  29.     CGFloat hourAngle = (components.hour / 12.0) * M_PI * 2.0;
  31.     //calculate minute hand angle
  32.     CGFloat minuteAngle = (components.minute / 60.0) * M_PI * 2.0;
  34.     //calculate second hand angle
  35.     CGFloat secondAngle = (components.second / 60.0) * M_PI * 2.0;
  37.     //rotate hands
  38.     self.hourHand.transform = CGAffineTransformMakeRotation(hourAngle);
  39.     self.minuteHand.transform = CGAffineTransformMakeRotation(minuteAngle);
  40.     self.secondHand.transform = CGAffineTransformMakeRotation(secondAngle);
  41. }

image

  1. - (void)animate
  2. {
  3.     //reset ball to top of screen
  4.     self.ballView.center = CGPointMake(150, 32);
  6.     //configure the animation
  7.     self.duration = 1.0;
  8.     self.timeOffset = 0.0;
  9.     self.fromValue = [NSValue valueWithCGPoint:CGPointMake(150, 32)];
  10.     self.toValue = [NSValue valueWithCGPoint:CGPointMake(150, 268)];
  12.     //stop the timer if it's already running
  13.     [self.timer invalidate];
  15.     //start the timer
  16.     self.lastStep = CACurrentMediaTime();
  17.     self.timer = [CADisplayLink displayLinkWithTarget:self
  18.                                              selector:@selector(step:)];
  19.     //self.timer.frameInterval = 2;
  20.     [self.timer addToRunLoop:[NSRunLoop mainRunLoop]
  21.                      forMode:NSDefaultRunLoopMode];
  22. }
  24. - (void)step:(CADisplayLink *)timer
  25. {
  26.     //calculate time delta
  27.     CFTimeInterval thisStep = CACurrentMediaTime();
  28.     CFTimeInterval stepDuration = thisStep - self.lastStep;
  29.     self.lastStep = thisStep;
  31.     // 计算时间偏移
  32.     self.timeOffset = MIN(self.timeOffset + stepDuration, self.duration);
  34.     // 单位化time值
  35.     float time = self.timeOffset / self.duration;
  37.     // 重新计算time，球到起点的距离和行程的比值
  38.     time = bounceEaseOut(time);
  40.     // 通过差值计算新的位置
  41.     id position = [self interpolateFromValue:self.fromValue
  42.                                      toValue:self.toValue
  43.                                         time:time];
  45.     // 设置球的新位置
  46.     self.ballView.center = [position CGPointValue];
  48.     // 当动画时间到的时候，停止计时器
  49.     if (self.timeOffset >= self.duration)
  50.     {
  51.         [self.timer invalidate];
  52.         self.timer = nil;
  53.     }
  54. }

image

可以发现，使用 NSTimer 和 CADisplayLink 都能实现相同的效果，并且编写的代码差别并不大。那么，二者之间有哪些差别呢？

  1. NSTimer 初始化器接受调用方法逻辑之间的间隔作为它的其中一个参数，预设一秒执行 30 次; CADisplayLink 是一个能让我们以和屏幕刷新率相同的频率将内容画到屏幕上的定时器 ( 60 /秒)。

  2. NSTimer 设置 timeInterval － 时间间隔; CADisplayLink通过 frameInterval 来设置几帧调用一次函数。

  3. NSTimer 一旦初始化它就开始运行; CADisplayLink 需要将显示链接添加到一个运行循环中。

  4. NSTimer 的精度低，NSTimer 的触发时间到的时候，runloop 如果在阻塞状态，触发时间就会推迟到下一个 runloop 周期。并且 NSTimer 新增了 tolerance 属性，让用户可以设置可以容忍的触发的时间的延迟范围; CADisplayLink 的精度高, CADisplayLink 在正常情况下会在每次刷新结束都被调用。于是我们不需要在格外关心屏幕的刷新频率了，因为它本身就是跟屏幕刷新同步的。

  5. NSTimer 和 CADisplayLink 都能 add 进 run loop。都能设置优先级。

  6. NSTimer 使用范围要广泛的多，各种需要单次或者循环定时处理的任务都可以使用; CADisplayLink 的使用范围相对单一些，适合做 UI 的不停重绘，比如自定义动画引擎或者视频播放的渲染。

另外使用 CADisplayLink 添加至 run loop 的优先级有：

  1. NSDefaultRunLoopMode — 标准优先级

  2. NSRunLoopCommonModes — 优先级高于NSDefaultRunLoopMode

  3. UITrackingRunLoopMode — 用在UIScrollView和其他控件的动画

3.3 计时器动画的优缺点

可以控制动画的每一帧内容，动画过程可以比较灵活，也可以在动画执行过程中可以交互控制动画

需要设计函数计算每一帧内容，动画过程中各个逻辑都需要用户编写

4 串行动画

因为 core animation 中并没有专门的类来定义串行动画 (至少我前面看的时候，还没发现)，所以就根据自己的粗浅理解，如何来实现串行动画

  1. 在animationDidStop:(CAAnimation*)anim finished:(BOOL)flag中触发下一个动画
  1.  在[UIView animateWithDuration:<#(NSTimeInterval)#>
  2.                  animations:<#^(void)animations#>
  3.              completion:<#^(BOOL finished)completion#>]
  4.    中的completion函数中触发下一个动画

5 并行动画

方式一 CAAnimationGroup

  1. CAAnimationGroup *groupAnimation = [CAAnimationGroup animation]; 
  2. groupAnimation.animations = @[animation1, animation2];
  3. [colorLayer addAnimation:groupAnimation forKey:nil];

其中 animation1 和 animation2 分别为位移动画和背景颜色动画

  1. //create the position animation
  2. CAKeyframeAnimation *animation1 = [CAKeyframeAnimation animation];
  3. animation1.keyPath = @"position";
  4. animation1.path = bezierPath.CGPath;
  5. animation1.rotationMode = kCAAnimationRotateAuto;
  7. //create the color animation
  8. CABasicAnimation *animation2 = [CABasicAnimation animation];
  9. animation2.keyPath = @"backgroundColor";
  10. animation2.toValue = (__bridge id)[UIColor redColor].CGColor;

注意：groupAnimation中的speed，duration的优先级低于animation1和animation2中的speed，duration

image

方式二 在同一个layer中添加多于一个的animation

  1. //create the position animation
  2. CAKeyframeAnimation *animation1 = [CAKeyframeAnimation animation];
  3. animation1.keyPath = @"position";
  4. animation1.path = bezierPath.CGPath;
  5. animation1.rotationMode = kCAAnimationRotateAuto;
  7. //create the color animation
  8. CABasicAnimation *animation2 = [CABasicAnimation animation];
  9. animation2.keyPath = @"backgroundColor";
  10. animation2.toValue = (__bridge id)[UIColor redColor].CGColor;
  12. [colorLayer addAnimation:animation1 forKey:nil];
  13. [colorLayer addAnimation:animation2 forKey:nil];

animation1和animation2中的speed或duration并不相互干涉

image

方式三

  1. 在 [UIView animateWithDuration:<#(NSTimeInterval)#>
  2.                  animations:<#^(void)animations#>
  3.              completion:<#^(BOOL finished)completion#>]
  4. 中的animations函数里面添加多个的目标属性

执行结果

image

6 帧动画

方式一 计时器控制帧动画

在计时器的响应函数中不断改变ImageView的 image 属性

  1. -(void)timerHandler:(NSTimer *)timer
  2. {
  3.     if (playIndex>[self.frames count]-1) {
  4.         playIndex=0;
  5.     }
  7.     self.image=[self.frames objectAtIndex:playIndex];
  8.     playIndex++;
  9. }

执行结果

image

方式二

  1. catImageView.animationImages = [NSArray arrayWithObjects:
  2.                     [UIImage imageNamed:@"cat_stand_0.png"],
  3.                     [UIImage imageNamed:@"cat_stand_2.png"],nil];
  4. [catImageView setAnimationDuration:1.0f];
  5. [catImageView setAnimationRepeatCount:HUGE_VALF];
  6. [catImageView startAnimating];

执行结果

image

6 Transition动画

方式一

  1. // 新建左移进入的 Transition 动画对象
  2. CATransition *transition = [CATransition animation];
  3. transition.type = kCATransitionMoveIn;
  4. transition.subtype = kCATransitionFromLeft;
  6. // 为 ImageView 的内置 CALayer 添加 Transition 动画
  7. [self.imageView.layer addAnimation:transition forKey:nil];
  9. // 修改图片
  10. UIImage *currentImage = self.imageView.image;
  11. NSUInteger index = [self.images indexOfObject:currentImage];
  12. index = (index + 1) % [self.images count];
  13. self.imageView.image = self.images[index];

执行结果

image

方式二

  1. [UIView transitionWithView:self.layerView
  2.                       duration:2
  3.                        options:UIViewAnimationOptionTransitionCurlDown
  4.                     animations:^{
  5.                         CGFloat red = arc4random() / (CGFloat)INT_MAX;
  6.                         CGFloat green = arc4random() / (CGFloat)INT_MAX;
  7.                         CGFloat blue = arc4random() / (CGFloat)INT_MAX;
  8.                         self.colorLayer.backgroundColor = [UIColor colorWithRed:red
  9.                                                                           green:green
  10.                                                                            blue:blue
  11.                                                                           alpha:1.0].CGColor;
  12.                     } completion:^(BOOL finished) {
  13.                          // 在动画结束时，执行逻辑
  14.                     }];

执行结果

image

说明
options 属性 : 其他可选值有 UIViewAnimationOptionTransitionNone (default), UIViewAnimationOptionTransitionFlipFromLeft, UIViewAnimationOptionTransitionFlipFromRight, UIViewAnimationOptionTransitionCurlUp, UIViewAnimationOptionTransitionCurlDown, UIViewAnimationOptionTransitionCrossDissolve, UIViewAnimationOptionTransitionFlipFromTop, UIViewAnimationOptionTransitionFlipFromBottom;

感兴趣的同学可以自行去尝试查看效果

方式三

  1. - (void)viewDidLoad
  2. {
  3.     [super viewDidLoad];
  5.     //create sublayer
  6.     self.colorLayer = [CALayer layer];
  7.     self.colorLayer.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);
  8.     self.colorLayer.backgroundColor = [UIColor blueColor].CGColor;
  10.     //add a custom action
  11.     CATransition *transition = [CATransition animation];
  12.     transition.type = kCATransitionPush;
  13.     transition.subtype = kCATransitionFromLeft;
  14.     transition.duration = 1;
  15.     //transition.repeatCount = 2;
  16.     //transition.repeatDuration = 2;
  17.     //transition.beginTime
  18.     //transition.timeOffset
  19.     //transition.timingFunction
  20.     //transition.autoreverses = YES;
  21.     //transition.removedOnCompletion = NO;   //invalid
  22.     //transition.fillMode = kCAFillModeBoth; //invalid
  23.     //transition.speed = 2;
  25.     self.colorLayer.actions = @{@"backgroundColor": transition};
  27.     //add it to our view
  28.     [self.layerView.layer addSublayer:self.colorLayer];
  29. }
  31. - (IBAction)changeColor
  32. {
  33.     //randomize the layer background color
  34.     CGFloat red = arc4random() / (CGFloat)INT_MAX;
  35.     CGFloat green = arc4random() / (CGFloat)INT_MAX;
  36.     CGFloat blue = arc4random() / (CGFloat)INT_MAX;
  37.     self.colorLayer.backgroundColor = [UIColor colorWithRed:red
  38.                                                       green:green
  39.                                                        blue:blue
  40.                                                       alpha:1.0].CGColor;
  41. }

执行结果

type = kCATransitionPush

image

type = kCATransitionFade

image

type = kCATransitionMoveIn

image

type = kCATransitionReveal

image

其他属性前面在属性动画中已经讲述过，这边就不再赘述

7 粒子动画

在 Core Animation 中通过 CAEmitterLayer 和 CAEmitterCell 来实现粒子动画

其中 CAEmitterLayer 是 CALayer 的子类，是一个拥有高性能的例子系统的显示容器。通过定义不同类型的 CAEmitterCell 实例，并添加至 CAEmitterLayer 来显示如火焰、雪花等等的粒子效果

  1. - (void) viewDidLoad
  2. {
  3.     [super viewDidLoad];
  5.     CGRect viewBounds = self.view.layer.bounds;
  7.     // 创建 emitter layer
  8.     self.fireEmitter    = [CAEmitterLayer layer];
  10.     // 设置粒子发射器的位置
  11.     self.fireEmitter.emitterPosition = CGPointMake(viewBounds.size.width/2.0, viewBounds.size.height - 60);
  12.     // 设置粒子发射器的尺寸
  13.     self.fireEmitter.emitterSize    = CGSizeMake(45, 0);
  14.     // 设置粒子从粒子发射器的形状外围生成
  15.     self.fireEmitter.emitterMode    = kCAEmitterLayerOutline;
  16.     // 设置粒子发射器的形状为直线
  17.     self.fireEmitter.emitterShape   = kCAEmitterLayerLine;
  18.     // 使用 `kCAEmitterLayerAdditive` 参数，使粒子重叠部分增加亮度，创建火焰中心“亮”的效果
  19.     self.fireEmitter.renderMode     = kCAEmitterLayerAdditive;
  21.     // 创建粒子发射单元
  22.     CAEmitterCell* fire = [CAEmitterCell emitterCell];
  23.     [fire setName:@"fire"];
  25.     // 设置粒子创建的速度
  26.     fire.birthRate          = 450;
  27.     // 设置粒子的发射方向 (经度值)
  28.     fire.emissionLongitude  = M_PI;
  29.     // 设置粒子发射方向的(纬度值)
  30.     //fire.emissionLatitude   = M_PI;
  31.     // 设置粒子发射的初始速度
  32.     fire.velocity           = -80;
  33.     // 设置粒子发射的初始速度范围
  34.     fire.velocityRange      = 30;
  35.     // 设置粒子发射的方向角度范围
  36.     fire.emissionRange      = 1.1;
  37.     // 设置粒子发射后的 y 方向的加速度，火苗越向上越快
  38.     fire.yAcceleration      = -200;
  39.     // 设置粒子发射后的尺寸变化速度，火苗越来越小
  40.     fire.scaleSpeed         = 0.3;
  41.     // 设置粒子发射后的生命周期处置
  42.     fire.lifetime           = 0.9;
  43.     // 设置粒子发射后的生命周期范围
  44.     fire.lifetimeRange      = 0.35;
  46.     fire.color = [[UIColor colorWithRed:0.8 green:0.4 blue:0.2 alpha:0.1] CGColor];
  47.     // 设置粒子的内容图片
  48.     fire.contents = (id) [[UIImage imageNamed:@"DazFire"] CGImage];
  50.     // 将粒子发射器添加至 `CAEmitterLayer`
  51.     self.fireEmitter.emitterCells   = [NSArray arrayWithObject:fire];
  52.     // `CAEmitterLayer` 添加至场景树中
  53.     [self.view.layer addSublayer:self.fireEmitter];
  54. }

执行结果

image

8 总结

大概简单的总结了下 Core Animation 中定义的常用动画，当然还是有些属性和细节等还未介绍，感兴趣的 iOS 同学可以深入去了解下；

除此之外，还有其他的，如使用二维物理引擎实现的物理动画，使用 CAEAGLLayer 显示的OpenGL三位动画等，这里并没有介绍，以后可能会介绍吧O(∩_∩)O~

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注