动画(Animation) 、 高级动画(Core Animation)

1 演示UIImage制作的动画

1.1 问题

UIImage动画是IOS提供的最基本的动画，通常用于制作一些小型的动画，本案例使用UIImage制作一个小狗跑动的动画，如图-1所示：

图-1

1.2 方案

首先在创建好的Xcode项目的Storyboard中拖放一个ImageView控件，并关联成TRViewController的属性imageView。

然后在viewDidLoad方法中使用工厂方法animatedImageNamed:创建UIImage对象image。

最后将imageView的image属性设置为刚才创建的image对象即可。

1.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：拖放ImageView控件

首先在创建好的Xcode项目的Storyboard中拖放一个ImageView控件，并关联成TRViewController的属性imageView，代码如下所示：

1. @interface TRViewController ()
2. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
3. @end

步骤二：使用UIImage生成动画

首先导入图片素材，图片的命名规则是按顺序命名，即每张图片的名称前半部分一样后半部分是序号，例如：0_0_run_00、0_0_run_01、0_0_run_02……

然后在viewDidLoad方法中使用工厂方法animatedImageNamed:创建UIImage对象image，这里需要注意的是imageNamed参数，传入的是图片名称不带序号的部分。

最后将imageView的image属性设置为刚才创建的image对象，代码如下所示：

 

1. - (void)viewDidLoad
2. {
3. [super viewDidLoad];
4. UIImage *image = [UIImage animatedImageNamed:@"0_0_run_" duration:2];
5. self.imageView.image = image;
6. }

1.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

 

1. #import "TRViewController.h"
3. @interface TRViewController ()
4. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
5. @end
7. @implementation TRViewController
8. - (void)viewDidLoad
9. {
10. [super viewDidLoad];
11. UIImage *image = [UIImage animatedImageNamed:@"0_0_run_" duration:2];
12. self.imageView.image = image;
13. }
14. @end

2 使用NSTimer做一个图片淡入的效果

2.1 问题

NSTimer是一个计时器类，用于定时向指定对象发送消息，本案例使用NSTimer制作一个图片淡入的效果，即每隔一定的时间改变图片的alpha值，如图-2所示：

图-2

2.2 方案

首先在创建好的Xcode项目的Storyboard中拖放一个和屏幕一样大小的ImageView控件，并将ImageView设置为TRViewController的属性imageView。

然后在viewDidLoad方法中创建一个计时器，每隔1/30秒重复调用方法changeAlpha:。

最后实现方法changeAlpha:，每次调用都改变imageView的alpha值。

2.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：拖放ImageView控件

首先在创建好的Xcode项目的Storyboard中拖放一个和屏幕一样大小的ImageView控件，在右边栏的检查器中给ImageView设置image，并将ImageView设置为TRViewController的属性imageView，代码如下所示：

 

1. @interface TRViewController ()
2. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
3. @end

步骤二：创建计时器

在viewDidLoad方法中创建一个计时器，每隔1/30秒重复调用方法changeAlpha:，代码如下所示：

1. - (void)viewDidLoad
2. {
3. [super viewDidLoad];
4.     [NSTimer scheduledTimerWithTimeInterval:1/FPS target:self selector:@selector(changeAlpha:) userInfo:nil repeats:YES];
5. }

步骤三：实现changeAlpha:方法

首先定义两个宏FPS用来表示帧率，DURATION用来表示动画时长，在changeAlpha:方法中根据FPS和DURATION计算imageView的alpha值，代码如下所示：

 

1. #define FPS 30.0 //帧率
2. #define DURATION 5.0 //动画时长
3. //当前值＝开始值+当前的帧数*(结束值-开始值)/(帧率*时长)
4. - (void)changeAlpha:(NSTimer *)timer
5. {
6. static NSUInteger count = 0;
7. count++;
8. self.imageView.alpha = count * 1.0/(FPS * DURATION);
9. if (count >= FPS * DURATION) {
10. [timer invalidate];
11. }
12. }

2.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

 

