级别：★☆☆☆☆
标签：「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。
| 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
参考学习地址
了解更多iOS及相关新技术，请关注我们的公众号：
关注我们的途径有：
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)
推荐文章：
初识CABasicAnimation
奇舞周刊276期
