首页 > 其他 > 详细

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

时间：2015-12-15 22:25:18      阅读：236      评论：0      收藏：0      [点我收藏+]
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

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

原文：http://www.cnblogs.com/hytx/p/5049472.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！