1. #import "TRViewController.h"
3. @interface TRViewController ()
4. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
5. @end
7. @implementation TRViewController
8. #define FPS 30.0 //帧率
9. #define DURATION 5.0 //动画时长
10. - (void)viewDidLoad
11. {
12. [super viewDidLoad];
13.     [NSTimer scheduledTimerWithTimeInterval:1/FPS target:self selector:@selector(changeAlpha:) userInfo:nil repeats:YES];
14. }
15. //当前值＝开始值+当前的帧数*(结束值-开始值)/(帧率*时长)
16. - (void)changeAlpha:(NSTimer *)timer
17. {
18. static NSUInteger count = 0;
19. count++;
20. self.imageView.alpha = count * 1.0/(FPS * DURATION);
21. if (count >= FPS * DURATION) {
22. [timer invalidate];
23. }
24. }
25. @end

3 使用UIView制作动画

3.1 问题

UIView动画是UIKit提供专门制作动画的API，其本质是对CoreAnimation的封装，使用UIView可以轻松方便的实现动画，不需要经过任何计算，本案例使用UIView制作一个飞机移动的动画，如图-3所示：

图-3

3.2 方案

首先在创建好的Xcode项目的Storyboard中拖放一个ImageView控件和一个Label控件，在右边栏的检查器中分别设置ImageView和Label的显示图片和文字，ImageView显示飞机图片，Label显示文字“Welcome To iGame“，并将ImageView和Label关联成TRViewController的属性aircraft和welcomeLabel。

然后在Storyboard中拖放一个Button对象，设置标题为Start，并关联成TRViewController的方法start：。

最后在viewDidLoad方法中使用UIView的动画方法实现aircraft和welcomeLabel的入场动画，并在方法start：中使用UIView的动画方法实现飞机的飞行动画。

3.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：搭建界面

首先在创建好的Xcode项目的Storyboard中拖放一个ImageView控件和一个Label控件，在右边栏的检查器中分别设置ImageView和Label的显示图片和文字，ImageView显示飞机图片，Label显示文字“Welcome To iGame“。

其次将ImageView和Label关联成TRViewController的属性aircraft和welcomeLabel，代码如下所示：

1. @interface TRViewController ()
2. @property (weak, nonatomic) IBOutlet UILabel *welcomeLabel;
3. @property (weak, nonatomic) IBOutlet UIImageView *aircraft;
4. @end

然后在Storyboard中拖放一个Button对象，设置标题为Start，并关联成TRViewController的方法start：。

最后Storyboard中完成的界面如图-4所示：

图-4

步骤二：使用UIView实现动画

首先在viewDidLoad方法中使用UIView的动画方法实现welcomeLabel的入场动画，welcomeLabel从屏幕的左方进入屏幕，使用UIView的动画方法animateWithDuration: delay: usingSpringWithDamping: initialSpringVelocity: options:增加弹簧效果，代码如下所示：

 

1. - (void)viewDidAppear:(BOOL)animated
2. {
3. [super viewDidAppear:animated];
4. //结束位置
5.     CGRect endFrame = self.welcomeLabel.frame;
6. //开始位置
7. CGRect startFrame = endFrame;
8. startFrame.origin.x = - startFrame.size.width;
9. //welcome的入场动画
10. self.welcomeLabel.frame = startFrame;
11. self.welcomeLabel.alpha = 0.1;
12. [UIView animateWithDuration:5.0 delay:0.3 usingSpringWithDamping:0.1 initialSpringVelocity:5 options:UIViewAnimationOptionCurveEaseInOut animations:^{
13. self.welcomeLabel.frame = endFrame;
14. self.welcomeLabel.alpha = 1.0;
15. } completion:^(BOOL finished) {
16. NSLog(@"动画结束");
17. }];
18. }

然后实现飞机的入场动画，飞机从屏幕的下方飞入屏幕，代码如下所示：

 

