[iOS UI进阶 - 6.2] 核心动画CoreAnimation 练习代码

A.基本用法

1.CABasicAnimation

  1 //

  2 //  ViewController.m

  3 //  CoreAnimationTest

  4 //

  5 //  Created by hellovoidworld on 15/1/14.

  6 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.

  7 //

  8 

  9 #import "ViewController.h"

 10 

 11 @interface ViewController ()

 12 

 13 @property(nonatomic, strong) CALayer *layer;

 14 

 15 @end

 16 

 17 @implementation ViewController

 18 

 19 - (void)viewDidLoad {

 20     [super viewDidLoad];

 21     // Do any additional setup after loading the view, typically from a nib.

 22    

 23 

 24     CALayer *layer = [[CALayer alloc] init];

 25     layer.bounds = CGRectMake(0, 0, 100, 100);

 26     layer.anchorPoint = CGPointZero;

 27     layer.position = CGPointMake(100, 200);

 28     layer.backgroundColor = [UIColor redColor].CGColor;

 29    

 30     [self.view.layer addSublayer:layer];

 31    

 32     self.layer = layer;

 33 }

 34 

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

 36 //    [self testTransform];

 37    

 38 //    [self testRotation];

 39    

 40 //    [self testScale];

 41    

 42     [self testTranslate];

 43 }

 44 

 45 /** 测试位移转换 */

 46 - (void) testTransform {

 47     // 1.创建动画对象

 48     CABasicAnimation *anim = [CABasicAnimation animation];

 49    

 50     // 2.设置动画

 51     anim.duration = 2.0;

 52     // 动画设置目标属性

 53     anim.keyPath = @"transform.translation.x";

 54     // 目标属性值

 55     anim.toValue = @(150);

 56    

 57     // 完成后保留动画

 58     anim.removedOnCompletion = NO;

 59     // 定格动画模式为最后一刻

 60     anim.fillMode = kCAFillModeForwards;

 61    

 62     // 3.添加动画到图层

 63     [self.layer addAnimation:anim forKey:nil];

 64 }

 65 

 66 /** 测试旋转 */

 67 - (void) testRotation {

 68     // 1.创建动画对象

 69     CABasicAnimation *anim = [CABasicAnimation animation];

 70    

 71     // 2.设置动画

 72     anim.duration = 2.0;

 73    

 74     // 动画设置目标属性

 75 //    anim.keyPath = @"transform.rotation";

 76     anim.keyPath = @"transform";

 77     NSValue *value = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2, 1, 1, 0)];

 78    

 79     // 目标属性值

 80 //    anim.toValue = @(M_PI_2);

 81     anim.toValue = value;

 82    

 83    

 84     // 完成后保留动画

 85     anim.removedOnCompletion = NO;

 86     // 定格动画模式为最后一刻

 87     anim.fillMode = kCAFillModeForwards;

 88    

 89     // 3.添加动画到图层

 90     [self.layer addAnimation:anim forKey:nil];

 91 }

 92 

 93 /** 测试缩放 */

 94 - (void) testScale {

 95     // 1.创建动画对象

 96     CABasicAnimation *anim = [CABasicAnimation animation];

 97    

 98     // 2.设置动画

 99     anim.duration = 2.0;

100     // 动画设置目标属性

101     anim.keyPath = @"bounds";

102    

103     // 由于属性是bounds，所以x,y属性是无用的，并且要使用CGRect

104     NSValue *fromValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 0, 0)];

105     NSValue *toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];

106    

107     // 目标属性值

108     anim.fromValue = fromValue;

109     anim.toValue = toValue;

110    

111     // 完成后保留动画

112     anim.removedOnCompletion = NO;

113     // 定格动画模式为最后一刻

114     anim.fillMode = kCAFillModeForwards;

115    

116     // 3.添加动画到图层

117     [self.layer addAnimation:anim forKey:nil];

118 }

119 

