Core Animation 核心动画

发表于 | 阅读次数

1、position anchorPoint

CALayer有2个非常重要的属性：position和anchorPoint

@property CGPoint position;

用来设置CALayer在父层中的位置
以父层的左上角为原点(0, 0)

@property CGPoint anchorPoint;

称为“定位点”、“锚点”
决定着CALayer身上的哪个点会在position属性所指的位置
以自己的左上角为原点(0, 0)
它的x、y取值范围都是0~1，默认值为（0.5, 0.5），意味着锚点在layer的中间
锚点所指的点就是position的位置

2、CATransform3DMakeRotation(angle, x, y, z)

x、y、z的取值范围是[0,1]
设置了之后layer就会以原点与(x,y,z)的线为轴旋转angle的角度

3、CABasicAnimation

fillMode的作用就是决定当前对象过了非active时间段的行为. 比如动画开始之前,动画结束之后。如果是一个动画CAAnimation,则需要将其removedOnCompletion设置为NO,要不然fillMode不起作用.

各个fillMode的意义
kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态
kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态
kCAFillModeBackwards 这个和kCAFillModeForwards是相对的,就是在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始.你可以这样设定测试代码,将一个动画加入一个layer的时候延迟5秒执行.然后就会发现在动画没有开始的时候,只要动画被加入了layer,layer便处于动画初始状态
kCAFillModeBoth 理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 创建动画对象
CABasicAnimation *anim = [CABasicAnimation animation];
    
// 设置动画的属性
anim.keyPath = @"transform.scale";
    
// 设置属性改变的值
anim.toValue = @0.5;
    
// 设置动画时长
anim.duration = 0.25;
    
// 取消反弹
// 动画执行完毕之后不要把动画移除
anim.removedOnCompletion = NO;
    
// 保持最新的位置
anim.fillMode = kCAFillModeForwards;
    
// 重复动画的次数
anim.repeatCount = MAXFLOAT;
    
// 给图层添加了动画
[_layer addAnimation:anim forKey:nil];

4、CAKeyframeAnimation

a、设置几个点，在这几个点之间的动画 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 设置动画属性
anim.keyPath = @"position";
    
NSValue *v1 = [NSValue valueWithCGPoint:CGPointZero];
    
NSValue *v2 = [NSValue valueWithCGPoint:CGPointMake(160, 160)];
    
NSValue *v3 = [NSValue valueWithCGPoint:CGPointMake(270, 0)];
    
anim.values = @[v1,v2,v3];
    
anim.duration = 2;
    
[_redView.layer addAnimation:anim forKey:nil];

b、沿着路径动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    
// 设置动画属性
anim.keyPath = @"position";
    
    
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];
    
anim.path = path.CGPath;
    
anim.duration = 0.25;
    
// 取消反弹
anim.removedOnCompletion = NO;
    
anim.fillMode = kCAFillModeForwards;
    
anim.repeatCount = MAXFLOAT;
    
[_redView.layer addAnimation:anim forKey:nil];

5、CATransition 转场动画

1
2
3
4
5
6
7
8
9
10
CATransition *anim = [CATransition animation];
    
anim.type = @"pageCurl";
    
anim.subtype = kCATransitionFromLeft;
//anim.startProgress = 0.5;
    
anim.duration = 2;
    
[_imageView.layer addAnimation:anim forKey:nil];

6、CAAnimationGroup 动画组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
CABasicAnimation *rotation = [CABasicAnimation animation];
    
rotation.keyPath = @"transform.rotation";
    
rotation.toValue = @M_PI_2;
    
CABasicAnimation *position = [CABasicAnimation animation];
    
position.keyPath = @"position";
    
position.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 250)];
    
CABasicAnimation *scale = [CABasicAnimation animation];
    
scale.keyPath = @"transform.scale";
    
scale.toValue = @0.5;
 
    
CAAnimationGroup *group = [CAAnimationGroup animation];
    
group.animations = @[rotation,position,scale];
    
group.duration = 2;
    
// 取消反弹
group.removedOnCompletion = NO;
group.fillMode = kCAFillModeForwards;
    
[_redView.layer addAnimation:group forKey:nil];