1. - (void)viewDidAppear:(BOOL)animated
2. {
3. [super viewDidAppear:animated];
4. //结束位置
5.     CGRect endFrame = self.welcomeLabel.frame;
6. //开始位置
7. CGRect startFrame = endFrame;
8. startFrame.origin.x = - startFrame.size.width;
9. //welcome的入场动画
10. self.welcomeLabel.frame = startFrame;
11. self.welcomeLabel.alpha = 0.1;
12. [UIView animateWithDuration:5.0 delay:0.3 usingSpringWithDamping:0.1 initialSpringVelocity:5 options:UIViewAnimationOptionCurveEaseInOut animations:^{
13. self.welcomeLabel.frame = endFrame;
14. self.welcomeLabel.alpha = 1.0;
15. } completion:^(BOOL finished) {
16. NSLog(@"动画结束");
17. }];
18. //飞机的入场动画
19. endFrame = self.aircraft.frame;
20. startFrame = endFrame;
21. startFrame.origin.y = self.view.bounds.size.height;
22. self.aircraft.frame = startFrame;
23. [UIView animateWithDuration:2.0 animations:^{
24. self.aircraft.frame = endFrame;
25. }];
26. }

最后实现方法start：完成飞机的飞行动画，飞机从屏幕下方飞到屏幕上方，并且在动画结束之后反复在屏幕中飞行，代码如下所示：

 

1. - (IBAction)start:(UIButton *)sender
2. {
3. CGPoint point = self.aircraft.center;
4. point.y = 80;
5. [UIView animateWithDuration:3.0 delay:1.0 options:UIViewAnimationOptionCurveEaseInOut|UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse animations:^{
6. self.aircraft.center = point;
7. } completion:^(BOOL finished) {
8. NSLog(@"动画结束");
9. }];
10. }

3.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

 

1. #import "TRViewController.h"
3. @interface TRViewController ()
4. @property (weak, nonatomic) IBOutlet UILabel *welcomeLabel;
5. @property (weak, nonatomic) IBOutlet UIImageView *aircraft;
6. @end
8. @implementation TRViewController
9. - (void)viewDidAppear:(BOOL)animated
10. {
11. [super viewDidAppear:animated];
12. //结束位置
13.     CGRect endFrame = self.welcomeLabel.frame;
14. //开始位置
15. CGRect startFrame = endFrame;
16. startFrame.origin.x = - startFrame.size.width;
17. //welcome的入场动画
18. self.welcomeLabel.frame = startFrame;
19. self.welcomeLabel.alpha = 0.1;
20. [UIView animateWithDuration:5.0 delay:0.3 usingSpringWithDamping:0.1 initialSpringVelocity:5 options:UIViewAnimationOptionCurveEaseInOut animations:^{
21. self.welcomeLabel.frame = endFrame;
22. self.welcomeLabel.alpha = 1.0;
23. } completion:^(BOOL finished) {
24. NSLog(@"动画结束");
25. }];
26. //飞机的入场动画
27. endFrame = self.aircraft.frame;
28. startFrame = endFrame;
29. startFrame.origin.y = self.view.bounds.size.height;
30. self.aircraft.frame = startFrame;
31. [UIView animateWithDuration:2.0 animations:^{
32. self.aircraft.frame = endFrame;
33. }];
34. }
36. - (IBAction)start:(UIButton *)sender
37. {
38. CGPoint point = self.aircraft.center;
39. point.y = 80;
40. [UIView animateWithDuration:3.0 delay:1.0 options:UIViewAnimationOptionCurveEaseInOut|UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse animations:^{
41. self.aircraft.center = point;
42. } completion:^(BOOL finished) {
43. NSLog(@"动画结束");
44. }];
45. }
46. @end

4 CALayer的简单应用

4.1 问题

任何UIView及子类对象都有一个属性叫layer，此属性就是UIView的CoreAnimation层，类型是CALayer，本案例演示CALayer如何使用，如图-5所示：

图-5

4.2 方案

首先在创建好的Xcode项目的Storyboard中拖放一个ImageView控件，在右边栏的检查器中设置ImageView的显示图片，并将ImageView和Label关联成TRViewController的属性imageView。

