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

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:

 #import "ViewController.h"

 @interface ViewController (){
UIView *myView; } @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib. myView = [[UIView alloc] initWithFrame:(CGRect){,,,}];
myView.backgroundColor = [UIColor blueColor];
[self.view addSubview:myView]; //准备动画 参数1: 动画的作用, 任意字符串,用来区分多个动画;参数二: 传递参数
[UIView beginAnimations:nil context:nil];
//动画持续时间
[UIView setAnimationDuration:];
//设置代理
[UIView setAnimationDelegate:self]; //设置动画开始执行调用事件
[UIView setAnimationWillStartSelector:@selector(startAnimation)]; //动画曲线
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
//动画重复次数
[UIView setAnimationRepeatCount:];
//是否往返执行
[UIView setAnimationRepeatAutoreverses:YES];
//设置动画终点位置
myView.center = (CGPoint){,};
//设置动画执行完毕调用事件
[UIView setAnimationDidStopSelector:@selector(stopAnimation)];
//执行动画
[UIView commitAnimations]; } - (void)startAnimation{ NSLog(@"动画开始执行"); } - (void)stopAnimation{
CGFloat x = myView.frame.origin.x;
CGFloat y = myView.frame.origin.y; NSLog(@"动画执行完毕位置:(%f,%f)",x,y); }

打印:

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

2、block动画

(1)+ (void)animateWithDuration:(NSTimeInterval)duration ——动画的持续时间

                delay:(NSTimeInterval)delay ——动画延迟时间

               options:(UIViewAnimationOptions)options ——动画的节奏控制

             animations:(void (^)(void))animations ——将改变视图属性的代码放在这个block中

              completion:(void (^)(BOOL finished))completion; ——动画结束后,会自动调用这个block

 [UIView animateWithDuration:
delay:
options:UIViewAnimationOptionCurveEaseIn
animations:^{
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
myView.center = (CGPoint){,};
} completion:nil];

(2)  + (void)transitionWithView:(UIView *)view ——需要进行转场动画的视图

            duration:(NSTimeInterval)duration ——动画的持续时间

             options:(UIViewAnimationOptions)options ——转场动画的类型

           animations:(void (^)(void))animations ——将改变视图属性的代码放在这个block中

            completion:(void (^)(BOOL finished))completion; ——动画结束后,会自动调用这个block

     [UIView transitionWithView:myView
duration:
options:UIViewAnimationOptionShowHideTransitionViews
animations:^{
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
myView.center = (CGPoint){,};
}
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;

     [UIView transitionFromView:myView
toView:myView
duration:
options:UIViewAnimationOptionShowHideTransitionViews
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)移动动画

 #import "ViewController.h"

 @interface ViewController (){
UIView *myView; CABasicAnimation *moveAnimation;
} @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
myView = [[UIView alloc] initWithFrame:(CGRect){,,,}];
myView.backgroundColor = [UIColor blueColor];
[self.view addSubview:myView]; //移动
moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
//持续时间
moveAnimation.duration = ;
//重复次数
moveAnimation.repeatCount = ; //起始帧和终了帧的设定
moveAnimation.fromValue = [NSValue valueWithCGPoint:(CGPoint){,}];
moveAnimation.toValue = [NSValue valueWithCGPoint:(CGPoint){,}]; //添加动画
[myView.layer addAnimation:moveAnimation forKey:@"moveAnimation"]; }

(2)旋转动画

 @interface ViewController (){
UIView *myView; CABasicAnimation *rotationAnimation;
} @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
myView = [[UIView alloc] initWithFrame:(CGRect){,,,}];
myView.backgroundColor = [UIColor blueColor];
[self.view addSubview:myView]; //旋转(绕X轴方向旋转)
rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
//持续时间
rotationAnimation.duration = ;
//重复次数
rotationAnimation.repeatCount = ; //起始帧和终了帧的设定
rotationAnimation.fromValue = [NSNumber numberWithFloat:];//开始时的角度
rotationAnimation.toValue = [NSNumber numberWithFloat: * M_PI]; // 结束时的角度 //添加动画
[myView.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"]; }

UIBezierPath绘制结合Animation,(类似于刷新时会转的小圈圈。。。)

demo(分两步):

1、绘制

 #import <UIKit/UIKit.h>

 @interface Draw : UIView

 @end

 #import "Draw.h"
#define PI 3.1415926535898 @interface Draw (){
UIBezierPath *path;
} @end @implementation Draw - (id)initWithFrame:(CGRect)frame{ self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor whiteColor];
}
return self;
} // Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code UIColor *color = [UIColor orangeColor];
[color set]; path = [UIBezierPath bezierPathWithArcCenter:(CGPoint){,} radius: startAngle: endAngle:0.125*PI clockwise:NO];
path.lineWidth = ;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineJoinRound; [path stroke];
}

2、动画

 #import "ViewController.h"
#import "Draw.h" #define PI 3.1415926535898 @interface ViewController (){ Draw *draw;
CABasicAnimation *arcAnimation; } @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib. draw = [[Draw alloc] initWithFrame:(CGRect){,,,}];
[self.view addSubview:draw]; arcAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
arcAnimation.toValue = [NSNumber numberWithFloat:*PI];
arcAnimation.duration = ;
arcAnimation.repeatCount = MAXFLOAT;
[draw.layer addAnimation:arcAnimation forKey:@"rotationAnimation"]; }

效果图:(好吧,其实它是会转的,只不过我不会截gif图。。。)

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

(3)组合动画

 #import "ViewController.h"

 @interface ViewController (){

     UIView *myView;
UIView *cirleView; CABasicAnimation *moveAnimation;
CABasicAnimation *rotationAnimation;
CAAnimationGroup *animationGroup;
} @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib. myView = [[UIView alloc] initWithFrame:(CGRect){,,,}];
myView.backgroundColor = [UIColor blueColor];
[self.view addSubview:myView]; cirleView = [[UIView alloc] initWithFrame:(CGRect){,,,}];
cirleView.layer.cornerRadius = ;
cirleView.backgroundColor = [UIColor orangeColor];
[myView addSubview:cirleView]; //移动
moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"]; //起始帧和终了帧的设定
moveAnimation.fromValue = [NSValue valueWithCGPoint:(CGPoint){,}];
moveAnimation.toValue = [NSValue valueWithCGPoint:(CGPoint){,}]; //旋转
rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"]; //起始帧和终了帧的设定
rotationAnimation.fromValue = [NSNumber numberWithFloat:];//开始时的角度
rotationAnimation.toValue = [NSNumber numberWithFloat: * M_PI]; // 结束时的角度 animationGroup = [CAAnimationGroup animation]; //持续时间
animationGroup.duration = ;
//重复次数
animationGroup.repeatCount = ;
//添加动画
animationGroup.animations = @[moveAnimation,rotationAnimation];
[myView.layer addAnimation:animationGroup forKey:@"move-rotation-group"]; }

好吧,至于这章为什么都没有效果图。。因为我不会弄gif图,等我会弄了会补上的。。。。 

 

上一篇:阮一峰:MVC、MVP和MVVM的图示


下一篇:IRP 与 派遣函数