實際開發(fā)中一個物體的運動往往是復(fù)合運動,單一屬性的運動情況比較少趟济,但恰恰屬性動畫每次進行動畫設(shè)置時一次只能設(shè)置一個屬性進行動畫控制(不管是基礎(chǔ)動畫還是關(guān)鍵幀動畫都是如此)乱投,這樣一來要做一個復(fù)合運動的動畫就必須創(chuàng)建多個屬性動畫進行組合。對于一兩種動畫的組合或許處理起來還比較容易顷编,但是對于更多動畫的組合控制往往會變得很麻煩戚炫,動畫組的產(chǎn)生就是基于這樣一種情況而產(chǎn)生的。動畫組是一系列動畫的組合勾效,凡是添加到動畫組中的動畫都受控于動畫組嘹悼,這樣一來各類動畫公共的行為就可以統(tǒng)一進行控制而不必單獨設(shè)置,而且放到動畫組中的各個動畫可以并發(fā)執(zhí)行层宫,共同構(gòu)建出復(fù)雜的動畫效果杨伙。
動畫組使用起來并不復(fù)雜,首先單獨創(chuàng)建單個動畫(可以是基礎(chǔ)動畫也可以是關(guān)鍵幀動畫)萌腿,然后將基礎(chǔ)動畫添加到動畫組限匣,最后將動畫組添加到圖層即可。
下面這個實例是,先創(chuàng)建兩個動畫,最后再把他們添加到 動畫組中,首先是 關(guān)鍵幀動畫,讓這個 layer 走一個矩形, 然后 是基礎(chǔ)動畫, 讓他沿著對角線走,
CALayer *layerGroup = [[CALayer alloc] init];
layerGroup.bounds = CGRectMake(0, 0, 40, 40);
layerGroup.backgroundColor = [UIColor redColor].CGColor;
layerGroup.position = CGPointMake(5, 5);
[self.view.layer addSublayer:layerGroup];
CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
UIBezierPath *bezier = [UIBezierPath bezierPathWithRect:CGRectMake(10, 100, 300, 300)];
keyAnimation.path = bezier.CGPath;
keyAnimation.duration = 6.0;
keyAnimation.removedOnCompletion = NO;
keyAnimation.fillMode = kCAFillModeForwards;
keyAnimation.calculationMode = kCAAnimationCubic;
CABasicAnimation *basic = [[CABasicAnimation alloc] init];
basic.keyPath = @"transform";
basic.beginTime = 6;
basic.duration = 2;
basic.removedOnCompletion = NO;
basic.fillMode = kCAFillModeForwards;
basic.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeTranslation(300, 300, 1)];
CAAnimationGroup *group = [[CAAnimationGroup alloc] init];
group.duration = 8;
group.removedOnCompletion = NO;
group.fillMode = kCAFillModeForwards;
group.animations = @[keyAnimation,basic];
[layerGroup addAnimation:group forKey:nil];
這就是利用組動畫的效果,不過有一些地方需要注意:
首先,一定要注意設(shè)置組動畫的時間間隔,
比如,給組動畫添加兩個動畫,第一個是6s,第二個是2s,但是組動畫的時間間隔要設(shè)置成 3s,這樣整個完整的動畫不會走完就停止了,-
其次,默認(rèn)組動畫當(dāng)中的動畫是同時進行的, 如果我們需要他們按添加順序執(zhí)行怎么辦?
就如我上圖這個例子當(dāng)中,我是先執(zhí)行了第一個動畫,在執(zhí)行第二個動畫,那么是怎么辦到的呢?
這時候就用到了 beginTime 了,如上例中,我讓第二個動畫的 beginTime 從第一個動畫結(jié)束后的時間執(zhí)行,這個就可以做到按順序執(zhí)行了,basic.beginTime = 6;