然后在viewDidLoad方法中设置self.view的layer的背景颜色和圆角。再设置imageView的layer属性，将layer设置完圆角之后要将遮罩打开。

最后在viewDidLoad方法中分别给self.view.layer添加一个无图片的子层和有图片的子层。

4.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：搭建Storyboard界面

首先在创建好的Xcode项目的Storyboard中拖放一个ImageView控件，在右边栏的检查器中设置ImageView的显示图片，并将ImageView和Label关联成TRViewController的属性imageView，代码如下所示：

1. @interface TRViewController ()
2. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
3. @end

步骤二：设置layer属性

首先在viewDidLoad方法中设置self.view的layer的背景颜色和圆角，代码如下所示：

1. - (void)viewDidLoad
2. {
3. [super viewDidLoad];
4. //设置view的layer
5.     CALayer *layer = self.view.layer;
6. layer.backgroundColor = [[UIColor orangeColor] CGColor];
7. layer.cornerRadius = 30.0;
8. }

运行程序发现背景变成圆角的，如图-6所示：

图-6

其次再设置imageView的layer属性，将layer设置完圆角之后要将遮罩打开，代码如下所示：

 

1. - (void)viewDidLoad
2. {
3. [super viewDidLoad];
4. //设置view的layer
5.     CALayer *layer = self.view.layer;
6. layer.backgroundColor = [[UIColor orangeColor] CGColor];
7. layer.cornerRadius = 30.0;
8. //将imageView设置成圆角
9. self.imageView.layer.cornerRadius = 10.0;
10. //打开遮罩，否则无效
11. self.imageView.layer.masksToBounds =YES;
12. }

然后在viewDidLoad方法中给self.view.layer添加一个无图片的子层，代码如下所示：

 

1. - (void)viewDidLoad
2. {
3. [super viewDidLoad];
4. //设置view的layer
5.     CALayer *layer = self.view.layer;
6. layer.backgroundColor = [[UIColor orangeColor] CGColor];
7. layer.cornerRadius = 30.0;
8. //将imageView设置成圆角
9. self.imageView.layer.cornerRadius = 10.0;
10. //打开遮罩，否则无效
11. self.imageView.layer.masksToBounds =YES;
13. //加子层
14. CALayer *subLayer = [CALayer layer];
15. subLayer.backgroundColor = [UIColor purpleColor].CGColor;
16. subLayer.frame = CGRectMake(30, 200, 100, 120);
17. //设置阴影
18. subLayer.shadowColor = [UIColor greenColor].CGColor;
19. subLayer.shadowOffset = CGSizeMake(2, 2);
20. subLayer.shadowRadius = 5.0;
21. subLayer.shadowOpacity = 0.8;
22. //设置圆角
23. subLayer.cornerRadius = 10.0;
24. [layer addSublayer:subLayer];
25. }

最后在viewDidLoad方法中给self.view.layer添加一个有图片的子层，代码如下所示：

 

1. - (void)viewDidLoad
2. {
3. [super viewDidLoad];
4. //设置view的layer
5.     CALayer *layer = self.view.layer;
6. layer.backgroundColor = [[UIColor orangeColor] CGColor];
7. layer.cornerRadius = 30.0;
8. //将imageView设置成圆角
9. self.imageView.layer.cornerRadius = 10.0;
10. //打开遮罩，否则无效
11. self.imageView.layer.masksToBounds =YES;
12. //加子层
13. CALayer *subLayer = [CALayer layer];
14. subLayer.backgroundColor = [UIColor purpleColor].CGColor;
15. subLayer.frame = CGRectMake(30, 200, 100, 120);
16. subLayer.shadowColor = [UIColor greenColor].CGColor;
17. subLayer.shadowOffset = CGSizeMake(2, 2);
18. subLayer.shadowRadius = 5.0;
19. subLayer.shadowOpacity = 0.8;
20. subLayer.cornerRadius = 10.0;
21. [layer addSublayer:subLayer];
22. //加有内容的子层
23. CALayer *imageLayer = [CALayer new];
24. imageLayer.frame = CGRectMake(180, 300, 100, 120);
25. //设置层的内容
26. imageLayer.contents = (id)[UIImage imageNamed:@"d.jpg"].CGImage;
27. imageLayer.cornerRadius = 10.0;
28. imageLayer.masksToBounds = YES;
29. [layer addSublayer:imageLayer];
30. }

