如何在iOS应用程序中链接不同的CAAnimation

时间:2012-07-31 10:03:11

标签: core-animation caanimation cabasicanimation

我需要链接动画,CABasicAnimation或CAAnimationGroup,但我不知道该怎么做,我唯一能做的就是所有动画同时为同一层执行。

我怎么能这样做?

例如,一个内容设置为汽车图像的图层:

1st:将X点向右移动

第二名:向左旋转90ª

第3名:移动X点

第4步:缩放图层

所有这些动画必须以一种安全的方式执行,但我不能这样做:S

顺便说一句:我不是英国人,对不起,如果我在语法上犯了一些错误:D

5 个答案:

答案 0 :(得分:33)

大卫建议什么工作正常,但我会推荐一种不同的方式。

如果您的所有动画都在同一图层上,则可以创建动画组,并使每个动画具有不同的beginTime,其中第一个动画从beginTime 0开始,每个新动画在之前的动画总持续时间之后开始。

但是,如果您的动画位于不同的图层上,则无法使用动画组(动画组中的所有动画必须在同一图层上操作。)在这种情况下,您需要提交单独的动画,每个动画都有有beginTime偏离CACurrentMediaTime(),例如:

CGFloat totalDuration = 0;
CABasicAnimation *animationOne = [CABasicAnimation animationWithKeyPath: @"alpha"];
animationOne.beginTime = CACurrentMediaTime(); //Start instantly.
animationOne.duration = animationOneDuration;
...
//add animation to layer

totalDuration += animationOneDuration;

CABasicAnimation *animationTwo = [CABasicAnimation animationWithKeyPath: @"position"];
animationTwo.beginTime = CACurrentMediaTime() + totalDuration; //Start after animation one.
animationTwo.duration = animationTwoDuration;
...
//add animation to layer

totalDuration += animationTwoDuration;


CABasicAnimation *animationThree = [CABasicAnimation animationWithKeyPath: @"position"];
animationThree.beginTime = CACurrentMediaTime() + totalDuration; //Start after animation three.
animationThree.duration = animationThreeDuration;
...
//add animation to layer

totalDuration += animationThreeDuration;

答案 1 :(得分:18)

tl; dr:您需要在上一次完成后手动添加每个动画。


没有内置的方法来添加顺序动画。你可以将每个动画的延迟设置为以前所有动画的总和,但我不推荐它。

相反,我将创建所有动画并将它们按照它们应该运行的顺序添加到可变数组(使用数组作为队列)。然后,通过将自己设置为动画委托给所有动画,您可以在动画完成时获得animationDidStop:finished:回调。

在该方法中,您将从数组中删除第一个动画(意味着下一个动画)并将其添加到图层中。由于你是委托,你将获得第二个动画,当一个完成时,animationDidStop:finished:回调将再次运行,下一个动画将从可变数组中删除并添加到图层。

一旦动画数组为空,所有动画都将运行。


一些示例代码可帮助您入门。首先设置所有动画:

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
[animation setToValue:(id)[[UIColor redColor] CGColor]];
[animation setDuration:1.5];
[animation setDelegate:self];
[animation setValue:[view layer] forKey:@"layerToApplyAnimationTo"];

// Configure other animations the same way ...

[self setSequenceOfAnimations:[NSMutableArray arrayWithArray: @[ animation, animation1, animation2, animation3, animation4, animation5 ] ]];

// Start the chain of animations by adding the "next" (the first) animation
[self applyNextAnimation];

然后在委托回调中,您只需再次应用下一个动画

- (void)animationDidStop:(CAAnimation *)animation finished:(BOOL)finished {
    [self applyNextAnimation];
}

- (void)applyNextAnimation {
     // Finish when there are no more animations to run
    if ([[self sequenceOfAnimations] count] == 0) return;

    // Get the next animation and remove it from the "queue"
    CAPropertyAnimation * nextAnimation = [[self sequenceOfAnimations] objectAtIndex:0];
    [[self sequenceOfAnimations] removeObjectAtIndex:0];

    // Get the layer and apply the animation
    CALayer *layerToAnimate = [nextAnimation valueForKey:@"layerToApplyAnimationTo"];
    [layerToAnimate addAnimation:nextAnimation forKey:nil];
}

我正在使用自定义键layerToApplyAnimationTo,以便每个动画都知道它的图层(它仅由setValue:forKey:valueForKey:工作。)

答案 2 :(得分:3)

这是Swift的解决方案:

var animations = [CABasicAnimation]()

var animation1 = CABasicAnimation(keyPath: "key_path_1")
// animation set up here, I've included a few properties as an example
animation1.duration = 1.0
animation1.fromValue = 1
animation1.toValue = 0
animation1.append(animation1)

var animation2 = CABasicAnimation(keyPath: "key_path_2")
animation2.duration = 1.0
animation2.fromValue = 1
animation2.toValue = 0
// setting beginTime is the key to chaining these
animation2.beginTime = 1.0
animations.append(animation2)

let group = CAAnimationGroup()
group.duration = 2.0
group.repeatCount = FLT_MAX
group.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
group.animations = animations

yourLayer.addAnimation(group, forKey: nil)

答案 3 :(得分:1)

无论是David的方法还是beginTime属性都可以链接动画。请参阅http://wangling.me/2011/06/time-warp-in-animation.html - 它阐明了 beginTime 和其他 CAMediaTiming 协议属性的使用。

答案 4 :(得分:0)

使用KVC。每个动画的键的setValue。之后在animationDidStop中,您可以定义已停止的动画并在链中运行下一步。



//form.appendTo('<body>');
form.appendTo('body');

//table.appendTo('<body>');
table.appendTo('body');
&#13;
&#13;
&#13;