120 - (void) testTranslate {

121     // 1.创建动画对象

122     CABasicAnimation *anim = [CABasicAnimation animation];

123    

124     // 2.设置动画

125     anim.duration = 2.0;

126     // 动画设置目标属性

127     anim.keyPath = @"position";

128    

129     // 目标属性值

130     NSValue *value = [NSValue valueWithCGPoint:CGPointMake(100, 100)];

131     // 增减目标属性值，所以一直点击就会一直移动下去

132     anim.byValue = value;

133    

134     // 完成后保留动画

135     anim.removedOnCompletion = NO;

136     // 定格动画模式为最后一刻

137     anim.fillMode = kCAFillModeForwards;

138    

139     // 3.添加动画到图层

140     [self.layer addAnimation:anim forKey:nil];

141 }

142 

143 

144 - (void)didReceiveMemoryWarning {

145     [super didReceiveMemoryWarning];

146     // Dispose of any resources that can be recreated.

147 }

148  

149 @end

 

2.CAKeyframeAnimation

 

  1 //

  2 //  KeyframeViewController.m

  3 //  CoreAnimationTest

  4 //

  5 //  Created by hellovoidworld on 15/1/15.

  6 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.

  7 //

  8 

  9 #import "KeyframeViewController.h"

 10 

 11 @interface KeyframeViewController ()

 12 

 13 @property(nonatomic, strong) CALayer *layer;

 14 

 15 @end

 16 

 17 @implementation KeyframeViewController

 18 

 19 - (void)viewDidLoad {

 20     [super viewDidLoad];

 21     // Do any additional setup after loading the view.

 22    

 23     CALayer *layer = [[CALayer alloc] init];

 24     layer.bounds = CGRectMake(0, 0, 100, 100);

 25     layer.anchorPoint = CGPointZero;

 26     layer.position = CGPointMake(200, 100);

 27     layer.backgroundColor = [UIColor redColor].CGColor;

 28    

 29     [self.view.layer addSublayer:layer];

 30    

 31     self.layer = layer;

 32 }

 33 

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

 35 //    [self testPath];

 36  

 37     [self testMutiValue];

 38 }

 39 

 40 - (void) testPath {

 41     // 创建动画对象

 42     CAKeyframeAnimation *anim = [[CAKeyframeAnimation alloc] init];

 43    

 44     // 设置动画

 45     anim.keyPath = @"position";

 46     anim.removedOnCompletion = NO;

 47     anim.fillMode = kCAFillModeForwards;

 48     anim.duration = 2.0;

 49    

 50     // 设置绘画路径

 51     CGMutablePathRef path = CGPathCreateMutable();

 52     // 创建一个圆的轨迹

 53     CGPathAddEllipseInRect(path, NULL, CGRectMake(0, 0, 200, 200));

 54     // 设置动画轨迹

 55     anim.path = path;

 56     // 释放路径

 57     CGPathRelease(path);

 58    

 59     // 设置动画代理

 60     anim.delegate = self;

 61    

 62     [self.layer addAnimation:anim forKey:nil];

 63 }

 64 

 65 - (void) testMutiValue {

 66     // 创建动画对象

 67     CAKeyframeAnimation *anim = [[CAKeyframeAnimation alloc] init];

 68    

 69     // 设置动画

 70     anim.keyPath = @"position";

 71     anim.removedOnCompletion = NO;

 72     anim.fillMode = kCAFillModeForwards;

 73     anim.duration = 2.0;

 74    

 75     NSValue *v1 = [NSValue valueWithCGPoint:CGPointMake(0, 0)];

 76     NSValue *v2 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];

 77     NSValue *v3 = [NSValue valueWithCGPoint:CGPointMake(300, 200)];

 78     NSValue *v4 = [NSValue valueWithCGPoint:CGPointMake(120, 50)];

 79    

 80     anim.values = @[v1, v2, v3, v4];

 81    

 82     //  设置动画节奏

 83     // 慢进慢出

 84     anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

 85    

 86     // 设置动画代理

 87     anim.delegate = self;

 88    

 89     [self.layer addAnimation:anim forKey:nil];

 90 }

 91 

 92 #pragma mark - 动画代理方法

 93 /** 动画开始之后 */

 94 - (void)animationDidStart:(CAAnimation *)anim {

 95     NSLog(@"animationDidStart");

 96 }

 97 

 98 /** 动画结束 */

 99 - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {

100     NSLog(@"animationDidStop");

101 }

