首页 > 技术文章 > OC动画——基础动画CABasicAnimation使用

xiao-love-meng 2016-08-30 09:33 原文

在使用CABasicAnimation基本动画之前,先用简单的篇幅来介绍下动画Core Animation——直接作用在CALayer上的(并非UIView上)非常强大的跨Mac OS X和iOS平台的动画处理API。另外,Core Animation的动画执行过程都是在后台操作的,不会阻塞主线程。

一、Core Animation使用步骤

在正式上代码之前,先简要的说下使用Core Animation动画的常规步骤:

1.添加QuartzCore.framework框架和引入主头文件(iOS7不需要)

2.初始化CAAnimation对象,并设置一些动画相关属性

3.调用CALayer的addAnimation:forKey:方法增加CAAnimation对象到CALayer中,执行动画

4.调用CALayer的removeAnimationForKey:方法停止CALayer中的动画

那么在第二步中提及的CAAnimation又是何方神圣呢?接着往下......

二、CAAnimation简介

从上图可以看出,CAAnimation是所有动画类的父类,但是我们不能直接使用这个父类,而应该使用它的子类——CABasicAnimation、CAKeyframeAnimation、CATransition、CAAnimationGroup。

三、CABasicAnimation使用

先看下代码中将要设置的几个属性:

keyPath:执行动画的种类——平移、旋转、缩放等

fromValue:keyPath相应属性的初始值

toValue:keyPath相应属性的结束值

duration:动画持续时间

fillMode=kCAFillModeForwards和removedOnComletion=NO,这两个属性通常一起设置,使得在动画执行完毕后,图层会保持显示动画执行后的状态。在这里需要特别注意下,这个时候图层的属性值还是动画执行前的初始值,并没有真正被改变。比如,CALayer的position初始值为(0,0),CABasicAnimation的fromValue为(10,10),toValue为(100,100),虽然动画执行完毕后图层保持在(100,100)这个位置,实质上图层的position还是为(0,0)

下面上代码

1.平移动画

#import "GJViewController.h"

@interface GJViewController ()
@property(nonatomic,strong)CALayer *myLayer;
@end

@implementation GJViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    //创建layer
    CALayer *myLayer=[CALayer layer];
    //设置layer的属性
    myLayer.bounds=CGRectMake(0, 0, 50, 80);
    myLayer.backgroundColor=[UIColor yellowColor].CGColor;
    myLayer.position=CGPointMake(50, 50);
    myLayer.anchorPoint=CGPointMake(0, 0);
    myLayer.cornerRadius=20;
    //添加layer
    [self.view.layer addSublayer:myLayer];
    self.myLayer=myLayer;
}

//设置动画(基础动画)
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //1.创建核心动画
    //CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:<#(NSString *)#>]
    CABasicAnimation *anima=[CABasicAnimation animation];

    //1.1告诉系统要执行什么样的动画
    anima.keyPath=@"position";
    //设置通过动画,将layer从哪儿移动到哪儿
    anima.fromValue=[NSValue valueWithCGPoint:CGPointMake(0, 0)];
    anima.toValue=[NSValue valueWithCGPoint:CGPointMake(200, 300)];

    //1.2设置动画执行完毕之后不删除动画
    anima.removedOnCompletion=NO;
    //1.3设置保存动画的最新状态
    anima.fillMode=kCAFillModeForwards;

    //设置代理
    anima.delegate=self;

    //2.添加核心动画到layer
    [self.myLayer addAnimation:anima forKey:nil];

}

-(void)animationDidStart:(CAAnimation *)anim
{
    NSLog(@"开始执行动画");
}

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    NSString *str=NSStringFromCGPoint(self.myLayer.position);
    NSLog(@"执行后:%@",str);
}

@end

2.缩放动画

#import "GJViewController.h"

@interface GJViewController ()
@property(nonatomic,strong)CALayer *myLayer;
@end

@implementation GJViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    //创建layer
    CALayer *myLayer=[CALayer layer];
    //设置layer的属性
    myLayer.bounds=CGRectMake(0, 0, 150, 60);
    myLayer.backgroundColor=[UIColor yellowColor].CGColor;
    myLayer.position=CGPointMake(50, 50);
    myLayer.anchorPoint=CGPointMake(0, 0);
    myLayer.cornerRadius=40;
    //添加layer
    [self.view.layer addSublayer:myLayer];
    self.myLayer=myLayer;
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //1.创建动画
    CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:@"bounds"];
    //1.1设置动画执行时间
    anima.duration=2.0;
    //1.2设置动画执行完毕后不删除动画
    anima.removedOnCompletion=NO;
    //1.3设置保存动画的最新状态
    anima.fillMode=kCAFillModeForwards;
    //1.4修改属性,执行动画
    anima.toValue=[NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
    //2.添加动画到layer
    [self.myLayer addAnimation:anima forKey:nil];
}

@end

3.旋转动画

#import "GJViewController.h"

@interface GJViewController ()
@property(nonatomic,strong)CALayer *myLayer;
@end

@implementation GJViewController
- (void)viewDidLoad
{
    [super viewDidLoad];

    //创建layer
    CALayer *myLayer=[CALayer layer];
    //设置layer的属性
    myLayer.bounds=CGRectMake(0, 0, 150, 60);
    myLayer.backgroundColor=[UIColor yellowColor].CGColor;
    myLayer.position=CGPointMake(50, 50);
    myLayer.anchorPoint=CGPointMake(0, 0);
    myLayer.cornerRadius=40;
    //添加layer
    [self.view.layer addSublayer:myLayer];
    self.myLayer=myLayer;
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //1.创建动画
    CABasicAnimation *anima=[CABasicAnimation animationWithKeyPath:@"transform"];
    //1.1设置动画执行时间
    anima.duration=2.0;
    //1.2修改属性,执行动画
    anima.toValue=[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2+M_PI_4, 1, 1, 0)];
    //1.3设置动画执行完毕后不删除动画
    anima.removedOnCompletion=NO;
    //1.4设置保存动画的最新状态
    anima.fillMode=kCAFillModeForwards;

    //2.添加动画到layer
    [self.myLayer addAnimation:anima forKey:nil];
}

@end

 

推荐阅读