4.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

 

1. #import "TRViewController.h"
3. @interface TRViewController ()
4. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
5. @end
7. @implementation TRViewController
9. - (void)viewDidLoad
10. {
11. [super viewDidLoad];
12. //设置view的layer
13.     CALayer *layer = self.view.layer;
14. layer.backgroundColor = [[UIColor orangeColor] CGColor];
15. layer.cornerRadius = 30.0;
16. //将imageView设置成圆角
17. self.imageView.layer.cornerRadius = 10.0;
18. //打开遮罩，否则无效
19. self.imageView.layer.masksToBounds =YES;
21. //加子层
22. CALayer *subLayer = [CALayer layer];
23. subLayer.backgroundColor = [UIColor purpleColor].CGColor;
24. subLayer.frame = CGRectMake(30, 200, 100, 120);
25. subLayer.shadowColor = [UIColor greenColor].CGColor;
26. subLayer.shadowOffset = CGSizeMake(2, 2);
27. subLayer.shadowRadius = 5.0;
28. subLayer.shadowOpacity = 0.8;
29. subLayer.cornerRadius = 10.0;
30. [layer addSublayer:subLayer];
32. //加有内容的子层
33. CALayer *imageLayer = [CALayer new];
34. imageLayer.frame = CGRectMake(180, 300, 100, 120);
35. imageLayer.contents = (id)[UIImage imageNamed:@"d.jpg"].CGImage;
36. imageLayer.cornerRadius = 10.0;
37. imageLayer.masksToBounds = YES;
38. [layer addSublayer:imageLayer];
39. }
40. @end

5 使用CoreAnimation制作动画

5.1 问题

CoreAnimation是一个图形渲染和动画的底层框架，能够提供更多更强大的图形渲染显示效果。本案例使用CoreAnimation的关键帧动画方法和基础动画方法制作动画，如图-7所示：

图-7

5.2 方案

首先在创建好的Xcode项目的Storyboard中拖放一个ImageView控件和一个Button控件，在右边栏的检查器中设置ImageView和Button的属性，并将ImageView关联成TRAnimationViewController的属性imageView，将Button关联成TRAnimationViewController的方法start：。

然后在viewDidLoad方法中设置imageView的layer属性，将imageView设置成圆角。

最后实现start：方法，当点击按钮imageView开始执行动画。首先制定一个imageView的动画路径path，是一个UIBezierPath类型，然后分别创建关键帧动画、缩放动画以及透明度改变动画，最后将以上动画放进一个动画群组里面，即CAAnimationGroup类型的group，并将动画添加到imageView的layer中。

5.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：搭建Storyboard界面

首先在创建好的Xcode项目的Storyboard中拖放一个ImageView控件和一个Button控件，在右边栏的检查器中设置ImageView和Button的属性，并将ImageView关联成TRAnimationViewController的属性imageView，将Button关联成TRAnimationViewController的方法start：，代码如下所示：

 

1. @interface TRAnimationViewController ()
2. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
3. @end
4. - (IBAction)start:(id)sender
5. {
6. }

步骤二：实现imageView的移动动画

首先在viewDidLoad方法中设置imageView的layer属性，将imageView设置成圆角，代码如下所示：

 

1. - (void)viewDidLoad
2. {
3. [super viewDidLoad];
4. //设置imageView的layer属性
5.     self.imageView.layer.cornerRadius = 8.0;
6. self.imageView.layer.masksToBounds = YES;
7. }

然后实现start：方法，当点击按钮imageView开始执行动画。首先制定一个imageView的动画路径path，是一个UIBezierPath类型，代码如下所示：