102 

103 

104 @end

 

3.控件抖动

 

 1 //

 2 //  ShakeViewController.m

 3 //  CoreAnimationTest

 4 //

 5 //  Created by hellovoidworld on 15/1/15.

 6 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.

 7 //

 8 

 9 #import "ShakeViewController.h"

10 

11 @interface ShakeViewController ()

12 

13 @property(nonatomic, strong) UIImageView *imageView;

14 

15 @end

16 

17 @implementation ShakeViewController

18 

19 - (void)viewDidLoad {

20     [super viewDidLoad];

21     // Do any additional setup after loading the view.

22    

23     UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"headImage"]];

24     imageView.frame = CGRectMake(100, 100, 100, 100);

25     self.imageView = imageView;

26    

27     UIButton *startButton = [UIButton buttonWithType:UIButtonTypeSystem];

28     [startButton setTitle:@"开始" forState:UIControlStateNormal];

29     startButton.frame = CGRectMake(50, 50, 40, 50);

30     [startButton addTarget:self action:@selector(startShake) forControlEvents:UIControlEventTouchUpInside];

31    

32     UIButton *stopButton = [UIButton buttonWithType:UIButtonTypeSystem];

33     [stopButton setTitle:@"停止" forState:UIControlStateNormal];

34     stopButton.frame = CGRectMake(150, 50, 40, 50);

35     [stopButton addTarget:self action:@selector(stopShake) forControlEvents:UIControlEventTouchUpInside];

36    

37     [self.view addSubview:imageView];

38     [self.view addSubview:startButton];

39     [self.view addSubview:stopButton];

40 }

41 

42 /** 开始摆动 */

43 - (void) startShake {

44     NSLog(@"start shake");

45    

46     // 创建动画

47     CAKeyframeAnimation *anim = [[CAKeyframeAnimation alloc] init];

48     anim.keyPath = @"transform.rotation";

49     anim.repeatCount = MAXFLOAT;

50     anim.duration = 0.2;

51    

52     // 设置摇摆

53     anim.values = @[@(- (M_PI/180 * 5)), @((M_PI/180 * 5)), @(- (M_PI/180 * 5))];

54   

55     // 定格动画

56     anim.removedOnCompletion = NO;

57     anim.fillMode = kCAFillModeForwards;

58    

59     // 给view加上动画

60     [self.imageView.layer addAnimation:anim forKey:@"shake"];

61 }

62 

63 /** 停止摆动 */

64 - (void) stopShake {

65     NSLog(@"stop shake");

66    

67     [self.imageView.layer removeAnimationForKey:@"shake"];

68 }

69  

70 @end

 

4.过渡效果

 

 1 //

 2 //  TransitionViewController.m

 3 //  CoreAnimationTest

 4 //

 5 //  Created by hellovoidworld on 15/1/15.

 6 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.

 7 //

 8 

 9 #import "TransitionViewController.h"

10 

11 @interface TransitionViewController ()

12 

13 @property(nonatomic, strong) UIImageView *imageView;

14 

15 @property(nonatomic, assign) int imageIndex;

16 

17 @end

18 

19 @implementation TransitionViewController

20 

