ios - 使用选项卡栏 Controller 更改 View 时 UIView.animateWithDuration 完成得太早

Question

我正在通过增加简单图像的宽度来制作进度条:

let progressBar = createProgressBar(width: self.view.frame.width, height: 60.0)
let progressBarView = UIImageView(image: progressBar)
progressBarView.frame = CGRect(x: 0, y: 140, width: 0, height: 60)
UIView.animateWithDuration(60.0, delay: 0.0, options: [], animations: {
    progressBarView.frame.size.width = self.backgroundView.frame.size.width
    }, completion: {_ in
        print("progress completed")
    }
)

这按预期工作，但我在使用 TabBarController 更改 View 时遇到问题。当我更改 View 时，我希望进度栏继续在后台显示动画，以便我可以返回到此 View 来检查进度，但当我更改 View 时，它会立即结束，并调用完成 block 。

为什么会发生这种情况以及如何解决？

Answer 1

当您点击另一个 tabBar 项时，正在执行动画的 viewController 将处于 viewDidDisappear 状态，并且动画将被删除。

实际上，当viewController没有出现在屏幕前面时，不建议执行任何动画。

要继续中断的动画进度，您必须保持动画的当前状态，并在 tabBar 项目切换回来时恢复它们。

例如，您可以保存一些实例变量来保存动画的持续时间、进度、beginWidth 和 endWidth。并且可以在viewDidAppear中恢复动画:

override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated)

    // `self.duration` is the total duration of the animation. In your case, it's 60s.
    // `self.progress` is the time that had been consumed. Its initial value is 0s.
    // `self.beginWidth` is the inital width of self.progressBarView.
    // `self.endWidth`, in your case, is `self.backgroundView.frame.size.width`.

    if self.progress < self.duration {

        UIView.animateWithDuration(self.duration - self.progress, delay: 0, options: [.CurveLinear], animations: {

            self.progressBarView.frame.size.width = CGFloat(self.endWidth)
            self.beginTime = NSDate() // `self.beginTime` is used to track the actual animation duration before it interrupted.

            }, completion: { finished in
                if (!finished) {
                    let now = NSDate()
                    self.progress += now.timeIntervalSinceDate(self.beginTime!)
                    self.progressBarView.frame.size.width = CGFloat(self.beginWidth + self.progress/self.duration * (self.endWidth - self.beginWidth))
                } else {
                    print("progress completed")
                }
            }
        )
    }
}