首页 文章 精选 留言 我的

iOS - Core Animation 核心动画

2016-09-18 600

1、UIView 动画

2、UIImageView 动画

3、CADisplayLink 定时器

  • 具体讲解见 iOS - OC NSTimer 定时器

  • CADisplayLink 是一个能让我们以和屏幕刷新率相同的频率将内容画到屏幕上的定时器。我们在应用中创建一个新的 CADisplayLink 对象，把它添加到一个 runloop 中，并给它提供一个 target 和 selector 在屏幕刷新的时候调用。

  • CADisplayLink 使用场合相对专一，适合做 UI 的不停重绘，比如自定义动画引擎或者视频播放的渲染。NSTimer 的使用范围要广泛的多，各种需要单次或者循环定时处理的任务都可以使用。在 UI 相关的动画或者显示内容使用 CADisplayLink 比起用 NSTimer 的好处就是我们不需要再格外关心屏幕的刷新频率了，因为它本身就是跟屏幕刷新同步的。

4、CALayer 绘图层

  • 具体讲解见 iOS - CALayer 绘图层

  • 在 iOS 系统中，你能看得见摸得着的东西基本上都是 UIView，比如一个按钮、一个文本标签、一个文本输入框、一个图标等等，这些都是 UIView。其实 UIView 之所以能显示在屏幕上，完全是因为它内部的一个层。在创建 UIView 对象时，UIView 内部会自动创建一个层（即 CALayer 对象），通过 UIView 的 layer 属性可以访问这个层。当 UIView 需要显示到屏幕上时，会调用 drawRect: 方法进行绘图，并且会将所有内容绘制在自己的层上，绘图完毕后，系统会将层拷贝到屏幕上，于是就完成了 UIView 的显示。换句话说，UIView 本身不具备显示的功能，是它内部的层才有显示功能。

5、核心动画基本概念

  • Core Animation 中文翻译为核心动画，它是一组非常强大的动画处理 API，使用它能做出非常炫丽的动画效果，而且往往是事半功倍。也就是说，使用少量的代码就可以实现非常强大的功能。Core Animation 可以用在 macOS 和 iOS 平台。乔帮主在 2007 年的 WWDC 大会上亲自为你演示 Core Animation 的强大：点击查看视频。

  • Core Animation 的动画执行过程都是在后台操作的，不会阻塞主线程。

  • 要注意的是，Core Animation 是直接作用在 CALayer 上的，并非 UIView。

  • 核心动画 和 UIView 动画 的区别：

    • 核心动画一切都是假象，并不会真实的改变图层的属性值，如果以后做动画的时候，不需要与用户交互，通常用核心动画（转场）。
    • UIView 动画必须通过修改属性的真实值，才有动画效果。

5.1 核心动画继承结构

  • 核心动画继承结构

    animation30

5.2 核心动画使用步骤

  • Xcode6 之前的版本，使用它需要先添加 QuartzCore.framework 和引入对应的框架 <QuartzCore/QuartzCore.h>。

  • 开发步骤:

    • 1、首先得有 CALayer。
    • 2、初始化一个 CAAnimation 对象，并设置一些动画相关属性。
    • 3、通过调用 CALayer 的 addAnimation:forKey: 方法，增加 CAAnimation 对象到 CALayer 中，这样就能开始执行动画了。
    • 4、通过调用 CALayer 的 removeAnimationForKey: 方法可以停止 CALayer 中的动画。

