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

时间:2021-10-15 作者:qvyue

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

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


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

效果一:给同一个layer添加不同时长动画的效果;

iOS CABasicAnimation相关的duration及实现动画串行效果
1-1 使用组动画(CAAnimationGroup):组动画的duration对animations中的动画时长有约束作用

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

PS:animations中的动画时长超过groupDuration的动画时长记为的subLongerDuration。

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"];
}

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

iOS CABasicAnimation相关的duration及实现动画串行效果
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

参考学习地址

  • [http://www.cocoachina.com/bbs/read.php?tid-109560.html]

了解更多iOS及相关新技术,请关注我们的公众号:

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

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

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。