首页 > 移动平台 > 详细

ios基础篇(二十五)—— Animation动画(UIView、CoreAnimation)

时间:2015-12-31 19:07:59      阅读:311      评论:0      收藏:0      [点我收藏+]

Animation主要分为两类:

1、UIView属性动画

2、CoreAnimation动画

一、UIView属性动画

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;  是否正在运行动画

 

二、CoreAnimation动画

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!