5.3 CAAnimation

  • 1、CAAnimation 简介

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

    • 属性说明：

          removedOnCompletion ：默认为 YES，代表动画执行完毕后就从图层上移除，图形会恢复到动画执行前的状态。
                          如果想让图层保持显示动画执行后的状态，那就设置为 NO，不过还要设置 fillMode 为 kCAFillModeForwards。
    timingFunction      ：速度控制函数，控制动画运行的节奏。
    delegate            ：动画代理，需要遵守协议 CAAnimationDelegate。

    // 来自 CAMediaTiming 协议的属性
    duration       ：动画的持续时间。
    repeatCount    ：重复次数，无限循环可以设置 HUGE_VALF 或者 MAXFLOAT。
    repeatDuration ：重复时间。
    fillMode       ：决定当前对象在非 active 时间段的行为。比如动画开始之前或者动画结束之后。
    beginTime      ：可以用来设置动画延迟执行时间，若想延迟 2s，就设置为 CACurrentMediaTime()+2，CACurrentMediaTime() 为图层的当前时间。

  • 2、CAAnimation 动画填充模式

    • 设置 fillMode 属性值（要想 fillMode 有效，需要设置 removedOnCompletion = NO）

          kCAFillModeRemoved   ：这个是默认值，也就是说当动画开始前和动画结束后，动画对 layer 都没有影响，动画结束后，layer 会恢复到之前的状态。
    kCAFillModeForwards  ：当动画结束后，layer 会一直保持着动画最后的状态。
    kCAFillModeBackwards ：在动画开始前，只需要将动画加入了一个 layer，layer 便立即进入动画的初始状态并等待动画开始。
    kCAFillModeBoth      ：这个其实就是上面两个的合成，动画加入后开始之前，layer 便处于动画初始状态，动画结束后 layer 保持动画最后的状态。

  • 3、CAAnimation 速度控制函数

    • CAMediaTimingFunction 速度控制函数

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

  • 4、CAAnimation 动画代理方法

    • CAAnimation 在分类中定义了代理方法

          @interface NSObject (CAAnimationDelegate)

    /* Called when the animation begins its active duration. */

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

    /* Called when the animation either completes its active duration or
     * is removed from the object it is attached to (i.e. the layer). 'flag'
     * is true if the animation reached the end of its active duration
     * without being removed. */

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

    @end

5.4 CAPropertyAnimation

  • CAPropertyAnimation 是 CAAnimation 的子类，也是个抽象类，要想创建动画对象，应该使用它的两个子类：
    • CABasicAnimation
    • CAKeyframeAnimation

  • 属性说明：

        keyPath ：通过指定 CALayer 的一个属性名称为 keyPath（NSString 类型），
              并且对 CALayer 的这个属性的值进行修改，达到相应的动画效果。
              比如，指定 @“position” 为 keyPath，就修改 CALayer 的 position 
              属性的值，以达到平移的动画效果。

5.5 CALayer 上动画的暂停和恢复

  • 1、CALayer 上动画的暂停

        // 暂停 CALayer 的动画，自定义方法
    - (void)pauseLayer:(CALayer*)layer {

        CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];

        // 让 CALayer 的时间停止走动
        layer.speed = 0.0;

        // 让 CALayer 的时间停留在 pausedTime 这个时刻
        layer.timeOffset = pausedTime;
    }

  • 2、CALayer 上动画的恢复

        // 恢复 CALayer 的动画，自定义方法
    - (void)resumeLayer:(CALayer*)layer {

        CFTimeInterval pausedTime = layer.timeOffset;

        // 让 CALayer 的时间继续行走
        layer.speed = 1.0;

        // 取消上次记录的停留时刻
        layer.timeOffset = 0.0;

        // 取消上次设置的时间
        layer.beginTime = 0.0;

        // 计算暂停的时间（这里也可以用 CACurrentMediaTime() - pausedTime）
        CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;

        // 设置相对于父坐标系的开始时间（往后退 timeSincePause）
        layer.beginTime = timeSincePause;
    }

6、基本动画

  • CABasicAnimation 基本动画，是 CAPropertyAnimation 的子类。

  • 属性说明：

        fromValue ：keyPath 相应属性的初始值
    toValue   ：keyPath 相应属性的结束值

    byValue   ：keyPath 相应属性的改变值

  • 动画过程说明：

    • keyPath 内容是 CALayer 的可动画 Animatable 属性。
    • 随着动画的进行，在长度为 duration 的持续时间内，keyPath 相应属性的值从 fromValue 渐渐地变为 toValue。
    • 如果 fillMode = kCAFillModeForwards 同时 removedOnComletion = NO，那么在动画执行完毕后，图层会保持显示动画执行后的状态。但在实质上，图层的属性值还是动画执行前的初始值，并没有真正被改变。

  • CABasicAnimation 虽然能够做很多基本的动画效果，但是有个局限性，只能让 CALayer 的属性从某个值渐变到另一个值，仅仅是在 2 个值之间渐变。