1. - (IBAction)start:(id)sender
2. {
3. UIBezierPath *path = [UIBezierPath bezierPath];
4. [self createCurve:path];
5. }
7. - (IBAction)start:(id)sender
8. {
9. UIBezierPath *path = [UIBezierPath bezierPath];
10. [self createCurve:path];
11. //创建关键帧
12. CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
13. //设置相关属性
14. moveAnimation.path = path.CGPath;
15. moveAnimation.removedOnCompletion = YES;
16. }

然后创建关键帧动画，并设置相关属性，代码如下所示：

1. - (IBAction)start:(id)sender
2. {
3. UIBezierPath *path = [UIBezierPath bezierPath];
4. [self createCurve:path];
5. //创建关键帧
6. CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
7. //设置相关属性
8. moveAnimation.path = path.CGPath;
9. moveAnimation.removedOnCompletion = YES;
10. }

再创建缩放动画以及透明度改变动画，代码如下所示：

 

1. - (IBAction)start:(id)sender
2. {
3. UIBezierPath *path = [UIBezierPath bezierPath];
4. [self createCurve:path];
5. //创建关键帧
6. CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
7. //设置相关属性
8. moveAnimation.path = path.CGPath;
9. moveAnimation.removedOnCompletion = YES;
10. //创建缩放动画
11. CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
12. scaleAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
13. scaleAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];
14. scaleAnimation.removedOnCompletion = YES;
16. //创建透明度动画
17. CABasicAnimation *alphaAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
18. alphaAnimation.fromValue = @1.0;
19. alphaAnimation.toValue = @0.0;
20. alphaAnimation.removedOnCompletion = YES;
21. }

最后将以上动画放进一个动画群组里面，即CAAnimationGroup类型的group，并将动画添加到imageView的layer中，代码如下所示：

 

1. - (IBAction)start:(id)sender
2. {
3. UIBezierPath *path = [UIBezierPath bezierPath];
4. [self createCurve:path];
5. //创建关键帧
6. CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
7. //设置相关属性
8. moveAnimation.path = path.CGPath;
9. moveAnimation.removedOnCompletion = YES;
11. //创建缩放动画
12. CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
13. scaleAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
14. scaleAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];
15. scaleAnimation.removedOnCompletion = YES;
17. //创建透明度动画
18. CABasicAnimation *alphaAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
19. alphaAnimation.fromValue = @1.0;
20. alphaAnimation.toValue = @0.0;
21. alphaAnimation.removedOnCompletion = YES;
23. //将以上动画放进一个动画组
24. CAAnimationGroup *group = [CAAnimationGroup animation];
25. group.animations = @[moveAnimation, scaleAnimation, alphaAnimation];
26. group.duration = 2.0;
27. group.delegate = self;
28. //加入到Layer中
29. [self.imageView.layer addAnimation:group forKey:nil];
30. }

实现animation的生命周期方法，当动画结束时将imageView从界面上移除，代码如下所示：

 

1. - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
2. {
3. [self.imageView removeFromSuperview];
4. }

5.4 完整代码

本案例中，TRAnimationViewController.m文件中的完整代码如下所示：

 

