ios - 同步执行多个动画的最佳方式

Question

这将是一个“最佳做法”类型的问题。

我知道有多种方法可以制作序列动画，但哪种方法更好？

假设我要尝试执行 3 个动画，一个接一个，所以下一个动画仅在前一个动画完成后才开始。

我可以用 UIView.animate(withCompletionBlock:) 来完成，所以在完成部分我调用了第二个，在第二个的 completionBlock 上我调用了第三个。

这个特别让我思考:这是一种“漂亮”的方式吗？在另一个内部使用 completionBlocks 是否存在任何已知问题？

只是一个想法。在前一个动画完成 block 中调用动画，可能会使代码有点像厄运金字塔，如果有 10 个同步动画，你不觉得吗？

另一种方法是使用 dispatch_after，我根据前一个动画的 NSTimeInterval 调用下一个动画。在这种情况下，它可能会导致应用程序崩溃暂停主线程以等待下一个线程执行，然后再次暂停它以执行第三个线程。

我所知道的最后一种方法是我可以使用 NSTimeInterval 来调用下一个动画，但这有点像 dispatch_after 选项。

您认为哪种方法最好？同步执行 3 个或更多视觉动画(等待前一个完成以开始下一个)。

我可能会在我的应用中经常使用它，我想以最好的方式启动它。

示例

completionBlocks 中的动画

DispatchQueue.main.async {
        UIView.animate(withDuration: 2.0, animations: { 
            view1.alpha = 1
        }, completion: { (_) in
            UIView.animate(withDuration: 5.0, animations: {
                view2.alpha = 1
            }, completion: { (_) in
                UIView.animate(withDuration: 2.0, animations: {
                    view3.alpha = 0
                }, completion: { (_) in
                    UIView.animate(withDuration: 2.0, animations: {
                        view4.alpha = 0
                    }, completion: { (_) in
                            print("all completed")
                    })
                })
            })
        })
    }

使用 dispatch_after:

    let anim1_duration = 2.0
    let anim2_duration = 3.0
    let anim3_duraiton = 5.0

    UIView.animate(withDuration: anim1_duration, animations: { 
        view1.alpha = 1
    }

    DispatchQueue.main.asyncAfter(deadline: DispatchTime.init(uptimeNanoseconds: UInt64(anim1_duration * Double(NSEC_PER_SEC)))) {
        UIView.animate(withDuration: anim2_duration, animations: { 
            view2.alpha = 1
        }
    }

    DispatchQueue.main.asyncAfter(deadline: DispatchTime.init(uptimeNanoseconds: UInt64((anim1_duration + anim2_duration) * Double(NSEC_PER_SEC)))) {
        UIView.animate(withDuration: anim3_duration, animations: { 
            view3.alpha = 1
        }
    }

Answer 1

查看 UIView 的 animate​Keyframes(with​Duration:​delay:​options:​animations:​completion:​) :

class func animateKeyframes(withDuration duration: TimeInterval, 
                      delay: TimeInterval, 
                    options: UIViewKeyframeAnimationOptions = [], 
                 animations: @escaping () -> Void, 
                 completion: ((Bool) -> Void)? = nil)

对于您的具体情况，它看起来像这样:

UIView.animateKeyframes(withDuration: 20,
                        delay: 0,
                        options: [],
                        animations: {

                            UIView.addKeyframe(withRelativeStartTime: 0,
                                               relativeDuration: 0.2,
                                               animations: {
                                view1.alpha = 1
                            })

                            UIView.addKeyframe(withRelativeStartTime: 0.2,
                                               relativeDuration: 0.3,
                                               animations: {
                                view2.alpha = 1
                            })

                            UIView.addKeyframe(withRelativeStartTime: 0.5,
                                               relativeDuration: 0.1,
                                               animations: {
                                view3.alpha = 0
                            })

                            UIView.addKeyframe(withRelativeStartTime: 0.6,
                                               relativeDuration: 0.4,
                                               animations: {
                                view4.alpha = 0
                            })
},
                        completion: nil)