級別：★☆☆☆☆
標簽：「CAAnimationGroup」「duration」「串行動畫」
作者： WYW
審校： QiShare團隊
相關(guān)內(nèi)容：初識CABasicAnimation
介紹了CABasicAnimation的一些基本屬性及簡單使用方法甫题。
今天給大家介紹下
CABasicAnimation相關(guān)的duration苗膝；
實現(xiàn)多個動畫串行效果唆阿。
效果一：給同一個layer添加不同時長動畫的效果兼贸；
1-1 使用組動畫(CAAnimationGroup)：組動畫的duration對animations中的動畫時長有約束作用
CAAnimationGroup的duration（代號groupDuration）對其animations的動畫的duration（代號subDuration）有影響德撬。
CAAnimationGroup.duration的優(yōu)先級更高，當時間達到group的duration時嫉称，動畫會立即停止（此時凰荚，即使有動畫還沒有執(zhí)行完也必須停止）。
PS：animations中的動畫時長超過groupDuration的動畫時長記為的subLongerDuration叽讳。
| groupDuration與subLongerDuration的關(guān)系 | 動畫效果 |
|---|---|
| 小于 | groupDuration對animations中時長為subLongerDuration的動畫會被截取 |
| 等于 | 無影響 |
| 大于 | 無影響 |
//! 1.有Group：group的duration對所有動畫產(chǎn)生約束（或者說截茸匪）
- (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添加兩個時間不同基礎(chǔ)動畫
/**
* 動畫會執(zhí)行完畢岛蚤，不同的動畫同時執(zhí)行邑狸，然后剩余的時間繼續(xù)執(zhí)行剩余動畫
*/
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：通過把基本動畫異步的添加到串行隊列->達到動畫串行效果
動畫默認是異步執(zhí)行的，為了實行同步效果涤妒，在添加到串行隊列后单雾，還需要使用[NSThread sleepForTimeInterval:self.timeInterval];操作來達到動畫串行效果。
PS：timeInterval是一個用來記錄上一個動畫時長的屬性。便于記錄線程等待時長硅堆。
//! 3.串行動畫
- (void)demo3 {
// a)創(chuàng)建串行隊列
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";
});
}
小結(jié)：
1. 組動畫的duration會約束其animations中的動畫執(zhí)行屿储。
2. 動畫默認是異步執(zhí)行的，為了實行同步效果渐逃，在添加到串行隊列后够掠，還需要使用sleep操作來達到動畫串行效果。
- 本文只放了部分代碼茄菊，如有興趣疯潭，請到GitHub自行下載源碼：
源碼地址：GitHub
參考學(xué)習地址
了解更多iOS及相關(guān)新技術(shù)，請關(guān)注我們的公眾號：
關(guān)注我們的途徑有：
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公眾號)
推薦文章：
初識CABasicAnimation
奇舞周刊276期
