iOS动画——核心动画Core Animation

接上篇的iOS开发之——基础动画
这篇文章主要讲解核心动画Core Animation

iOS核心动画.png

从上图分析下Core Animation的继承关系

CAAnimation 是核心动画的基类包含常用的三大类
- 1. CATransition转场动画
- 1. CAAnimationGroup组动画
- 1. CAPropertyAnimation 属性动画
  - 3.1 CAKeyframeAnimation 关键帧动画
  - 3.2 CABasicAnimation 基本动画
    - 3.2.1 CASpringAnimation 弹性动画
      先来一张图看下，基础动画与核心动画的层级关系
UIKit 层是我们的UIView 能使用的基础动画，也可以说是对Core Animation的封装
Core Animation即我们要讲到的核心动画层，核心动画层位于UIKit的下一层，相比UIView动画，可以实现更加复杂的动画，核心动画主要作用在CALayer上
UIView 和 CALayer

层级关系

调用方法

初始化CAAnimation对象，

一般使用Animation方法生成即可
+ (instancetype)animation;
CAPropertyAnimation下面的子类，我们可以使用path方法生成
+ (instancetype)animationWithKeyPath:(nullable NSString *)path;

设置相关属性
动画的添加和移除

要使用CALayer的方法调用
3.1 添加
- (void)addAnimation:(CAAnimation *)anim forKey:(nullable NSString *)key;
3.2 移除
- (void)removeAllAnimations;
- (void)removeAnimationForKey:(NSString *)key;

4.属性

下面的Demo中详细介绍

CATransaction 转场动画

#pragma mark -- CATransaction
/**
 属性
 type:过度动画的类型 {
 kCATransitionFade 渐变
 kCATransitionMoveIn 覆盖
 kCATransitionPush 推出
 kCATransitionReveal 揭开
 私有动画类型的值有："cube"、"suckEffect"、"oglFlip"、 "rippleEffect"、"pageCurl"、"pageUnCurl"
 }
 subtype:过度动画的方向 {
 kCATransitionFromRight 从右边
 kCATransitionFromLeft 从左边
 kCATransitionFromTop 从顶部
 kCATransitionFromBottom 从底部
 }
 startProgress:开始进度
 endProgress:结束进度
 */
- (void)transaction {
    CATransition *anim = [CATransition animation];
    anim.type = kCATransitionPush;
    anim.subtype = kCATransitionFromBottom;
    anim.duration = 10;
    self.redView.backgroundColor = [UIColor yellowColor];
    [self.redView.layer addAnimation:anim forKey:@"transaction"];
}

CABasicAnimation 基础动画

#pragma mark -- CABasicAnimation
/*
 属性说明
 fromValue：keyPath相应属性的初始值
 toValue：keyPath相应属性的结束值
 byValue：keyPath累加
 removedOnCompletion: 是否回到原位置
 fillMode {
 kCAFillModeRemoved   默认,当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态
 kCAFillModeForwards  当动画结束后,layer会一直保持着动画最后的状态
 kCAFillModeBackwards 和kCAFillModeForwards相对,具体参考上面的URL
 kCAFillModeBoth      kCAFillModeForwards和kCAFillModeBackwards在一起的效果
 }
 timingFunction {
  kCAMediaTimingFunctionLinear 匀速
  kCAMediaTimingFunctionEaseIn 慢进
  kCAMediaTimingFunctionEaseOut 慢出
  kCAMediaTimingFunctionEaseInEaseOut 慢进慢出
  kCAMediaTimingFunctionDefault 默认值（慢进慢出）
 }
 */
// 平移动画
- (void)position {
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"position"];
    anim.duration = 3;
    // 因为CGPoint是结构体，所以用NSValue包装成一个OC对象
    anim.fromValue = [NSValue valueWithCGPoint:CGPointMake(105, 105)];
//    anim.byValue = [NSValue valueWithCGPoint:CGPointMake(200, 500)];
    anim.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 500)];
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    [self.redView.layer addAnimation:anim forKey:@"positionAni"];
    // 通过positionAni可以取回相应的动画对象，比如用来中途取消动画
}
// 缩放动画
- (void)transForm1 {
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];
    anim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(2, 2, 2)];
    anim.duration = 3;
    [self.redView.layer addAnimation:anim forKey:nil];
}
// 旋转动画
- (void)transForm2 {
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];
    // 这里是以向量(1, 1, 0)为轴，旋转π/2弧度(90°)
    // 如果只是在手机平面上旋转，就设置向量为(0, 0, 1)，即Z轴
    anim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2, 1, 1, 0)];
    anim.duration = 3;
    [self.redView.layer addAnimation:anim forKey:nil];
}