6.1 平移动画

  • 1、方法 1

        // 说明这个动画对象要对 CALayer 的 position 属性执行动画
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"position"];

    // 动画持续 1.5s
    anim.duration = 1.5;

    // position 属性值从 (50, 80) 渐变到 (300, 350)
    anim.fromValue = [NSValue valueWithCGPoint:CGPointMake(50, 80)];
    anim.toValue = [NSValue valueWithCGPoint:CGPointMake(250, 350)];

    // 设置动画的代理
    anim.delegate = self;

    // 保持动画执行后的状态
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;

    // 添加动画对象到图层上
    [self.myView.layer addAnimation:anim forKey:@"translate"];

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

    • 注意第 8、9 行，这里并不是直接使用 CGPoint 这种结构体类型，而是要先包装成 NSValue 对象后再使用。这 2 行代码表示 CALayer 从位置 (50, 80) 移动到位置 (250, 350)。

    • 如果将第 9 行的 toValue 换成 byValue，代表 CALayer 从位置 (50, 80) 开始向右移动 250、向下移动 350，也就是移动到位置 (300, 430)。

          anim.byValue = [NSValue valueWithCGPoint:CGPointMake(250, 350)];

    • 默认情况下，动画执行完毕后，动画会自动从 CALayer 上移除，CALayer 又会回到原来的状态。为了保持动画执行后的状态，可以加入第 15、16 行代码。

    • 第 19 行后面的 @"translate" 是给动画对象起个名称，以后可以调用 CALayer 的 removeAnimationForKey: 方法根据动画名称停止相应的动画。

    • 第 12 行是设置动画的代理，可以监听动画的执行过程，这里设置控制器为代理。需要遵守协议 CAAnimationDelegate，代理需要实现的方法有：

          - (void)animationDidStart:(CAAnimation *)anim {

        NSLog(@"%s", __func__);
    }

    - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {

        NSLog(@"%s", __func__);
    }

    • 打印结果为：

          09:11:10.880 CALayerDemo[12721:622836] -[ViewController animationDidStart:]
    09:11:12.419 CALayerDemo[12721:622836] -[ViewController animationDidStop:finished:]，position:{50, 80}

    • 实际上，动画执行完毕后，并没有真正改变 CALayer 的 position 属性的值。

    • 效果

      animation32

  • 2、方法 2

        // 说明这个动画对象要对 CALayer 的 transform 属性执行动画
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];

    // 动画持续 1.5s
    anim.duration = 1.5;

    // 平移，x 轴移动 250，y 轴移动 350，z 轴移动 0
    CATransform3D form = CATransform3DMakeTranslation(250, 350, 0);
    anim.toValue = [NSValue valueWithCATransform3D:form];

    // 添加动画对象到图层上
    [self.myView.layer addAnimation:anim forKey:nil];

    • 效果

      animation33

6.2 缩放动画

  • 1、方法 1

        // 说明这个动画对象要对 CALayer 的 bounds 属性执行动画
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"bounds"];

    // 动画持续 2s
    anim.duration = 2;

    // 缩放，width 从 100 变为 30，height 从 100 变为 30
    // anim.fromValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];  // fromValue 可以省略
    anim.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 30, 30)];

    // 添加动画对象到图层上
    [self.myView.layer addAnimation:anim forKey:nil];

    • 效果

      animation34

  • 2、方法 2

        // 说明这个动画对象要对 CALayer 的 transform 属性执行动画
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];

    // 动画持续 1.5s
    anim.duration = 1.5;

    // 缩放，width 从 100 变为 200，height 从 100 变为 150
    // anim.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)];
    anim.toValue  = [NSValue valueWithCATransform3D:CATransform3DMakeScale(2.0, 1.5, 1.0)];

    // 添加动画对象到图层上
    [self.myView.layer addAnimation:anim forKey:nil];

    • 效果

      animation35

  • 3、心跳效果

        // 说明这个动画对象要对 CALayer 的 transform.scale 属性执行动画
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform.scale"];

    // 动画持续 1.0s
    anim.duration = 1.0;

    // 缩放倍数
    anim.toValue = @0.5;

    // 设置动画执行次数
    anim.repeatCount = MAXFLOAT;

    // 保持动画执行后的状态
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;

    // 添加动画对象到图层上
    [imageView.layer addAnimation:anim forKey:nil];

    • 效果

      animation42

