CABasicAnimation相关的duration及实现动画串行效果

级别：★☆☆☆☆
标签：「CAAnimationGroup」「duration」「串行动画」
作者： WYW
审校： QiShare团队

相关内容：初识CABasicAnimation
介绍了CABasicAnimation的一些基本属性及简单使用方法。

---

今天给大家介绍下
CABasicAnimation相关的duration；
实现多个动画串行效果。

效果一：给同一个layer添加不同时长动画的效果；

1-1 使用组动画(CAAnimationGroup)：组动画的duration对animations中的动画时长有约束作用

CAAnimationGroup的duration（代号groupDuration）对其animations的动画的duration（代号subDuration）有影响。
CAAnimationGroup.duration的优先级更高，当时间达到group的duration时，动画会立即停止（此时，即使有动画还没有执行完也必须停止）。

PS：animations中的动画时长超过groupDuration的动画时长记为的subLongerDuration。
即subLongerDuration = subDuration - groupDuration

groupDuration与subLongerDuration的关系	动画效果
小于	groupDuration对animations中时长为subLongerDuration的动画会被截取
等于	无影响
大于	无影响

//! 1.有Group：group的duration对所有动画产生约束（或者说截取）
- (void)demo1 {
    
    NSValue *xFromValue = @(CGRectGetMidX(_label.frame));
    CABasicAnimation *xBasiAnima = [self qiBasicAnimationWithKeyPath:@"position.x" fromValue:xFromValue byValue:@([UIScreen mainScreen].bounds.size.width / 3 * 2) toValue:nil duration:3.0 fillMode:kCAFillModeForwards removeOnCompletion:NO];
    
    NSValue *yFromValue = @(CGRectGetMidY(_label.frame));
    CABasicAnimation *yBasiAnima = [self qiBasicAnimationWithKeyPath:@"position.y" fromValue:yFromValue byValue:@([UIScreen mainScreen].bounds.size.height / 4) toValue:nil duration:1.0 fillMode:kCAFillModeForwards removeOnCompletion:NO];
    
    CABasicAnimation *alphaAnima = [self qiBasicAnimationWithKeyPath:@"opacity" fromValue:@(1.0) byValue:@(-0.5) toValue:nil duration:1.0 fillMode:kCAFillModeForwards removeOnCompletion:NO];
    
    CAAnimationGroup *groupAnima = [CAAnimationGroup animation];
    groupAnima.removedOnCompletion = NO;
    groupAnima.fillMode = kCAFillModeForwards;
    groupAnima.animations = @[xBasiAnima, yBasiAnima, alphaAnima];
    groupAnima.duration = 2.0;
    
    [_label.layer addAnimation:groupAnima forKey:nil];
}
复制代码

1-2 对比：不使用组动画->所有动画同时进行 -> 不会受到外在的约束

//！ 2.无Group：所有动画同时进行
- (void)demo2 {
    
    NSValue *yFromValue = @(CGRectGetMidY(_label.frame));
    NSValue *xFromValue = @(CGRectGetMidX(_label.frame));
    
    // 如果给某layer添加两个时间不同基础动画
    /**
     * 动画会执行完毕，不同的动画同时执行，然后剩余的时间继续执行剩余动画
     */
    CABasicAnimation *xBasiAnima = [self qiBasicAnimationWithKeyPath:@"position.x" fromValue:xFromValue byValue:@([UIScreen mainScreen].bounds.size.width / 3 * 2) toValue:nil duration:3.0 fillMode:kCAFillModeForwards removeOnCompletion:NO];
    [_label.layer addAnimation:xBasiAnima forKey:@"postion.x"];
    
    CABasicAnimation *yBasiAnima = [self qiBasicAnimationWithKeyPath:@"position.y" fromValue:yFromValue byValue:@([UIScreen mainScreen].bounds.size.height / 4) toValue:nil duration:1.0 fillMode:kCAFillModeForwards removeOnCompletion:NO];
    [_label.layer addAnimation:yBasiAnima forKey:@"postion.y"];
    
    CABasicAnimation *opacityAnima = [self qiBasicAnimationWithKeyPath:@"opacity" fromValue:@1.0 byValue:@(-0.5) toValue:nil duration:2.0 fillMode:kCAFillModeForwards removeOnCompletion:NO];
    [_label.layer addAnimation:opacityAnima forKey:@"opacity"];
}
复制代码

效果二：通过把基本动画异步的添加到串行队列达到动画串行效果

2-1：通过把基本动画异步的添加到串行队列->达到动画串行效果

动画默认是异步执行的，为了实行同步效果，在添加到串行队列后，还需要使用[NSThread sleepForTimeInterval:self.timeInterval];操作来达到动画串行效果。

PS：timeInterval是一个用来记录上一个动画时长的属性。便于记录线程等待时长。

//! 3.串行动画
- (void)demo3 {
    
    // a)创建串行队列
    dispatch_queue_t serialQue = dispatch_queue_create("com.qishare.serialQueue", DISPATCH_QUEUE_SERIAL);
    
    // 1)动作一：向下
    _timeInterval = [self toBottom];//!> 第一个动作不需要等待
    
    // 2)动作二：向右
    dispatch_async(serialQue, ^{
        
        [NSThread sleepForTimeInterval:self.timeInterval];
        dispatch_sync(dispatch_get_main_queue(), ^{
            self.timeInterval = [self toRight];
        });
    });
    
    // 3)动作三：向上
    dispatch_async(serialQue, ^{
        
        [NSThread sleepForTimeInterval:self.timeInterval];
        dispatch_sync(dispatch_get_main_queue(), ^{
            self.timeInterval = [self toTop];
        });
    });
    
    // 4)动作四：向左
    dispatch_async(serialQue, ^{
        
        [NSThread sleepForTimeInterval:self.timeInterval];
        dispatch_sync(dispatch_get_main_queue(), ^{
            self.timeInterval = [self toLeft];
        });
    });
    
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(4.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        self.label.text = @"QiShare";
    });
}
复制代码

小结：
1. 组动画的duration会约束其animations中的动画执行。
2. 动画默认是异步执行的，为了实行同步效果，在添加到串行队列后，还需要使用sleep操作来达到动画串行效果。

• 本文只放了部分代码，如有兴趣，请到GitHub自行下载源码：
  源码地址：GitHub

参考学习地址

• [www.cocoachina.com/bbs/read.ph…]

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

推荐文章：
初识CABasicAnimation
奇舞周刊276期