初识CABasicAnimation

级别：★☆☆☆☆
标签：「CABasicAnimation」「基础动画」「阴影」「旋转」「scale」
作者： WYW
审校： QiShare团队

CABasicAnimation

CABasicAnimation 为layer属性提供了基础的帧动画能力。

• 使用层面
  我们创建一个CABasicAnimation的实例，使用继承自CAPropertyAnimation的animationWithKeyPath:方法，来指定要添加动画的layer属性的keypath。
  示意图，如下：
  

  CABasicAnimation类图

• CABasicAnimation常用的有如下几个属性：

// 指定执行动画layer的起始值
@property(nullable, strong) id fromValue;
// 指定结束动画layer的结束值
@property(nullable, strong) id toValue;
// 指定执行动画的时候的相对值
@property(nullable, strong) id byValue;

• 相关常用属性

/* 基础动画的时间间隔 默认为0.25*/
@property CFTimeInterval duration;

/* 设置为YES的时候，当动画时间间隔过了后，动画就会移除*/
@property(getter=isRemovedOnCompletion) BOOL removedOnCompletion;

/* 当动画时间间隔后，指定动画对象的表现。
* 本地时间可能在时间间隔后或者是元素从当前表现层移除后被压缩 
* 合法的值有kCAFillModeForwards、kCAFillModeBackwards 
* kCAFillModeBoth kCAFillModeRemoved*/
@property(copy) NSString *fillMode;

• fromValue，byValue，toValue 理解

fromValue,byValue及toValue定义的值应该彼此插入，所有值都是可选的，其中应该有两个或者以下的值是非nil的，value的对应类型应该匹配添加动画的属性的类型。

指定值	fromValue	byValue	toValue	动画效果
101	non-nil	nil	non-nil	fromValue和toValue之间(这个经常用)
110	non-nil	non-nil	nil	fromValue及fromValue+byValue之间
011	nil	non-nil	non-nil	toValue-byValue及toValue之间
100	non-nil	nil	nil	fromValue和layer属性当前显示值之间
010	nil	non-nil	nil	layer属性 当前显示值 到 该值加上byValue的和 之间
001	nil	nil	non-nil	layer属性当前显示值及toValue之间
000	nil	nil	nil	在layer属性前一个显示值及当前显示值之间(这个没用过)

举例

比如说，我们可以给layer的纯量_{(如layer的不透明度 仅仅包含单独的一个值)}添加动画。也可以给layer的非纯量的属性（如position.x）添加动画。

如例子所说，我做了一个Demo，Demo效果如下

QiShareBasicAnima.gif

核心代码

• 按钮点击事件：

- (void)startAnimationButtonClicked:(UIButton *)sender {
    
    [self basicAnimationFirstStart];

    sender.enabled = NO;
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        sender.enabled = YES;
    });
}

• 基础动画初识：

- (void)basicAnimationFirstStart {

    CABasicAnimation *positionAnima = [CABasicAnimation animationWithKeyPath:@"position.x"];
    // 指定基础动画的时间间隔，以秒为单位默认值是 0.25
    positionAnima.duration = 1.5;
    positionAnima.fromValue = @([UIScreen mainScreen].bounds.size.width / 2.0);
    positionAnima.toValue = @(-_basicAnimaFirstStartLabel.frame.size.width / 2);
    positionAnima.fillMode = kCAFillModeForwards;
    positionAnima.removedOnCompletion = NO;
    [_basicAnimaFirstStartLabel.layer addAnimation:positionAnima forKey:@"position.x"];
    
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        CABasicAnimation *backPositionAnima = [self qiBasicAnimationWithKeyPath:@"position.x" fromValue:@(-self->_basicAnimaFirstStartLabel.frame.size.width / 2) byValue:nil toValue:@([UIScreen mainScreen].bounds.size.width / 2.0) duration:1.5 fillMode:kCAFillModeForwards removeOnCompletion:NO];
        [self->_basicAnimaFirstStartLabel.layer addAnimation:backPositionAnima forKey:@"position.x"];
    });
    
    // 改变不透明度基础动画
    CABasicAnimation *alphaAnima = [self qiBasicAnimationWithKeyPath:@"opacity" fromValue:@(0.4) byValue:nil toValue:@(1.0) duration:3.0 fillMode:kCAFillModeForwards removeOnCompletion:NO];
    [_basicAnimaFirstStartLabel.layer addAnimation:alphaAnima forKey:@"opacity"];

• 快捷创建基础动画：

- (CABasicAnimation *)qiBasicAnimationWithKeyPath:(NSString *)keypath fromValue:(id)fromValue byValue:(id)byValue toValue:(id)toValue duration:(NSTimeInterval)duration fillMode:(NSString *)fillMode removeOnCompletion:(BOOL)removeOnCompletion{
    
    CABasicAnimation *basicAnima = [CABasicAnimation animationWithKeyPath:keypath];
    basicAnima.fromValue = fromValue;
    basicAnima.toValue = toValue;
    basicAnima.byValue = byValue;
    basicAnima.duration = duration;
    basicAnima.fillMode = fillMode;
    basicAnima.removedOnCompletion = removeOnCompletion;

    return basicAnima;
}

如果感兴趣的话，大家可以试试给layer添加不同的keyPath：
backgroundColor、borderColor、borderWidth、cornerRadius、transform.scale、shadowRadius、shadowColor、shadowOpacity、transform.rotation.x、transform.rotation.y、transform.rotation.z等，以实现不同的动画效果。

代码GitHub地址

参考学习地址

• CABasicAnimation
• Animatable Properties

关注我们的途径有：
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)

推荐文章：
iOS 本地推送
聊聊我对现代前端框架的认知