6.3 旋转动画

  • 1、方法

        // 说明这个动画对象要对 CALayer 的 transform.rotation 属性执行动画
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];

    // 动画持续 3.5s
    anim.duration = 3.5;

    // 缩放倍数
    anim.toValue = @(M_PI_4 * 3);

    // 添加动画对象到图层上
    [self.myView.layer addAnimation:anim forKey:nil];

    • 效果

      animation43

  • 2、方法

        // 说明这个动画对象要对 CALayer 的 transform 属性执行动画
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];

    // 动画持续 3.5s
    anim.duration = 3.5;

    // 绕着 (0, 0, 1) 这个向量轴顺时针旋转 45°
    // anim.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(0, 0, 0, 1)];
    anim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_4 * 3, 0, 0, 1)];

    // 设置动画执行次数
    anim.repeatCount = MAXFLOAT;

    // 保持动画执行后的状态
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;

    // 添加动画对象到图层上
    [self.myView.layer addAnimation:anim forKey:nil];

    • 效果

      animation36

7、关键帧动画

  • CAKeyframeAnimation 关键帧动画，是 CAPropertyAnimation 的子类。

  • 与 CABasicAnimation 的区别是：

    • CABasicAnimation 只能从一个数值（fromValue）变到另一个数值（toValue），而 CAKeyframeAnimation 会使用一个 NSArray 保存这些数值。
    • CABasicAnimation 可看做是只有2个关键帧的 CAKeyframeAnimation。

  • 属性说明：

        values   ：上述的 NSArray 对象。里面的元素称为 “关键帧” (keyframe)。动画对象会在指定的时间（duration）内，
               依次显示 values 数组中的每一个关键帧。
    path     ：可以设置一个 CGPathRef、CGMutablePathRef，让图层按照路径轨迹移动。path 只对 CALayer 的 anchorPoint 
               和 position 起作用。如果设置了 path，那么 values 将被忽略。
    keyTimes ：可以为对应的关键帧指定对应的时间点，其取值范围为 0 到 1.0，keyTimes 中的每一个时间值都对应 values 
               中的每一帧。如果没有设置 keyTimes，各个关键帧的时间是平分的。

