Core Animation

最新推荐文章于 2025-05-24 17:26:17 发布

yaoliangjun306

最新推荐文章于 2025-05-24 17:26:17 发布

阅读量450

点赞数

分类专栏： CoreAnimation

CoreAnimation 专栏收录该内容

2 篇文章

订阅专栏

本文深入解析了CoreAnimation框架，介绍如何使用CAAnimation制作动画效果，包括初始化动画对象、添加动画到层以及执行动画的过程。详细解释了CALayer支持的动画属性、CAAnimation的继承结构及各子类的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Core Animation

Core Animation是一组非常强大的动画处理API，使用它能做出非常炫丽的动画效果，而且往往是事半功倍
使用步骤:
1. 初始化一个动画对象(CAAnimation)并设置一些动画相关属性
2. 添加动画对象到层(CALayer)中
3. 开始执行动画
CALayer中很多属性都可以通过CAAnimation实现动画效果
包括：opacity、position、transform、bounds、contents等(可以在API文档中搜索：CALayer Animatable Properties)
通过调用CALayer的addAnimation:forKey增加动画到层(CALayer)中，这样就能触发动画了。
通过调用removeAnimationForKey可以停止层中的动画
Core Animation的动画执行过程都是在后台操作的，不会阻塞主线程

CAAnimation继承结构

这里写图片描述

CAAnimation

它是所有动画对象的父类，负责控制动画的持续时间和速度，是个抽象类，不能直接使用，应该使用它具体的子类
属性：
duration：动画的持续时间

repeatCount：动画的重复次数

repeatDuration：动画的重复时间

removedOnCompletion：默认为YES，代表动画执行完毕后就从图层上移除，图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态，那就设置为NO，不过还要设置fillMode为kCAFillModeForwards

fillMode：决定当前对象在非active时间段的行为.比如动画开始之前,动画结束之后

beginTime：可以用来设置动画延迟执行时间，若想延迟2s，就设置为CACurrentMediaTime()+2，CACurrentMediaTime()为图层的当前时间

timingFunction：速度控制函数，控制动画运行的节奏

timingFunction可选的值有：
kCAMediaTimingFunctionLinear（线性）：匀速，给你一个相对静态的感觉
kCAMediaTimingFunctionEaseIn（渐进）：动画缓慢进入，然后加速离开
kCAMediaTimingFunctionEaseOut（渐出）：动画全速进入，然后减速的到达目的地
kCAMediaTimingFunctionEaseInEaseOut（渐进渐出）：动画缓慢的进入，中间加速，然后减速的到达目的地。这个是默认的动画行为。

delegate：动画代理

 @interface NSObject (CAAnimationDelegate)

 // 动画开始执行的时候触发这个方法
 - (void)animationDidStart:(CAAnimation *)anim;

 // 动画执行完毕的时候触发这个方法
 - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;

 @end

CAPropertyAnimation

它是CAAnimation的子类，也是个抽象类，要想创建动画对象，应该使用它的两个子类：CABasicAnimation和CAKeyframeAnimation
属性：
keyPath：通过指定CALayer的一个属性名称为keyPath(NSString类型)，并且对CALayer的这个属性的值进行修改，达到相应的动画效果。比如，指定@”position”为keyPath，就修改CALayer的position属性的值，以达到平移的动画效果

CABasicAnimation

它是CAPropertyAnimation的子类
属性:
fromValue：keyPath相应属性的初始值

toValue：keyPath相应属性的结束值

随着动画的进行，在长度为duration的持续时间内，keyPath相应属性的值从fromValue渐渐地变为toValue
如果fillMode=kCAFillModeForwards和removedOnComletion=NO，那么在动画执行完毕后，图层会保持显示动画执行后的状态。但在实质上，图层的属性值还是动画执行前的初始值，并没有真正被改变。比如，CALayer的position初始值为(0,0)，CABasicAnimation的fromValue为(10,10)，toValue为(100,100)，虽然动画执行完毕后图层保持在(100,100)这个位置，实质上图层的position还是为(0,0)

CABasicAnimation用法

 1 // 说明这个动画对象要对CALayer的position属性执行动画
 2 CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"position"];
 3 // 动画持续1.5s
 4 anim.duration = 1.5; 
 5 
 6 // position属性值从(50, 80)渐变到(300, 350)
 7 anim.fromValue = [NSValue valueWithCGPoint:CGPointMake(50, 80)];
 8 anim.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 350)];
 9 
10 // 设置动画的代理
11 anim.delegate = self;
12 
13 // 保持动画执行后的状态
14 anim.removedOnCompletion = NO;
15 anim.fillMode = kCAFillModeForwards;
16 
17 // 添加动画对象到图层上
18 [_myView.layer addAnimation:anim forKey:@"translate"];

