动画总结
iOS 动画Animation详解, UIView动画(UIView属性动画,UIViewTransition动画,UIView Block动画),CALayer动画(CABasicAnima, CAKeyframeAnimation, CATransition, CAAnimationGroup)
1 iOS 动画Animation详解, UIView动画(UIView属性动画,UIViewTransition动画,UIView Block动画),CALayer动画(CABasicAnima, CAKeyframeAnimation, CATransition, CAAnimationGroup)
2 //
3 // FirstVC.m
4 // LessonAnimation
5 //
6 // Created by lanouhn on 14-9-17.
7 // Copyright (c) 2014年 [email protected] 陈聪雷. All rights reserved.
8 //
9
10 #import "FirstVC.h"
11
12 @interface FirstVC ()
13
14 @end
15
16 @implementation FirstVC
17 /*
18 创建xib过程
19 1 创建xib(名字和类名相同)
20 2 文件拥有者为类名
21 3 和类的view连线
22 */
23 - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
24 {
25 self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
26 if (self) {
27 // Custom initialization
28 }
29 return self;
30 }
31
32 - (void)viewDidLoad
33 {
34 [super viewDidLoad];
35 // Do any additional setup after loading the view from its nib.
36 }
37
38 - (void)didReceiveMemoryWarning
39 {
40 [super didReceiveMemoryWarning];
41 // Dispose of any resources that can be recreated.
42 }
43
44 //UIView属性动画
45 - (IBAction)pressPropertyAnimation:(id)sender {
46 //1 准备动画
47 //参数1: 动画的作用, 用来区分多个动画, 参数二: 传递参数用 nil:OC中使用 NULL:C语言使用
48 [UIView beginAnimations:@"改变大小" context:NULL];
49 //在准备动画的时候可以设置动画的属性
50 [UIView setAnimationDuration:2];//设置动画的持续时间
51 [UIView setAnimationDelegate:self];
52 [UIView setAnimationWillStartSelector:@selector(startAnimation)];
53 // [UIView setAnimationDelay:1];//动画延迟执行时间
54 [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];//动画的曲线
55 [UIView setAnimationRepeatCount:20];//动画的重复次数
56 [UIView setAnimationRepeatAutoreverses:YES];//动画往返执行, 必须设置动画的重复次数
57 //2 修改view的属性, 可以同时修改多个属性 注意:不是所有的属性都可以修改的(只有frame, center, bounds, backgroundColor, alpha, transform 可以修改)
58 self.changeView.frame = CGRectMake(110, 100, 100, 100);
59 // self.changeView.backgroundColor = [UIColor brownColor];
60 self.changeView.backgroundColor = [UIColor colorWithRed:arc4random() % 256 / 255.0 green:arc4random() % 256 / 255.0 blue:arc4random() % 256 / 255.0 alpha:0.5];
61 //3 提交并执行动画
62 [UIView commitAnimations];
63 }
64 //UIView过度动画
65 - (IBAction)pressTranstionAnimation:(id)sender {
66 //1 准备动画
67 [UIView beginAnimations:@"过度动画" context:NULL];
68 [UIView setAnimationDuration:5];
69 [UIView setAnimationRepeatCount:50];
70 //2 设置过度样式
71 //参数1: 过度样式, 参数2: 指定那个View做动画, 参数3: 是否设置缓存
72 [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.changeView cache:YES];
73 self.changeView.backgroundColor = [UIColor colorWithRed:arc4random() % 256 / 255.0 green:arc4random() % 256 / 255.0 blue:arc4random() % 256 / 255.0 alpha:0.5];
74 //3 提交并执行动画
75 [UIView commitAnimations];
76 }
77
78 //Block动画
79 - (IBAction)pressBlockAnimation:(id)sender {
80 //只有一行代码 Block动画实质是对UIView动画的封装
81 //参数1:动画时长 参数2:Block: 设置要修改的View属性
82 /*
83 [UIView animateWithDuration:2 animations:^{
84 self.changeView.backgroundColor = [UIColor orangeColor];
85 }];
86 */
87 //第二种Block
88 /*
89 //参数1:动画时长 参数2:Block: 设置要修改的View属性 参数3: 动画完成时调用
90 [UIView animateWithDuration:2 animations:^{
91 self.changeView.backgroundColor = [UIColor orangeColor];
92 } completion:^(BOOL finished) {
93 //finished判断动画是否完成
94 if (finished) {
95 NSLog(@"finished");
96 }
97 }];
98 */
99 //第三种Block
100 /*
101 [UIView animateWithDuration:2 delay:1 options:UIViewAnimationOptionCurveEaseInOut animations:^{
102 // 设置要修改的View属性
103 self.changeView.backgroundColor = [UIColor orangeColor];
104 } completion:^(BOOL finished) {
105 //finished判断动画是否完成
106 if (finished) {
107 NSLog(@"finished");
108 }
109 }];
110 */
111 //对过度动画的封装
112 //参数1: 改变的View 参数2:动画时长 参数3:动画类型 参数4 Block: 设置要修改的View属性 参数5:完成后的操作
113 [UIView transitionWithView:self.changeView duration:2 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
114 self.changeView.backgroundColor = [UIColor orangeColor];
115 } completion:^(BOOL finished) {
116 //finished判断动画是否完成
117 if (finished) {
118 NSLog(@"finished");
119 }
120 }];
121 }
122
123 #pragma mark - AnimationDelegate
124 //动画将要开始时调用
125 - (void)animationWillStart:(NSString *)animationID context:(void *)context
126 {
127 NSLog(@"start: %@, %@", animationID, context);
128 }
129
130 //动画结束时调用
131 - (void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context
132 {
133 NSLog(@"stop: %@, %@", animationID, context);
134 }
135
136 - (void)startAnimation
137 {
138 NSLog(@"self");
139 }
140 - (void)dealloc {
141 [_changeView release];
142 [super dealloc];
143 }
144 @end
145 //
146 // SecondVC.m
147 // LessonAnimation
148 //
149 // Created by lanouhn on 14-9-17.
150 // Copyright (c) 2014年 [email protected] 陈聪雷. All rights reserved.
151 //
152
153 #import "SecondVC.h"
154
155 @interface SecondVC ()
156
157 @end
158
159 @implementation SecondVC
160
161 - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
162 {
163 self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
164 if (self) {
165 // Custom initialization
166 }
167 return self;
168 }
169
170 - (void)viewDidLoad
171 {
172 [super viewDidLoad];
173 // Do any additional setup after loading the view from its nib.
174 NSLog(@"%@", NSStringFromCGRect(self.changeView.frame));
175 NSLog(@"%f", CGRectGetWidth(self.changeView.frame));
176 //UIView和CALayer的关系
177 //UIView负责交互, frame以及显示CALayer
178 //CALayer负责渲染, 并且它是UIView的一个readonly属性
179 /*
180 self.changeView.layer.cornerRadius = 100;//设置圆角, 参数是内切圆的半径, 若想画一个圆, 前提是view必须是正方形, 参数应该是view边长的一半
181 self.changeView.layer.borderWidth = 1;//设置描边的宽度
182 self.changeView.layer.borderColor = [UIColor orangeColor].CGColor;//设置描边的颜色(UIView上的颜色使用的是UIColor, CALayer上使用的颜色是CGColor)
183 self.changeView.layer.shadowOffset = CGSizeMake(50, 100);//设置阴影的偏移量 width影响水平偏移(正右负左), height影响垂直偏移(正下负上)
184 self.changeView.layer.shadowColor = [UIColor grayColor].CGColor;//阴影的偏移的颜色
185 self.changeView.layer.shadowOpacity = 1;//阴影的不透明度, 取值范围(0 ~ 1), 默认是0, 就是透明的
186 */
187 // CAAnimation抽象类, 使用必须要使用其具体的子类
188 // CAPropertyAnimation抽象子类, 需要子类化
189 // CABasicAnimation
190 // CAKeyframeAnimation
191 }
192
193 - (void)didReceiveMemoryWarning
194 {
195 [super didReceiveMemoryWarning];
196 // Dispose of any resources that can be recreated.
197 }
198
199 - (void)dealloc {
200 [_changeView release];
201 [super dealloc];
202 }
203 //CABasicAnimation基本动画 没有真正的修改属性值
204 - (IBAction)pressBasicAnimation:(id)sender {
205 //1 创建并指定要修改的属性
206 // KeyPath:CAlayer的属性名, 不是所有的属性都可以, 只有在头文件中出现animatable的属性才可以, 可以修改属性的属性, 例如:bounds.size
207 // CALayer
208 CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"bounds"];
209 [basic setDuration:2];
210 //2 修改属性值
211 basic.fromValue = [NSValue valueWithCGRect:CGRectMake(0, 0, self.changeView.bounds.size.width, self.changeView.bounds.size.height)];
212 basic.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 300, 300)];
213 // basic.byValue =
214 //3 添加动画
215 //key做区分动画用
216 [self.changeView.layer addAnimation:basic forKey:@"changColor"];
217 }
218
219 //CAKeyframeAnimation关键帧动画
220 - (IBAction)pressKeyFrameAnimation:(id)sender {
221 /*
222 //1 创建动画
223 CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"bounds"];
224 [keyFrame setDuration:2];
225 //2 修改属性
226 keyFrame.values = @[[NSValue valueWithCGRect:CGRectMake(0, 0, self.changeView.bounds.size.width, self.changeView.bounds.size.height)], [NSValue valueWithCGRect:CGRectMake(0, 0, 250, 250)], [NSValue valueWithCGRect:CGRectMake(0, 0, 300, 300)]];
227 // keyTimes:值代表了出现动画的时刻, 值得范围是0~1, 值必须是递增的, keyTimes和values是一一对应的
228 keyFrame.keyTimes = @[@(0.4), @(0.6), @(1)];
229 //3 添加动画
230 [self.changeView.layer addAnimation:keyFrame forKey:@"keyFrame"];
231 */
232 CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
233 [keyFrame setDuration:10];
234 keyFrame.values = @[(id)[UIColor redColor].CGColor, (id)[UIColor orangeColor].CGColor, (id)[UIColor yellowColor].CGColor, (id)[UIColor greenColor].CGColor, (id)[UIColor blueColor].CGColor];
235 //keyTimes中的第一个值是0, 不能修改
236 keyFrame.keyTimes = @[@(0.3), @(0.5), @(0.6), @(0.7), @(0.9)];
237 [self.changeView.layer addAnimation:keyFrame forKey:nil];
238 }
239
240 // CATransaction 过度动画
241 - (IBAction)pressTransition:(id)sender {
242 //1 创建
243 CATransition *transition = [CATransition animation];
244 [transition setDuration:2];
245 //2 设置过度样式
246 transition.type = kCATransitionReveal;//控制样式
247 transition.subtype = kCATransitionFromTop;//控制方向
248 //添加动画
249 [self.changeView.layer addAnimation:transition forKey:nil];
250 }
251
252 // CAAnimationGroup 组动画
253 - (IBAction)pressAnimationGroup:(id)sender {
254
255 //1 创建并指定要修改的属性
256 // KeyPath:CAlayer的属性名, 不是所有的属性都可以, 只有在头文件中出现animatable的属性才可以, 可以修改属性的属性, 例如:bounds.size
257 // CALayer
258 CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"bounds"];
259 [basic setDuration:2];
260 //2 修改属性值
261 basic.fromValue = [NSValue valueWithCGRect:CGRectMake(0, 0, self.changeView.bounds.size.width, self.changeView.bounds.size.height)];
262 basic.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 300, 300)];
263
264 CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
265 [keyFrame setDuration:5];
266 keyFrame.values = @[(id)[UIColor redColor].CGColor, (id)[UIColor orangeColor].CGColor, (id)[UIColor yellowColor].CGColor, (id)[UIColor greenColor].CGColor, (id)[UIColor blueColor].CGColor];
267 //keyTimes中的第一个值是0, 不能修改
268 keyFrame.keyTimes = @[@(0.3), @(0.5), @(0.6), @(0.7), @(0.9)];
269
270
271
272 // 创建
273 //当group动画的时长 > 组中所有动画的最长时长, 动画的时长以组中最长的时长为准
274 //当group动画的时长 < 组中所有动画的最长时长, 动画的时长以group的时长为准
275 //最合适: group的时长 = 组中所有动画的最长时长
276 CAAnimationGroup *group = [CAAnimationGroup animation];
277 [group setDuration:10];
278 //设置组动画
279 group.animations = @[basic, keyFrame];
280 //添加动画
281 [self.changeView.layer addAnimation:group forKey:nil];
282 }
283 @end
时间： 2024-08-25 06:57:39