7.1 平移动画

  • 1、添加动画关键帧

        CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"transform.translation"];
    // CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"];

    anim.duration = 5.0;

    // 动画起始位置，从 position 点出开始
    NSValue *pointVal1 = [NSValue valueWithCGPoint:CGPointMake(0, 0)];

    // 水平移动 200 - 0，垂直方向不变（0 - 0 = 0）
    NSValue *pointVal2 = [NSValue valueWithCGPoint:CGPointMake(200, 0)];

    // 垂直移动 200 - 0，水平位置不变（200 - 200 = 0）
    NSValue *pointVal3 = [NSValue valueWithCGPoint:CGPointMake(200, 200)];

    // 水平移动 0 - 200，垂直方向不变（200 - 200 = 0）
    NSValue *pointVal4 = [NSValue valueWithCGPoint:CGPointMake(0, 200)];

    // 垂直移动 0 - 200，水平位置不变（0 - 0 = 0）
    NSValue *pointVal5 = [NSValue valueWithCGPoint:CGPointMake(0, 0)];

    // 添加动画关键帧
    anim.values = @[pointVal1, pointVal2, pointVal3, pointVal4, pointVal5];

    [self.myView.layer addAnimation:anim forKey:nil];

    • 效果

      animation44

  • 2、添加动画路径

        CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"transform.translation"];
    // CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"];

    anim.duration = 5.0;

    // 添加动画路径
    anim.path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 200, 200)].CGPath;

    [self.myView.layer addAnimation:anim forKey:nil];

    • 效果

      animation44

  • 3、划定路径移动

    • DrawView.m

          @interface DrawView ()

    @property (nonatomic, strong) UIBezierPath *path;

    @end

    @implementation DrawView

    /// 触摸开始
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event {

        // 移除上一个动画
        [self.subviews.firstObject.layer removeAnimationForKey:@"drawAnimation"];

        // 获取触摸起始点位置
        CGPoint startPoint = [touches.anyObject locationInView:self];

        // 创建路径
        self.path = [UIBezierPath bezierPath];

        // 设置起点
        [self.path moveToPoint:startPoint];
    }

    /// 触摸移动
    - (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event {

        // 获取触摸点位置
        CGPoint touchPoint = [touches.anyObject locationInView:self];

        [self.path addLineToPoint:touchPoint];

        [self setNeedsDisplay];
    }

    /// 触摸结束
    - (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event {

        // 添加关键帧动画

        CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
        anim.keyPath = @"position";

        // 添加动画路径
        anim.path = self.path.CGPath;

        anim.duration = 3;
        anim.repeatCount = MAXFLOAT;
        anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

        // 给子视图添加核心动画
        [self.subviews.firstObject.layer addAnimation:anim forKey:@"drawAnimation"];
    }

    /// 触摸取消
    - (void)touchesCancelled:(NSSet *)touches withEvent:(nullable UIEvent *)event {
        [self touchesEnded:touches withEvent:event];
    }

    /// 绘图
    - (void)drawRect:(CGRect)rect {

        [self.path stroke];
    }

    @end

    • ViewController.m

          DrawView *myDrawView = [[DrawView alloc] initWithFrame:self.view.bounds];
    myDrawView.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:myDrawView];

    UIImageView *imv = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 50, 50)];
    imv.image = [UIImage imageNamed:@"heart2"];
    [myDrawView addSubview:imv];

      • 效果

        animation47

7.2 缩放动画

  • 缩放动画

        CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];

    anim.duration = 5.0;

    // 动画起始大小，1 不缩放
    NSNumber *scaleVal1 = @1;

    // 放大 2 倍
    NSNumber *scaleVal2 = @2;

    // 不缩放，缩小至原来大小
    NSNumber *scaleVal3 = @1;

    // 缩小 0.5 倍
    NSNumber *scaleVal4 = @0.5;

    // 不缩放，放大至原来大小
    NSNumber *scaleVal5 = @1;

    // 添加动画关键帧
    anim.values = @[scaleVal1, scaleVal2, scaleVal3, scaleVal4, scaleVal5];

    [self.myView.layer addAnimation:anim forKey:nil];

    • 效果

      animation45

7.3 旋转动画

  • 1、旋转动画

        CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];

    anim.duration = 5.0;

    // 动画起始角度，0 不旋转
    NSNumber *rotationVal1 = @0;

    // 旋转 M_PI_4 * 1
    NSNumber *rotationVal2 = @(M_PI_4 * 1);

    // 旋转 M_PI_4 * 2
    NSNumber *rotationVal3 = @(M_PI_4 * 2);

    // 旋转 M_PI_4 * 3
    NSNumber *rotationVal4 = @(M_PI_4 * 3);

    // 旋转 M_PI_4 * 4
    NSNumber *rotationVal5 = @(M_PI_4 * 4);

    // 添加动画关键帧
    anim.values = @[rotationVal1, rotationVal2, rotationVal3, rotationVal4, rotationVal5];

    [self.myView.layer addAnimation:anim forKey:nil];

    • 效果

      animation46

  • 2、图标抖动

        CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];

    anim.repeatCount = MAXFLOAT;

    NSNumber *rotationVal1 = @(-5 / 180.0 * M_PI);
    NSNumber *rotationVal2 = @(5 / 180.0 * M_PI);
    NSNumber *rotationVal3 = @(-5 / 180.0 * M_PI);

    // 添加动画关键帧
    anim.values = @[rotationVal1, rotationVal2, rotationVal3];

    [self.myView.layer addAnimation:anim forKey:nil];

    • 效果

      animation48

