前言：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<UITouch *> *)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<UITouch *> *)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 ()<CAAnimationDelegate>
@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<UITouch *> *)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);
}