21 - (void)viewDidLoad {

22     [super viewDidLoad];

23     // Do any additional setup after loading the view.

24    

25     self.imageIndex = 0;

26     UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1"]];

27     imageView.frame = CGRectMake(80, 50, 160, 240);

28     self.imageView = imageView;

29    

30     UIButton *startButton = [UIButton buttonWithType:UIButtonTypeSystem];

31     [startButton setTitle:@"上一张" forState:UIControlStateNormal];

32     startButton.frame = CGRectMake(50, 400, 80, 50);

33     [startButton addTarget:self action:@selector(preImage) forControlEvents:UIControlEventTouchUpInside];

34    

35     UIButton *stopButton = [UIButton buttonWithType:UIButtonTypeSystem];

36     [stopButton setTitle:@"下一张" forState:UIControlStateNormal];

37     stopButton.frame = CGRectMake(150, 400, 80, 50);

38     [stopButton addTarget:self action:@selector(nextImage) forControlEvents:UIControlEventTouchUpInside];

39    

40     [self.view addSubview:imageView];

41     [self.view addSubview:startButton];

42     [self.view addSubview:stopButton];

43 }

44 

45 /** 上一张 */

46 - (void) preImage {

47     NSLog(@"preImage");

48    

49     self.imageIndex--;

50     if (self.imageIndex == -1) {

51         self.imageIndex = 8;

52     }

53    

54     CATransition *anim = [[CATransition alloc] init];

55     anim.duration = 0.5;

56     anim.type = @"cube";

57     anim.subtype = kCATransitionFromLeft;

58    

59     [self.imageView.layer addAnimation:anim forKey:nil];

60    

61     [self changeImage:self.imageIndex];

62 }

63 

64 /** 下一张 */

65 - (void) nextImage {

66     NSLog(@"nextImage");

67    

68     self.imageIndex++;

69     if (self.imageIndex == 9) {

70         self.imageIndex = 0;

71     }

72    

73     CATransition *anim = [[CATransition alloc] init];

74     anim.duration = 0.5;

75     anim.type = @"cube";

76     anim.subtype = kCATransitionFromRight;

77    

78     [self.imageView.layer addAnimation:anim forKey:nil];

79    

80     [self changeImage:self.imageIndex];

81 }

82 

83 /** 替换图片 */

84 - (void) changeImage:(int) imageIndex {

85     NSString *imageName = [NSString stringWithFormat:@"%d", self.imageIndex + 1];

86     self.imageView.image = [UIImage imageNamed:imageName];

87 }

88 

89 @end

 

5.CAAnimationGroup 动画组（组合多种动画）

 

 1 //

 2 //  GroupViewController.m

 3 //  CoreAnimationTest

 4 //

 5 //  Created by hellovoidworld on 15/1/15.

 6 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.

 7 //

 8 

 9 #import "GroupViewController.h"

10 

11 @interface GroupViewController ()

12 

13 @property(nonatomic, strong) UIView *hvwView;

14 

15 @end

16 

17 @implementation GroupViewController

18 

19 - (void)viewDidLoad {

20     [super viewDidLoad];

21     // Do any additional setup after loading the view.

22    

23     UIView *hvwView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];

24     hvwView.backgroundColor = [UIColor redColor];

25     self.hvwView = hvwView;

26    

27     [self.view addSubview:hvwView];

28 }

29 

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

31     // 平移

32     CABasicAnimation *anim1 = [[CABasicAnimation alloc] init];

33     anim1.keyPath = @"position";

34     anim1.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 300)];

35    

36     // 旋转

37     CABasicAnimation *anim2 = [[CABasicAnimation alloc] init];

38     anim2.keyPath = @"transform.rotation";

39     anim2.toValue = @(M_PI_2);

40    

41     // 缩放

42     CABasicAnimation *anim3 = [[CABasicAnimation alloc] init];

43     anim3.keyPath = @"bounds";

44     anim3.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];

45    

46     // group动画

47     CAAnimationGroup *animGroup = [[CAAnimationGroup alloc] init];

48     animGroup.animations = @[anim1, anim2, anim3];

49     animGroup.duration = 2.0;

50    

51     // 定格动画

52     animGroup.removedOnCompletion = NO;

53     animGroup.fillMode = kCAFillModeForwards;

54    

55     [self.hvwView.layer addAnimation:animGroup forKey:nil];

56 }

57  

58 @end