为什么 animateWithDuration 动画和完成块之间的暂停？

Question

按照 Apple 的建议，我通过将后续对 -animationWithDuration:animation: 的调用放在对 aanimateWithDuration:animation:completion: 的另一个调用的 completion: 块中来链接 UIView 动画，如下所示：

[UIView animateWithDuration:scaleDuration delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
    // Scale the controllers' views down.
    self.view.transform = CGAffineTransformScale(self.view.transform, 0.8, 0.8);
} completion:^(BOOL finished) {
    // Transition to the new view and push on the new view controller.
    [UIView transitionWithView:self.view duration:1 options:UIViewAnimationOptionCurveLinear | UIViewAnimationOptionTransitionFlipFromLeft animations:^{
        [self pushViewController:viewController animated:NO];
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:scaleDuration delay:0 options:UIViewAnimationOptionCurveLinear animations:
^{
            // Scale back to the original size.
            self.view.transform = CGAffineTransformScale(self.view.transform, 1.25, 1.25);
        } completion:nil];
    }];
}];

动画都执行正确的顺序，但它们之间有一个微小的延迟，尤其是在-transitionWithView:duration:options:animations:completion: 调用之前。如何平滑动画步骤之间的过渡？

Answer 1

旁白：
为什么你以这种方式滥用导航控制器有什么特别的原因吗？难道你不能直接使用presentViewController:animated:completion: 将其转换样式设置为UIModalTransitionStyleFlipHorizontal？

回到你的问题：

我很确定卡顿来自一个简单的事实，即pushViewController:animated: 隐式地必须加载要推送的视图控制器的视图，这需要一些时间。

所以如果你不能使用presentViewController:animated:completion:（或presentModalViewController:animated: 如果你必须支持iOS 4）方法，我鼓励你试试这个：

// ensure the view is already loaded when you invoke `pushViewController:animated:`
[viewController view];

// there is no strict need to calculate those in situ, so we do it up front
CGAffineTransform originalTransform = self.view.transform;
CGAffineTransform downscalingTransform = CGAffineTransformScale(originalTransform, 0.8, 0.8);

// I found it hard to read the block-in-a-block-in-a... while editing here, so I've taken them apart:
void (^scaleDownAnimation)() = ^{
    self.view.transform = downscalingTransform;
};

void (^restoreScaleAnimation)() = ^{
    self.view.transform = originalTransform;
};

void (^pushControllerAnimation)() = ^{
    [self pushViewController:viewController animated:NO];
};

void (^pushAnimationCompletion)(BOOL) = ^(BOOL unused) {
    [UIView animateWithDuration:scaleDuration
                          delay:0
                        options:UIViewAnimationOptionCurveLinear
                     animations:restoreScaleAnimation
                     completion:nil];
};

void (^downscaleCompletion)(BOOL) = ^(BOOL unused){
    UIViewAnimationOptions linearFlipFromLeft = UIViewAnimationOptionCurveLinear | UIViewAnimationOptionTransitionFlipFromLeft;
    [UIView transitionWithView:self.view
                      duration:1
                       options:linearFlipFromLeft
                    animations:pushControllerAnimation
                    completion:pushAnimationCompletion];
};

[UIView animateWithDuration:scaleDuration
                      delay:0
                    options:UIViewAnimationOptionCurveEaseIn
                 animations:scaleDown
                 completion:downscaleCompletion];

注意牛肉在前六行之内，其余的只是为了完整。

Answer 2

我已经按照您的描述链接了动画，没有任何延迟。

您正在使用 transitionWithView:duration:options:animations:completion: 动画块是对 pushViewController:animated: 的调用。这对我来说没有任何意义。

transitionWithView:duration:options:animations:completion 从一个子视图过渡到下一个。

pushViewController:animated 是一种将视图控制器推送到导航控制器堆栈的导航控制器方法。将这两个一起使用对我来说毫无意义。

如果您希望缩放动画以推送结束，则只需直接从完成块调用推送动画。

Answer 3

根据我的经验，“使用完成块链接动画”是有缺陷的（在子动画之间产生小的停顿）。我确保没有 loadView/viewDidLoad/viewWillAppear/viewWillLayoutSubviews 滥用发生。

完全相同的代码会因“completion-block_chainig”而结结巴巴，但如果我将其重新设计为使用关键帧，则效果会很好。

所以，而不是（例如）...

        UIView.animate(withDuration: 1, animations: {[weak self] in
            ...
            self?.view.layoutIfNeeded()
        }, completion: { [weak self] _ in
            UIView.animate(withDuration: 1, animations: {
                ...
                self?.view.layoutIfNeeded()
            }, completion: { [weak self] _ in
                UIView.animate(withDuration: 1, animations: {
                    ...
                    self?.view.layoutIfNeeded()
                }, completion: { [weak self] _ in
                    ...
                })
            })
        })

...我更喜欢...

        UIView.animateKeyframes(withDuration: 3, delay: 0, options: .calculationModeLinear, animations: {[weak self] in

            UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.33, animations: {[weak self] in
                ...
                self?.view.layoutIfNeeded()
            })

            UIView.addKeyframe(withRelativeStartTime: 0.33, relativeDuration: 0.33, animations: {[weak self] in
                ...
                self?.view.layoutIfNeeded()
            })

            UIView.addKeyframe(withRelativeStartTime: 0.66, relativeDuration: 0.33, animations: {[weak self] in
                ...
                self?.view.layoutIfNeeded()
            })

        }, completion: { [weak self] _ in
            ...
        })