8、转场动画

  • CATransition 转场动画，是 CAAnimation 的子类，用于做转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。UINavigationController 就是通过 CATransition 实现了将控制器的视图推入屏幕的动画效果。

  • 动画属性：

        type          ：动画类型。
    subtype       ：动画方向。
    startProgress ：动画起点（在整体动画的百分比）。
    endProgress   ：动画终点（在整体动画的百分比）。

  • 设置动画类型

        基本型：
        kCATransitionFade      交叉淡化过渡
        kCATransitionPush      新视图把旧视图推出去
        kCATransitionMoveIn    新视图移到旧视图上面
        kCATransitionReveal    将旧视图移开,显示下面的新视图

    用字符串表示的类型：
        fade   push   moveIn   reveal   和系统自带的四种一样
        pageCurl               向上翻页效果
        pageUnCurl             向下翻页效果
        rippleEffect           水滴效果
        suckEffect             收缩效果，如一块布被抽走
        cube                   立方体翻滚效果
        alignedCube            立方体翻滚效果
        flip                   翻转效果
        alignedFlip            翻转效果
        oglFlip                翻转效果
        rotate                 旋转
        cameraIrisHollowOpen   相机镜头打开效果
        cameraIrisHollowClose  相机镜头关闭效果
        cameraIris             相机镜头打开关闭效果

    • kCATransitionFade 和 fade 效果，kCATransitionPush 和 push 效果

      animation50animation51

    • kCATransitionMoveIn 和 moveIn 效果，kCATransitionReveal 和 reveal 效果

      animation52animation53

    • pageCurl 效果，pageUnCurl 效果

      animation54animation55

    • rippleEffect 效果，suckEffect 效果

      animation56animation57

    • cube、alignedCube 效果，flip、alignedFlip、oglFlip 效果

      animation58animation59

    • rotate 效果，cameraIris 效果

      animation60animation61

    • cameraIrisHollowOpen 效果，cameraIrisHollowClose 效果

      animation62animation63

  • 设置动画方向

        四种预设，某些类型中此设置无效：
        kCATransitionFromRight
        kCATransitionFromLeft
        kCATransitionFromTop
        kCATransitionFromBottom

  • UIView 实现转场动画方法

        // 单视图
    + (void)transitionWithView:(UIView *)view 
                      duration:(NSTimeInterval)duration 
                       options:(UIViewAnimationOptions)options 
                    animations:(void (^)(void))animations 
                    completion:(void (^)(BOOL finished))completion;

    参数说明：
        view：需要进行转场动画的视图
        duration：动画的持续时间
        options：转场动画的类型
        animations：将改变视图属性的代码放在这个 block 中
        completion：动画结束后，会自动调用这个 block

    // 双视图
    + (void)transitionFromView:(UIView *)fromView 
                        toView:(UIView *)toView 
                      duration:(NSTimeInterval)duration 
                       options:(UIViewAnimationOptions)options 
                    completion:(void (^)(BOOL finished))completion;

    参数说明：
        duration：动画的持续时间
        options：转场动画的类型
        completion：动画结束后，会自动调用这个 block

8.1 添加转场动画

  • 添加转场动画

        @property (weak, nonatomic) IBOutlet UIView *animView;
    @property (weak, nonatomic) IBOutlet UIImageView *imageView;

    - (IBAction)btnClick:(id)sender {

        static int i = 2;

        // 加载图片
        self.imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"page%d", i]];

        i = (i == 2) ? 1 : i + 1;

        // 添加转场动画
        CATransition *anim = [CATransition animation];

        // 设置动画效果
        anim.type = @"flip";

        // 设置动画方向
        anim.subtype = kCATransitionFromLeft;

        // 设置动画时间
        anim.duration = 1.0;

        // 添加转场动画
        [self.animView.layer addAnimation:anim forKey:nil];
    }

    animation31

    • 效果

      animation49

