【Objective-c】动画学习笔记(三)_CABasicAnimation

前言：iOS与MacOS的坐标系不同，iOS使用的是左手坐标系，坐标原点是在左上角，MacOS 使用的是右手坐标系，原点是在左下角。

---

简单的动画实现：矩形平移动画

- (void)viewDidLoad {
    [super viewDidLoad];
    //1.创建一个layer
    CALayer *mylayer = [CALayer layer];
    //2.设置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;
    //3.添加layer
    [self.view.layer addSublayer:mylayer];
    self.mylayer = mylayer;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    //1.创建核心动画（剧本）
    CABasicAnimation *anima = [CABasicAnimation animation];
    //  设置剧本具体动画内容
    //  设置layer的position属性，即平移
    anima.keyPath = @"position";
    anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
    anima.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 300)];
    //   设置动画执行完毕之后不删除动画
    anima.removedOnCompletion = NO;
    //   设置保存动画的最新状态
    anima.fillMode = kCAFillModeForwards;
    
    //2.添加核心动画到layer（执行剧本）
    [self.mylayer addAnimation:anima forKey:nil];

}

这里有一个重要的知识点：position和anchorPoint，不懂的可以浏览这篇博客大头青年，瞬间秒懂。这里就简单讲讲我的理解：一个layer的位置frame是由position和anchorPoint共同决定的（不管layer之前的frame是多少都没有影响）只要有一个改变了，那么layer的位置就会改变。第二了就是position和anchorPoint是不同坐标系的重合点，即指同一个点。

监听动画的执行过程，设置代理
在上方代码的基础上添加代理

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    //1.创建核心动画（剧本）
    CABasicAnimation *anima = [CABasicAnimation animation];
    //  设置剧本具体动画内容
    //  设置layer的position属性，即平移
    anima.keyPath = @"position";
    anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
    anima.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 300)];
    //   设置动画执行完毕之后不删除动画
    anima.removedOnCompletion = NO;
    //   设置保存动画的最新状态
    anima.fillMode = kCAFillModeForwards;
    //    设置代理
    anima.delegate = self;
    NSString *str = NSStringFromCGPoint(self.myLayer.position);
    NSLog(@"执行前：%@",str);

    //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);
}
/*
 输出结果： 
**2016-12-01 23:50:47.172 CAPropertyAnimationDemo[2829:99758] ****动画执行前：****{50, 50}**
**2016-12-01 23:50:47.173 CAPropertyAnimationDemo[2829:99758] ****动画开始执行了**
**2016-12-01 23:50:47.423 CAPropertyAnimationDemo[2829:99758] ****动画执行后：****{50, 50}**
*/

从上面的例子得出：即使保持了图层在执行完动画后的状态，但是实质上图层的属性值还是动画执行前的初始值，并没有真正被改动。如上例中的position

CABasicAnimation 还有一组重要的属性：autoreverses 和 repeatCount 。autoreverses 是否自动逆向执行动画到原先状态，执行时间与正向动画持续时间一致。repeatCount 是否重复动画。这两个属性默认值是NO。

平移、缩放、旋转

#import "ViewController.h"
@interface ViewController ()

@property (nonatomic,strong) CALayer *mylayer;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //1.创建一个layer
    CALayer *mylayer = [CALayer layer];
    //2.设置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;
    //3.添加layer
    [self.view.layer addSublayer:mylayer];
    self.mylayer = mylayer;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
//    [self keyPathWithPositionAnimation];
//    [self keyPathWithBoundsAnimation];
//    [self keyPathWithTransformAnimation];
    [self positionByTransformAnimation];
}

#pragma mark - 平移动画
- (void)keyPathWithPositionAnimation{
    //1.创建核心动画（剧本）
    CABasicAnimation *anima = [CABasicAnimation animation];
    //  设置剧本具体动画内容
    //  设置layer的position属性，即平移
    //  注意：如果没有设置起始位置"fromValue"的值，那么会从当前位置开始
    anima.keyPath = @"position";
    anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
    anima.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 300)];
    anima.duration = 2;
    //   设置动画执行完毕之后不删除动画
    anima.removedOnCompletion = NO;
    //   设置保存动画的最新状态
    anima.fillMode = kCAFillModeForwards;
    anima.delegate = self;
    NSString *string = NSStringFromCGRect(self.mylayer.frame);
    NSLog(@"动画执行前：%@",string);
    
    //2.添加核心动画到layer（执行剧本）
    [self.mylayer addAnimation:anima forKey:nil];
}

#pragma mark - 缩放
- (void)keyPathWithBoundsAnimation{
    //1.创建动画
    CABasicAnimation *anima = [CABasicAnimation animation];
    anima.keyPath = @"bounds";
    //1.1设置动画执行时间
    anima.duration = 2.0;
    //1.2设置保存动画的最新状态
    anima.removedOnCompletion = NO;
    anima.fillMode = kCAFillModeForwards;
    //1.3修改属性,执行动画
    anima.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
    //2.0添加动画到layer
    [self.mylayer addAnimation:anima forKey:nil];
}

#pragma mark - 旋转
- (void)keyPathWithTransformAnimation{
    CABasicAnimation *anima = [CABasicAnimation animation];
    anima.keyPath = @"transform";
    anima.duration = 2.0;
    anima.removedOnCompletion = NO;
    anima.fillMode = kCAFillModeForwards;
    anima.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2+M_PI_4, 1, 1, 0)];
    [self.mylayer addAnimation:anima forKey:nil];
}

#pragma mark - 平移的第二种方式
- (void)positionByTransformAnimation{
    CABasicAnimation *anima = [CABasicAnimation animation];
    anima.keyPath = @"transform";
    anima.duration = 2.0;
    anima.removedOnCompletion = NO;
    anima.fillMode = kCAFillModeForwards;
    
    anima.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeTranslation(0, 100, 1)];
    
    [self.mylayer addAnimation:anima forKey:nil];
}

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

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    NSString *string = NSStringFromCGRect(self.mylayer.frame);
    NSLog(@"动画执行后：%@",string);
}

完整Demo