1. #import "TRAnimationViewController.h"
3. @interface TRAnimationViewController ()
4. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
5. @end
7. @implementation TRAnimationViewController
8. - (void)viewDidLoad
9. {
10. [super viewDidLoad];
11. //设置imageView的layer属性
12.     self.imageView.layer.cornerRadius = 8.0;
13. self.imageView.layer.masksToBounds = YES;
14. }
15. //创建图片运动的曲线
16. - (void)createCurve:(UIBezierPath *)path
17. {
18. [path moveToPoint:self.imageView.center];
19. CGPoint targetPoint = CGPointMake(self.view.bounds.size.width - self.imageView.frame.size.width - 20, self.view.bounds.size.height - self.imageView.frame.size.height - 20);
20. CGPoint control1 = CGPointMake(self.view.bounds.size.width - self.imageView.frame.size.width - 20, self.imageView.frame.origin.y);
21. CGPoint control2 = CGPointMake(self.imageView.frame.origin.x, self.view.bounds.size.height - self.imageView.frame.size.height - 20);
22. [path addCurveToPoint:targetPoint controlPoint1:control1 controlPoint2:control2];
23. }
24. - (IBAction)start:(id)sender
25. {
26. UIBezierPath *path = [UIBezierPath bezierPath];
27. [self createCurve:path];
28. //创建关键帧
29. CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
30. //设置相关属性
31. moveAnimation.path = path.CGPath;
32. moveAnimation.removedOnCompletion = YES;
34. //创建缩放动画
35. CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
36. scaleAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
37. scaleAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];
38. scaleAnimation.removedOnCompletion = YES;
40. //创建透明度动画
41. CABasicAnimation *alphaAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
42. alphaAnimation.fromValue = @1.0;
43. alphaAnimation.toValue = @0.0;
44. alphaAnimation.removedOnCompletion = YES;
46. //将以上动画放进一个动画组
47. CAAnimationGroup *group = [CAAnimationGroup animation];
48. group.animations = @[moveAnimation, scaleAnimation, alphaAnimation];
49. group.duration = 2.0;
50. group.delegate = self;
51. //加入到Layer中
52. [self.imageView.layer addAnimation:group forKey:nil];
53. }
55. - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
56. {
57. [self.imageView removeFromSuperview];
58. }
59. @end

6 使用CATransform3D制作3D动画

6.1 问题

CATransform3D是一个结构体，是一个4x4的矩阵，用于描述一个3D图形的变形，包括旋转、缩放以及位移，本案例使用CATransform3D制作3D旋转动画，如图-8所示：

图-8

6.2 方案

首先在创建好的Xcode项目的Storyboard中拖放一个ImageView控件和四个Button控件，在右边栏的检查器中设置ImageView和Button的属性，并将ImageView关联成TRRotationViewController的属性imageView。

再将四个Button关联成TRRotationViewController的四个方法rotationX:、rotationY:、rotationZ:以及rotation:。

然后在viewDidLoad方法中设置imageView的layer属性，将imageView设置成圆角。

最后实现四个Button的动作方法，rotationX:实现功能围绕X轴旋转，rotationY:实现功能围绕Y轴旋转，rotationZ:实现功能围绕Z轴旋转，rotation:实现功能围绕着XYZ轴同时旋转。

6.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：搭建Storyboard界面

首先在创建好的Xcode项目的Storyboard中拖放一个ImageView控件和四个Button控件，在右边栏的检查器中设置ImageView和Button的属性，并将ImageView关联成TRRotationViewController的属性imageView，代码如下所示：

 

1. @interface TRViewController ()
2. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
3. @end

Storyboard中界面完成的结果如图-9所示：

图-9

步骤二：实现3D旋转动画

首先将四个Button关联成TRRotationViewController的四个方法rotationX:、rotationY:、rotationZ:以及rotation:，

在viewDidLoad方法中设置imageView的layer属性，将imageView设置成圆角，代码如下所示：

 

1. - (void)viewDidLoad
2. {
3. [super viewDidLoad];
4. self.imageView.layer.cornerRadius = 8.0;
5. self.imageView.layer.masksToBounds = YES;
6. }

然后实现四个Button的动作方法，在rotationX:方法中通过layer的transform属性，实现功能围绕X轴旋转，然后使用类似的方法实现方法rotationY:和rotationZ:，代码如下所示：

 

1. - (IBAction)rotationX:(id)sender
2. {
3. //创建基本动画
4. CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
5. transformAnimation.fromValue = [NSValue valueWithCATransform3D:self.imageView.layer.transform];
6. //计算目标值
7. transformAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(self.imageView.layer.transform, M_PI, 1.0, 0, 0)];
8. transformAnimation.duration = 3.0;
9. //将动画添加到imageView的layer上面
10. [self.imageView.layer addAnimation:transformAnimation forKey:nil];
11. }
12. - (IBAction)rotationY:(id)sender
13. {
14. CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
15. transformAnimation.fromValue = [NSValue valueWithCATransform3D:self.imageView.layer.transform];
16. transformAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(self.imageView.layer.transform, M_PI, 0.0, 1.0, 0)];
17. transformAnimation.duration = 3.0;
18. [self.imageView.layer addAnimation:transformAnimation forKey:nil];
19. }
20. - (IBAction)rotationZ:(id)sender
21. {
22. CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
23. transformAnimation.fromValue = [NSValue valueWithCATransform3D:self.imageView.layer.transform];
24. transformAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(self.imageView.layer.transform, M_PI, 0.0, 0.0, 1.0)];
25. transformAnimation.duration = 3.0;
26. [self.imageView.layer addAnimation:transformAnimation forKey:nil];
27. }

