iOS开发UI篇—核心动画(转场动画和组动画)

iOS开发UI篇—核心动画(转场动画和组动画)

一、转场动画简单介绍

CAAnimation的子类，用于做转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。iOS比Mac OS X的转场动画效果少一点

UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果

属性解析:

type：动画过渡类型

subtype：动画过渡方向

startProgress：动画起点(在整体动画的百分比)

endProgress：动画终点(在整体动画的百分比)

 

二、转场动画代码示例

1.界面搭建

2.实现代码

 1 //

 2 //  YYViewController.m

 3 //  13-转场动画

 4 //

 5 //  Created by apple on 14-6-21.

 6 //  Copyright (c) 2014年 itcase. All rights reserved.

 7 //

 8 

 9 #import "YYViewController.h"

10 

11 @interface YYViewController ()

12 @property(nonatomic,assign) int index;

13 @property (weak, nonatomic) IBOutlet UIImageView *iconView;

14 

15 - (IBAction)preOnClick:(UIButton *)sender;

16 - (IBAction)nextOnClick:(UIButton *)sender;

17 

18 @end

19 

20 @implementation YYViewController

21 

22 - (void)viewDidLoad

23 {

24     [super viewDidLoad];

25     self.index=1;

26 

27 }

28 

29 - (IBAction)preOnClick:(UIButton *)sender {

30     self.index--;

31     if (self.index<1) {

32         self.index=7;

33     }

34     self.iconView.image=[UIImage imageNamed: [NSString stringWithFormat:@"%d.jpg",self.index]];

35     

36     //创建核心动画

37     CATransition *ca=[CATransition animation];

38     //告诉要执行什么动画

39     //设置过度效果

40     ca.type=@"cube";

41     //设置动画的过度方向（向左）

42     ca.subtype=kCATransitionFromLeft;

43     //设置动画的时间

44     ca.duration=2.0;

45     //添加动画

46     [self.iconView.layer addAnimation:ca forKey:nil];

47 }

48 

49 //下一张

50 - (IBAction)nextOnClick:(UIButton *)sender {

51     self.index++;

52     if (self.index>7) {

53         self.index=1;

54     }

55         self.iconView.image=[UIImage imageNamed: [NSString stringWithFormat:@"%d.jpg",self.index]];

56     

57     //1.创建核心动画

58     CATransition *ca=[CATransition animation];

59     

60     //1.1告诉要执行什么动画

61     //1.2设置过度效果

62     ca.type=@"cube";

63     //1.3设置动画的过度方向（向右）

64     ca.subtype=kCATransitionFromRight;

65     //1.4设置动画的时间

66     ca.duration=2.0;

67     //1.5设置动画的起点

68     ca.startProgress=0.5;

69     //1.6设置动画的终点

70 //    ca.endProgress=0.5;

71     

72     //2.添加动画

73     [self.iconView.layer addAnimation:ca forKey:nil];

74 }

75 @end

点击上一张，或者下一张的时候，展示对应的动画效果。

三、组动画简单说明

CAAnimation的子类，可以保存一组动画对象，将CAAnimationGroup对象加入层后，组中所有动画对象可以同时并发运行

属性解析：

animations：用来保存一组动画对象的NSArray

默认情况下，一组动画对象是同时运行的，也可以通过设置动画对象的beginTime属性来更改动画的开始时间

四、分组动画代码示例

代码：

 1 #import "YYViewController.h"

 2 

 3 @interface YYViewController ()

 4 @property (weak, nonatomic) IBOutlet UIView *iconView;

 5 

 6 @end

 7 

 8 @implementation NJViewController

 9 

10 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event

11 {

12     

13     // 平移动画

14     CABasicAnimation *a1 = [CABasicAnimation animation];

15     a1.keyPath = @"transform.translation.y";

16     a1.toValue = @(100);

17     // 缩放动画

18     CABasicAnimation *a2 = [CABasicAnimation animation];

19     a2.keyPath = @"transform.scale";

20     a2.toValue = @(0.0);

21     // 旋转动画

22     CABasicAnimation *a3 = [CABasicAnimation animation];

23     a3.keyPath = @"transform.rotation";

24     a3.toValue = @(M_PI_2);

25     

26     // 组动画

27     CAAnimationGroup *groupAnima = [CAAnimationGroup animation];

28     

29     groupAnima.animations = @[a1, a2, a3];

30     

31     //设置组动画的时间

32     groupAnima.duration = 2;

33     groupAnima.fillMode = kCAFillModeForwards;

34     groupAnima.removedOnCompletion = NO;

35     

36     [self.iconView.layer addAnimation:groupAnima forKey:nil];

37 }

38 

39 @end

说明：平移-旋转-缩放作为一组动画一起执行。