CASpringAnimation 弹性动画

#pragma mark -- CASpringAnimation

/**
 说明
 CASpringAnimation是iOS9新加入动画类型，是CABasicAnimation的子类，用于实现弹簧动画。
 mass:质量（影响弹簧的惯性，质量越大，弹簧惯性越大，运动的幅度越大）
 stiffness:弹性系数（弹性系数越大，弹簧的运动越快
 damping:阻尼系数（阻尼系数越大，弹簧的停止越快）
 initialVelocity:初始速率（弹簧动画的初始速度大小，弹簧运动的初始方向与初始速率的正负一致，若初始速率为0，表示忽略该属性）
 settlingDuration:结算时间（根据动画参数估算弹簧开始运动到停止的时间，动画设置的时间最好根据此时间来设置
 */
- (void)springAnimation {
    CASpringAnimation *anim = [CASpringAnimation animationWithKeyPath:@"bounds"];
    anim.mass = 10;
    anim.stiffness = 5000;
    anim.damping = 100;
    anim.initialVelocity = 5;
    anim.duration = anim.settlingDuration;
//    anim.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 500)];
    anim.toValue = [NSValue valueWithCGRect:self.view.bounds];
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    [self.redView.layer addAnimation:anim forKey:@"springAnimation"];
}

CAKeyframeAnimation 关键帧动画

#pragma mark -- CAKeyframeAnimation
/**
 说明
 values:关键帧数组对象，里面每一个元素即为一个关键帧，动画会在对应的时间段内，依次执行数组中每一个关键帧的动画。
 path:动画路径对象，可以指定一个路径，在执行动画时路径会沿着路径移动，Path在动画中只会影响视图的Position
 keyTimes:设置关键帧对应的时间点，范围：0-1。如果没有设置该属性，则每一帧的时间平分。
 
 calculationMode: {
    kCAAnimationLinear：默认值，表示当关键帧为座标点的时候，关键帧之间直接直线相连进行插值计算
    kCAAnimationDiscrete：离散的，不进行插值计算，所有关键帧直接逐个进行显示
    kCAAnimationPaced：使得动画均匀进行，而不是按keyTimes设置的或者按关键帧平分时间，此时keyTimes和timingFunctions无效
    kCAAnimationCubic：对关键帧为座标点的关键帧进行圆滑曲线相连后插值计算，这里的主要目的是使得运行的轨迹变得圆滑
    kCAAnimationCubicPaced：看这个名字就知道和kCAAnimationCubic有一定联系,其实就是在kCAAnimationCubic的基础上使得动画运行变得均匀，就是系统时间内运动的距离相同，此时keyTimes以及timingFunctions也是无效的
 }
 */
- (void)valueKeyFrameAnim {
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    anim.duration = 3;
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(100, 300)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(300, 100)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(300, 300)];
    anim.values = @[value1, value2, value3, value4, value5];
    [self.redView.layer addAnimation:anim forKey:@"valueKeyFrameAnim"];
}

- (void)pathKeyFrameAnim {
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddEllipseInRect(path, NULL, CGRectMake(50, 50, 100, 100));
    anim.path = path;
    CGPathRelease(path);
    anim.duration = 3;
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    [self.redView.layer addAnimation:anim forKey:@"valueKeyFrameAnim"];
}

CAAnimationGroup 组合动画

#pragma mark -- CAAnimationGroup
/**
 说明
 组合动画
 position、bounds和opacity改变的组合动画
 */
- (void)animationGroup {
    CABasicAnimation *posAnim = [CABasicAnimation animationWithKeyPath:@"position"];
    posAnim.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 100)];
    
    CABasicAnimation *opcAnim = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opcAnim.toValue = [NSNumber numberWithFloat:1.0];
    opcAnim.toValue = [NSNumber numberWithFloat:0.7];
    
    CABasicAnimation *bodAnim = [CABasicAnimation animationWithKeyPath:@"bounds"];
    bodAnim.toValue = [NSValue valueWithCGRect:self.view.bounds];
    
    CAAnimationGroup *groupAni = [CAAnimationGroup animation];
    groupAni.animations = @[posAnim, opcAnim, bodAnim];
    groupAni.duration = 3;
    groupAni.fillMode = kCAFillModeForwards;
    groupAni.removedOnCompletion = NO;
    groupAni.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    [self.redView.layer addAnimation:groupAni forKey:@"animationGroup"];
}

Demo地址

iOS动画——核心动画Core Animation

你可能感兴趣的:(iOS动画——核心动画Core Animation)