按顺序组合多个 CAAnimation

Question

我正在阅读有关 CATransactions 的内容，然后认为这可能有助于解决我的问题。

这就是我不想做的： 我在同一层中有 3 个动画，它们都有自己的持续时间。我使用 CAKeyframeAnimation 和 CGMutablePathRef 创建动画。

例如：

• anim1 ->持续时间 5 秒的
• 动画2 -> 3s
• 动画3 -> 10s

现在我想按顺序序列化它们。我尝试使用 CAAnimationGroup 但动画同时运行。 我读到了 CATransaction，这是一个可能的解决方案吗？你能给我举个小例子吗？

感谢您的帮助！

Answer 1

如果序列化是指在前一个动画完成后开始每个动画，请使用 beginTime 属性（在 CAMediaTiming 协议中定义）。请注意，它的文档有点误导。这是一个例子：

anim2.beginTime = anim1.beginTime + anim1.duration;
anim3.beginTime = anim2.beginTime + anim2.duration;

Answer 2

如果您确定使用图层执行此操作，那么您可以尝试按照

在 CATransactions 中使用完成块

-(void)animateThreeAnimationsOnLayer:(CALayer*)layer animation:(CABasicAnimation*)firstOne animation:(CABasicAnimation*)secondOne animation:(CABasicAnimation*)thirdOne{
    [CATransaction begin];

        [CATransaction setCompletionBlock:^{
            [CATransaction begin];

            [CATransaction setCompletionBlock:^{
                [CATransaction begin];

                [CATransaction setCompletionBlock:^{
                    //If any thing on completion of all animations
                }];
                [layer addAnimation:thirdOne forKey:@"thirdAnimation"];
                [CATransaction commit];
            }];
            [layer addAnimation:secondOne forKey:@"secondAnimation"];
            [CATransaction commit];
        }];
    [layer addAnimation:firstOne forKey:@"firstAnimation"];
    [CATransaction commit];

}

另一种方法是通过应用延迟来开始动画。

-(void)animateThreeAnimation:(CALayer*)layer animation:(CABasicAnimation*)firstOne animation:(CABasicAnimation*)secondOne animation:(CABasicAnimation*)thirdOne{
    firstOne.beginTime=0.0;
    secondOne.beginTime=firstOne.duration;
    thirdOne.beginTime=firstOne.duration+secondOne.duration;

    [layer addAnimation:firstOne forKey:@"firstAnim"];
    [layer addAnimation:secondOne forKey:@"secondAnim"];
    [layer addAnimation:thirdOne forKey:@"thirdAnim"];
}

如果您将使用 UIVIew 动画

//if View is applicable in your requirement then you can look this one;
-(void)animateThreeAnimationOnView{
    [UIView animateWithDuration:2.0 animations:^{
        //first Animation
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:2.0 animations:^{
            //Second Animation
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:2.0 animations:^{
                //Third Animation
            }];
        }];
    }]; 

}