9、动画组

  • CAAnimationGroup 动画组，是 CAAnimation 的子类，可以保存一组动画对象，将 CAAnimationGroup 对象加入层后，组中所有动画对象可以同时并发运行。

  • 属性说明：

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

9.1 添加动画组

  • 添加动画组

        // 同时旋转，缩放，平移
    CAAnimationGroup *anim = [CAAnimationGroup animation];

    CABasicAnimation *rotation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    rotation.toValue = @(M_PI_4 * 3);

    CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scale.toValue = @0.5;

    CABasicAnimation *translation = [CABasicAnimation animationWithKeyPath:@"transform.translation"];
    translation.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 300)];

    // 添加动画
    anim.animations = @[rotation, scale, translation];

    anim.duration = 3.0;
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;

    // 添加动画组
    [self.myView.layer addAnimation:anim forKey:nil];

    • 效果

      animation64

10、核心动画的使用

上一篇 下一篇
优秀的个人博客,低调大师

微信关注我们

原文链接：https://yq.aliyun.com/articles/312026

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

iOS - Core Animation 核心动画的使用

1、简单使用示例 1.1 时钟 QClockView.h @interface QClockView : UIView /// 创建时钟界面 + (instancetype)q_clockViewWithFrame:(CGRect)frame; @end QClockView.m #define CLOCK_WIDTH self.bounds.size.width @interface QClockView () // 表盘 @property (nonatomic, strong) UIImageView *clockView; // 指针 @property (nonatomic, strong) CALayer *secondLayer; @property (nonatomic, strong) CALayer *minuteLayer; @property (nonatomic, strong) CALayer *hourLayer; @end @implementation QClockView /// 创建时钟界面 + (instancetype)q_clockViewW...
2016-09-19
492
上一篇

推送 从入门到放弃

推送 推送简直就是一种轻量级的骚扰方式 自从有了推送，各个公司基本上都在使用推送，这确实是一个比较好的提醒方式，Android较iOS强的一个部分，也就是在于Android的Notification。Google教育我们利用好Android的通知模块，做更多友好的交互，可这句话，翻译成中文，不知不觉，就变成了在Notification中推送各种广告，而且仅仅就是一些广告，Notification各种牛逼的功能，完全不需要，这也违背了Google设计Notification的初衷。 更关键的是，现在随便找一款App，没有推送的真是凤毛麟角，更可恶的是，做外卖的App给我推送奥运新闻，一条新闻十几个App推送，以至于现在很多用户都非常反感各种推送广告，就我本人而言，基本上会禁用所有广告类的App的推送。 本人非常反感推送，借用王思聪的一句话，XXX App天天给我推送各种广告，还TM是自己做的推送，真是绝了。 推送方案 轮询 轮询是最简单的与服务器保持通信的方式，即循环向服务器通信。这个方案的特点就是通信由客户端主动发起，你需要自己实现轮询消息队列、频率等等参数，在功耗和效果间做权衡，类似...
2016-09-19
635
下一篇

相关文章

发表评论

资源下载

更多资源
优质分享App

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

时间: 2025-12-03 大小: 4.36MB 下载: 23次
腾讯云软件源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

时间: 2025-12-28 大小: 1MB 下载: 4次
Nacos

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

时间: 2025-12-21 大小: 189MB 下载: 2次
Spring

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

时间: 2025-12-17 大小: 5MB 下载: 1次
手机查看

扫码在手机上查看文章

扫描二维码，手机阅读更方便

热门标签
Service Mesh SpringCloud Docker Redis Rocky HarmonyOS6 OpenAi Jdk25 Gemini3 SpringBoot4 DeepSeek Nacos3 Kubernetes

欢迎您来访！

登录后，您将获得更多功能！
热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册