Animation主要分为两类:
1、UIView属性动画
2、CoreAnimation动画
UIKit直接将动画集成到UIView类中,实现简单动画的创建过程。UIView类定义了几个内在支持动画的属性声明,当这些属性发生改变时,视图为其变化过程提供内建的动画支持。
1、常见方法:
+ (void)setAnimationDelegate:(id)delegate——设置动画代理对象;
+ (void)setAnimationWillStartSelector:(SEL)selector——当动画即将开始时,执行delegate对象的selector;
+ (void)setAnimationDidStopSelector:(SEL)selector——当动画结束时,执行delegate对象的selector;
+ (void)setAnimationDuration:(NSTimeInterval)duration——动画的持续时间;
+ (void)setAnimationDelay:(NSTimeInterval)delay——动画延迟时间(单位:秒);
+ (void)setAnimationStartDate:(NSDate *)startDate——动画的开始时间;
+ (void)setAnimationCurve:(UIViewAnimationCurve)curve——动画的节奏控制;
+ (void)setAnimationRepeatCount:(float)repeatCount——动画的重复次数;
+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses——设置为YES,代表动画每次重复执行的效果会跟上一次相反
+ (void)setAnimationTransition:(UIViewAnimationTransition)transition
forView:(UIView *)view
cache:(BOOL)cache—— 设置视图view的过渡效果(transition制定过渡类型, cache设置YES代表使用视图缓存);
demo:
1 #import "ViewController.h" 2 3 @interface ViewController (){ 4 UIView *myView; 5 6 } 7 8 @end 9 10 @implementation ViewController 11 12 - (void)viewDidLoad { 13 [super viewDidLoad]; 14 // Do any additional setup after loading the view, typically from a nib. 15 16 myView = [[UIView alloc] initWithFrame:(CGRect){20,20,100,100}]; 17 myView.backgroundColor = [UIColor blueColor]; 18 [self.view addSubview:myView]; 19 20 //准备动画 参数1: 动画的作用, 任意字符串,用来区分多个动画;参数二: 传递参数 21 [UIView beginAnimations:nil context:nil]; 22 //动画持续时间 23 [UIView setAnimationDuration:3]; 24 //设置代理 25 [UIView setAnimationDelegate:self]; 26 27 //设置动画开始执行调用事件 28 [UIView setAnimationWillStartSelector:@selector(startAnimation)]; 29 30 //动画曲线 31 [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; 32 //动画重复次数 33 [UIView setAnimationRepeatCount:3]; 34 //是否往返执行 35 [UIView setAnimationRepeatAutoreverses:YES]; 36 //设置动画终点位置 37 myView.center = (CGPoint){200,300}; 38 //设置动画执行完毕调用事件 39 [UIView setAnimationDidStopSelector:@selector(stopAnimation)]; 40 //执行动画 41 [UIView commitAnimations]; 42 43 } 44 45 - (void)startAnimation{ 46 47 NSLog(@"动画开始执行"); 48 49 } 50 51 - (void)stopAnimation{ 52 CGFloat x = myView.frame.origin.x; 53 CGFloat y = myView.frame.origin.y; 54 55 NSLog(@"动画执行完毕位置:(%f,%f)",x,y); 56 57 }
打印:
2、block动画
(1)+ (void)animateWithDuration:(NSTimeInterval)duration ——动画的持续时间
delay:(NSTimeInterval)delay ——动画延迟时间
options:(UIViewAnimationOptions)options ——动画的节奏控制
animations:(void (^)(void))animations ——将改变视图属性的代码放在这个block中
completion:(void (^)(BOOL finished))completion; ——动画结束后,会自动调用这个block
1 [UIView animateWithDuration:2 2 delay:1 3 options:UIViewAnimationOptionCurveEaseIn 4 animations:^{ 5 [UIView setAnimationCurve:UIViewAnimationCurveLinear]; 6 myView.center = (CGPoint){100,500}; 7 } completion:nil]; 8
(2) + (void)transitionWithView:(UIView *)view ——需要进行转场动画的视图
duration:(NSTimeInterval)duration ——动画的持续时间
options:(UIViewAnimationOptions)options ——转场动画的类型
animations:(void (^)(void))animations ——将改变视图属性的代码放在这个block中
completion:(void (^)(BOOL finished))completion; ——动画结束后,会自动调用这个block
1 [UIView transitionWithView:myView 2 duration:2 3 options:UIViewAnimationOptionShowHideTransitionViews 4 animations:^{ 5 [UIView setAnimationCurve:UIViewAnimationCurveLinear]; 6 myView.center = (CGPoint){100,500}; 7 } 8 completion:nil];
(3) + (void)transitionFromView:(UIView *)fromView ——把fromView从父视图中移除([fromView.superview removeFromSuperview];)
toView:(UIView *)toView ——添加toView到父视图([fromView.superview addSubview:toView];)
duration:(NSTimeInterval)duration ——动画的持续时间
options:(UIViewAnimationOptions)options ——转场动画的类型
completion:(void (^)(BOOL finished))completion; ——动画结束后,会自动调用这个block;
1 [UIView transitionFromView:myView 2 toView:myView 3 duration:2 4 options:UIViewAnimationOptionShowHideTransitionViews 5 completion:nil];
options枚举:
正文:
UIViewAnimationOptionLayoutSubviews //提交动画的时候布局子控件,表示子控件将和父控件一同动画。
UIViewAnimationOptionAllowUserInteraction //动画时允许用户交流,比如触摸
UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画
UIViewAnimationOptionRepeat //动画无限重复
UIViewAnimationOptionAutoreverse //执行动画回路,前提是设置动画无限重复
UIViewAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间
UIViewAnimationOptionOverrideInheritedCurve //忽略外层动画嵌套的时间变化曲线
UIViewAnimationOptionAllowAnimatedContent //通过改变属性和重绘实现动画效果,如果key没有提交动画将使用快照
UIViewAnimationOptionShowHideTransitionViews //用显隐的方式替代添加移除图层的动画效果
UIViewAnimationOptionOverrideInheritedOptions //忽略嵌套继承的选项
时间函数曲线相关:
UIViewAnimationOptionCurveEaseInOut //时间曲线函数,由慢到快
UIViewAnimationOptionCurveEaseIn //时间曲线函数,由慢到特别快
UIViewAnimationOptionCurveEaseOut //时间曲线函数,由快到慢
UIViewAnimationOptionCurveLinear //时间曲线函数,匀速
转场动画相关:
UIViewAnimationOptionTransitionNone //无转场动画
UIViewAnimationOptionTransitionFlipFromLeft //转场从左翻转
UIViewAnimationOptionTransitionFlipFromRight //转场从右翻转
UIViewAnimationOptionTransitionCurlUp //上卷转场
UIViewAnimationOptionTransitionCurlDown //下卷转场
UIViewAnimationOptionTransitionCrossDissolve //转场交叉消失
UIViewAnimationOptionTransitionFlipFromTop //转场从上翻转
UIViewAnimationOptionTransitionFlipFromBottom //转场从下翻转
3、UIImageView的帧动画
UIImageView可以让一系列的图片在特定的时间内按顺序显示。
相关属性:
animationImages:要显示的图片(一个装着UIImage的NSArray)
animationDuration:完整地显示一次animationImages中的所有图片所需的时间
animationRepeatCount:动画的执行次数(默认为0,代表无限循环)
相关方法:
- (void)startAnimating; 开始动画
- (void)stopAnimating; 停止动画
- (BOOL)isAnimating; 是否正在运行动画
Core Animation,中文翻译为核心动画,它是直接作用在CALayer
上的,并非UIView。
CALayer的基本属性:
CGRect bounds:宽度和高度
CGPoint anchorPoint:锚点(x,y的范围都是0-1,默认值为(0.5, 0.5))
CGPoint position:位置(默认指中点,具体由anchorPoint决定)
CGColorRef backgroundColor:背景颜色(CGColorRef类型)
CATransform3D transform:形变属性
1、CABasicAnimation
创建CABasicAnimation 时,需要通过-setFromValue 和-setToValue 来指定一个开始值和结束值;当增加基础动画到层中的时候,它开始运行。
常见属性
Autoreverses:动画结束时是否执行逆动画
timingFunction:设定动画的速度变化beginTime:指定动画开始时间(从开始指定延迟几秒执行的话,应设置为「CACurrentMediaTime() + 秒数」的形式)
repeatCount:重复次数
duration:动画时长(秒为单位)
fromValue:开始值
toValue:终了值(絶対値)
byValue:终了值(相对值)
实例:
(1)移动动画
1 #import "ViewController.h" 2 3 @interface ViewController (){ 4 UIView *myView; 5 6 CABasicAnimation *moveAnimation; 7 } 8 9 @end 10 11 @implementation ViewController 12 13 - (void)viewDidLoad { 14 [super viewDidLoad]; 15 // Do any additional setup after loading the view, typically from a nib. 16 myView = [[UIView alloc] initWithFrame:(CGRect){20,20,100,100}]; 17 myView.backgroundColor = [UIColor blueColor]; 18 [self.view addSubview:myView]; 19 20 //移动 21 moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"]; 22 //持续时间 23 moveAnimation.duration = 2; 24 //重复次数 25 moveAnimation.repeatCount = 2; 26 27 //起始帧和终了帧的设定 28 moveAnimation.fromValue = [NSValue valueWithCGPoint:(CGPoint){50,50}]; 29 moveAnimation.toValue = [NSValue valueWithCGPoint:(CGPoint){50,400}]; 30 31 //添加动画 32 [myView.layer addAnimation:moveAnimation forKey:@"moveAnimation"]; 33 34 35 }
(2)旋转动画
1 @interface ViewController (){ 2 UIView *myView; 3 4 CABasicAnimation *rotationAnimation; 5 } 6 7 @end 8 9 @implementation ViewController 10 11 - (void)viewDidLoad { 12 [super viewDidLoad]; 13 // Do any additional setup after loading the view, typically from a nib. 14 myView = [[UIView alloc] initWithFrame:(CGRect){20,20,100,100}]; 15 myView.backgroundColor = [UIColor blueColor]; 16 [self.view addSubview:myView]; 17 18 //旋转(绕X轴方向旋转) 19 rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"]; 20 //持续时间 21 rotationAnimation.duration = 2; 22 //重复次数 23 rotationAnimation.repeatCount = 2; 24 25 //起始帧和终了帧的设定 26 rotationAnimation.fromValue = [NSNumber numberWithFloat:0];//开始时的角度 27 rotationAnimation.toValue = [NSNumber numberWithFloat:60 * M_PI]; // 结束时的角度 28 29 30 //添加动画 31 [myView.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"]; 32 33 34 }
UIBezierPath绘制结合Animation,(类似于刷新时会转的小圈圈。。。)
demo(分两步):
1、绘制
1 #import <UIKit/UIKit.h> 2 3 @interface Draw : UIView 4 5 @end 6 7 8 9 #import "Draw.h" 10 #define PI 3.1415926535898 11 12 @interface Draw (){ 13 UIBezierPath *path; 14 } 15 16 @end 17 18 @implementation Draw 19 20 21 - (id)initWithFrame:(CGRect)frame{ 22 23 self = [super initWithFrame:frame]; 24 if (self) { 25 self.backgroundColor = [UIColor whiteColor]; 26 } 27 return self; 28 } 29 30 31 // Only override drawRect: if you perform custom drawing. 32 // An empty implementation adversely affects performance during animation. 33 - (void)drawRect:(CGRect)rect { 34 // Drawing code 35 36 UIColor *color = [UIColor orangeColor]; 37 [color set]; 38 39 path = [UIBezierPath bezierPathWithArcCenter:(CGPoint){100,100} radius:50 startAngle:0 endAngle:0.125*PI clockwise:NO]; 40 path.lineWidth = 3; 41 path.lineCapStyle = kCGLineCapRound; 42 path.lineJoinStyle = kCGLineJoinRound; 43 44 [path stroke]; 45 }
2、动画
1 #import "ViewController.h" 2 #import "Draw.h" 3 4 #define PI 3.1415926535898 5 6 @interface ViewController (){ 7 8 Draw *draw; 9 CABasicAnimation *arcAnimation; 10 11 } 12 13 @implementation ViewController 14 15 - (void)viewDidLoad { 16 [super viewDidLoad]; 17 // Do any additional setup after loading the view, typically from a nib. 18 19 draw = [[Draw alloc] initWithFrame:(CGRect){0,0,200,200}]; 20 [self.view addSubview:draw]; 21 22 arcAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; 23 arcAnimation.toValue = [NSNumber numberWithFloat:2*PI]; 24 arcAnimation.duration = 1; 25 arcAnimation.repeatCount = MAXFLOAT; 26 [draw.layer addAnimation:arcAnimation forKey:@"rotationAnimation"]; 27 28 }
效果图:(好吧,其实它是会转的,只不过我不会截gif图。。。)
(3)组合动画
1 #import "ViewController.h" 2 3 @interface ViewController (){ 4 5 UIView *myView; 6 UIView *cirleView; 7 8 CABasicAnimation *moveAnimation; 9 CABasicAnimation *rotationAnimation; 10 CAAnimationGroup *animationGroup; 11 } 12 13 @end 14 15 @implementation ViewController 16 17 - (void)viewDidLoad { 18 [super viewDidLoad]; 19 // Do any additional setup after loading the view, typically from a nib. 20 21 myView = [[UIView alloc] initWithFrame:(CGRect){20,20,100,100}]; 22 myView.backgroundColor = [UIColor blueColor]; 23 [self.view addSubview:myView]; 24 25 cirleView = [[UIView alloc] initWithFrame:(CGRect){0,100,100,100}]; 26 cirleView.layer.cornerRadius = 50; 27 cirleView.backgroundColor = [UIColor orangeColor]; 28 [myView addSubview:cirleView]; 29 30 //移动 31 moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"]; 32 33 //起始帧和终了帧的设定 34 moveAnimation.fromValue = [NSValue valueWithCGPoint:(CGPoint){50,50}]; 35 moveAnimation.toValue = [NSValue valueWithCGPoint:(CGPoint){50,300}]; 36 37 //旋转 38 rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"]; 39 40 //起始帧和终了帧的设定 41 rotationAnimation.fromValue = [NSNumber numberWithFloat:0];//开始时的角度 42 rotationAnimation.toValue = [NSNumber numberWithFloat:60 * M_PI]; // 结束时的角度 43 44 animationGroup = [CAAnimationGroup animation]; 45 46 //持续时间 47 animationGroup.duration = 2; 48 //重复次数 49 animationGroup.repeatCount = 2; 50 //添加动画 51 animationGroup.animations = @[moveAnimation,rotationAnimation]; 52 [myView.layer addAnimation:animationGroup forKey:@"move-rotation-group"]; 53 54 }
好吧,至于这章为什么都没有效果图。。因为我不会弄gif图,等我会弄了会补上的。。。。
ios基础篇(二十五)—— Animation动画(UIView、CoreAnimation)
原文:http://www.cnblogs.com/0320y/p/5091868.html