第2行设置的keyPath是@”position”，说明要修改的是CALayer的position属性，也就是会执行平移动画

注意第7、8行，这里并不是直接使用CGPoint这种结构体类型，而是要先包装成NSValue对象后再使用。这2行代码表示CALayer从位置(50, 80)移动到位置(300, 350)
如果将第8行的toValue换成byValue，代表CALayer从位置(50, 80)开始向右移动300、向下移动350，也就是移动到位置(350, 430)
默认情况下，动画执行完毕后，动画会自动从CALayer上移除，CALayer又会回到原来的状态。为了保持动画执行后的状态，可以加入第14、15行代码
第18行后面的@”translate”是给动画对象起个名称，以后可以调用CALayer的removeAnimationForKey:方法根据动画名称停止相应的动画

CAKeyframeAnimation

它是CApropertyAnimation的子类，跟CABasicAnimation的区别是：CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue)，而CAKeyframeAnimation会使用一个NSArray保存这些数值
属性：
values：就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内，依次显示values数组中的每一个关键帧

path：可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path，那么values将被忽略

keyTimes：可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的
CABasicAnimation可看做是最多只有2个关键帧的CAKeyframeAnimation

CAKeyframeAnimation用法

#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
#define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height

@interface ViewController ()
@property (strong, nonatomic) IBOutlet UIView *redView;
@property (strong, nonatomic) IBOutlet UIView *blackView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
//    [self test1];
    [self test2];
}

// 修改位置:按“已”子路线走
- (void)test1
{
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];

    animation.keyPath = @"position";
    NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(50, 50)];
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH - 50, 50)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH - 50, 150)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(50, 150)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(50, 250)];
    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH - 50, 250)];

    animation.values = @[value0, value1, value2, value3, value4, value5];
    animation.duration = 4;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;

    [self.redView.layer addAnimation:animation forKey:nil];
}

// 抖动效果
- (void)test2
{
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];

    animation.keyPath = @"position";

    NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(self.blackView.center.x + 5, self.blackView.center.y)];
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(self.blackView.center.x, self.blackView.center.y)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(self.blackView.center.x - 5, self.blackView.center.y)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(self.blackView.center.x, self.blackView.center.y)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(self.blackView.center.x + 5, self.blackView.center.y)];
    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(self.blackView.center.x, self.blackView.center.y)];

    animation.values = @[value0, value1, value2, value3, value4, value5];
    animation.duration = 0.1;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;

    [self.blackView.layer addAnimation:animation forKey:nil];
}

@end

CAAnimationGroup

它是CAAnimation的子类，可以保存一组动画对象，将CAAnimationGroup对象加入层后，组中所有动画对象可以同时并发运行
属性：
animations：用来保存一组动画对象的NSArray

默认情况下，一组动画对象是同时运行的，也可以通过设置动画对象的beginTime属性来更改动画的开始时间

CAAnimationGroup用法

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 1.创建旋转动画对象
    CABasicAnimation *rotate = [CABasicAnimation animation];
    rotate.keyPath = @"transform.rotation";
    rotate.toValue = @(M_PI);

    // 2.创建缩放动画对象
    CABasicAnimation *scale = [CABasicAnimation animation];
    scale.keyPath = @"transform.scale";
    scale.toValue = @(0.0);

    // 3.平移动画
    CABasicAnimation *move = [CABasicAnimation animation];
    move.keyPath = @"transform.translation";
    move.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];

    // 4.将所有的动画添加到动画组中
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = @[rotate, scale, move];
    group.duration = 2.0;
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeForwards;

    [self.myvie.layer addAnimation:group forKey:nil];
}

CATransition

它是CAAnimation的子类，用于做转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。iOS比Mac OS X的转场动画效果少一点
UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果
属性:
type：动画过渡类型

subtype：动画过渡方向

startProgress：动画起点(在整体动画的百分比)

endProgress：动画终点(在整体动画的百分比)

CATransition用法

// 下一页
- (void)next:(UIButton *)btn
{
    if (_index == 9) {
        _index = 0;
    }
    NSString *imageName = [NSString stringWithFormat:@"%d.jpg", ++_index];
    self.pictureView.image = [UIImage imageNamed:imageName];

    // 转场动画
    CATransition *animation = [CATransition animation];
    animation.duration = 0.5;
    animation.type = @"push";
    animation.subtype = kCATransitionFromRight;
    [self.pictureView.layer addAnimation:animation forKey:nil];

    // type值有：
//    pageCurl            向上翻一页
//    pageUnCurl          向下翻一页
//    rippleEffect        滴水效果
//    suckEffect          收缩效果，如一块布被抽走
//    cube                立方体效果
//    oglFlip             上下翻转效果

}