最后实现rotation:方法，该方法实现功能围绕着XYZ轴同时旋转，代码如下所示：

 

1. - (IBAction)rotation:(id)sender
2. {
3. CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
4. transformAnimation.fromValue = [NSValue valueWithCATransform3D:self.imageView.layer.transform];
5. transformAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(self.imageView.layer.transform, M_PI, 1.0, 1.0, 1.0)];
6. transformAnimation.duration = 3.0;
7. transformAnimation.delegate = self;
8. [self.imageView.layer addAnimation:transformAnimation forKey:nil];
9. }

实现animation的生命周期方法，当rotation动画结束时将imageView的transform属性值保持不变，从界面上移除，代码如下所示：

 

1. - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
2. {
3. self.imageView.layer.transform = CATransform3DRotate(self.imageView.layer.transform, M_PI, 1.0, 1.0, 1.0);
4. }

6.4 完整代码

本案例中，TRRotationViewController.m文件中的完整代码如下所示：

 

1. #import "TRRotationViewController.h"
3. @interface TRRotationViewController ()
4. @property (weak, nonatomic) IBOutlet UIImageView *imageView;
6. @end
8. @implementation TRRotationViewController
10. - (void)viewDidLoad
11. {
12. [super viewDidLoad];
13. self.imageView.layer.cornerRadius = 8.0;
14. self.imageView.layer.masksToBounds = YES;
15. }
17. - (IBAction)rotationX:(id)sender
18. {
19. //创建基本动画
20. CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
21. transformAnimation.fromValue = [NSValue valueWithCATransform3D:self.imageView.layer.transform];
22. //计算目标值
23. transformAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(self.imageView.layer.transform, M_PI, 1.0, 0, 0)];
24. transformAnimation.duration = 3.0;
25. //将动画添加到imageView的layer上面
26. [self.imageView.layer addAnimation:transformAnimation forKey:nil];
27. }
28. - (IBAction)rotationY:(id)sender
29. {
30. CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
31. transformAnimation.fromValue = [NSValue valueWithCATransform3D:self.imageView.layer.transform];
32. transformAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(self.imageView.layer.transform, M_PI, 0.0, 1.0, 0)];
33. transformAnimation.duration = 3.0;
34. [self.imageView.layer addAnimation:transformAnimation forKey:nil];
35. }
36. - (IBAction)rotationZ:(id)sender
37. {
38. CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
39. transformAnimation.fromValue = [NSValue valueWithCATransform3D:self.imageView.layer.transform];
40. transformAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(self.imageView.layer.transform, M_PI, 0.0, 0.0, 1.0)];
41. transformAnimation.duration = 3.0;
42. [self.imageView.layer addAnimation:transformAnimation forKey:nil];
43. }
44. - (IBAction)rotation:(id)sender
45. {
46. CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
47. transformAnimation.fromValue = [NSValue valueWithCATransform3D:self.imageView.layer.transform];
48. transformAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(self.imageView.layer.transform, M_PI, 1.0, 1.0, 1.0)];
49. transformAnimation.duration = 3.0;
50. transformAnimation.delegate = self;
51. [self.imageView.layer addAnimation:transformAnimation forKey:nil];
52. }
54. - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
55. {
56. self.imageView.layer.transform = CATransform3DRotate(self.imageView.layer.transform, M_PI, 1.0, 1.0, 1.0);
57. }
58. @end