iOS开发——动画编程OC篇&总结

  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