UIView animateWithDuration 动画块之外的动画自动布局视图

Posted 2023-03-13

【中文标题】UIView animateWithDuration 动画块之外的动画自动布局视图

【英文标题】：UIView animateWithDuration Animating Auto-Layout Views Outside of Animation Block

【发布时间】：2016-10-19 20:38:49

【问题描述】：

我在整个应用程序中的不同时间都注意到，当我调用 UIView.animateWithDuration 时，如果我有任何其他类型的自动布局请求，或者甚至像更改 NSLayoutConstraint 的常量这样简单的事情，这些变化即使它们不在动画块内，也会被动画化。例如：我有一个UIViewController，它在调用viewDidAppear 之后，会将用户选择的图像添加到UIScrollView，以便可以调整其大小和进行编辑。我正在努力添加一个带有一些 GIF 的小演示视图，以在用户第一次使用该应用程序时为他们提供帮助。一旦视图显示，它应该将图像（我首先将其设置为适合他们的屏幕）添加到滚动视图，然后将demonstrationView alpha 从零设置为 1.0。我遇到的问题是，即使我在 animateWithDuration 之前调用了添加和调整图像大小的函数assignImageChosen，并且在动画块之外，尺寸约束的变化也是动画的。

override func viewDidAppear(animated: Bool) 

    if let image = startImage 
        self.assignImageChosen(image)
        currentlyEditing = true
    

    if preLoadGame 

        UIView.animateWithDuration(1.0, delay: 0.5, options: UIViewAnimationOptions.CurveEaseInOut, animations: 


            self.demonstrationView.alpha = 1.0
            self.view.layoutIfNeeded()

            , completion: nil)

    

这里是函数assignImageChosen：

func assignImageChosen(image: UIImage) 

    var ratio:CGFloat!
    let screen:CGFloat = max(self.scrollView.frame.height, self.scrollView.frame.width)
    var maxImage:CGFloat!
    if UIDevice.currentDevice().orientation.isPortrait 
        if image.size.height >= image.size.width 
            maxImage = max(image.size.height, image.size.width)
        
        else 
            maxImage = min(image.size.height, image.size.width)
        
    
    else 
        if image.size.width >= image.size.height 
            maxImage = max(image.size.height, image.size.width)
        
        else 
            maxImage = min(image.size.height, image.size.width)
        
    

    if maxImage > screen 
        ratio = screen/maxImage
    
    else 
        ratio = 1.0
    

    self.imageView.image = image
    self.imageHeight.constant = image.size.height * ratio
    self.scrollView.contentSize.height = image.size.height * ratio
    self.imageWidth.constant = image.size.width * ratio
    self.scrollView.contentSize.width = image.size.width * ratio

变量imageHeight 和imageWidth 都是NSLayoutConstraint 的，imageView 是它们设置的UIImageView。因此，一旦我更改了图像，我就更改了约束，以便 UIScrollView 内的 imageView 适合屏幕。问题是当我这样做时，即使在动画块之外调用更改，这些更改仍然是动画的。

这是一个 GIF 示例，说明我正在尝试（糟糕地）通过文字进行交流：

我找到了一种方法来规避这个问题，但感觉就像一个完整的 hack。我使用dispatch_after 命令手动对系统进行编码以延迟动画的执行，如下所示：

override func viewDidAppear(animated: Bool) 

    if let image = startImage 
        self.assignImageChosen(image)
        currentlyEditing = true
    

    if preLoadGame 

        let delay = 0.5 * Double(NSEC_PER_SEC)
        let popTime = dispatch_time(DISPATCH_TIME_NOW, Int64(delay))
        dispatch_after(popTime, dispatch_get_main_queue(), 
            UIView.animateWithDuration(1.0, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: 


                self.demonstrationView.alpha = 1.0
                self.view.layoutIfNeeded()

                , completion: nil)
        )

    

因此，我没有在animateWithDuration 函数中使用delay 变量，而是延迟了函数的执行。它有效，但我认为必须有更好的方法来做到这一点！为什么这些布局更改不在动画块内时会被动画化？我怎样才能以适当、有效的方式解决这个问题？

这是我的 hack 后的样子，以及我想象没有它时的样子：

感谢您对这个令人沮丧的问题的任何帮助！

【参考方案1】：

发生这种情况是因为在动画块中调用 layoutIfNeeded 会导致所有待处理的布局更改都计算出新值以供动画使用。其实这就是用约束对变化进行动画化的方式，将它们设置在动画块之外，然后在块中调用layoutIfNeeded；新值被计算并用于动画。

幸运的是，解决方案似乎很简单，在制作动画之前调用layoutIfNeeded，然后在块中再次调用它。根据this answer 和其他人的说法，这实际上是Apple 的官方推荐，尽管他们提供的apple.com 链接已损坏。

（顺便说一下，关于你的 hack，在某些情况下你需要在 UIKit 完成布局传递之后错开更改，例如在 reloadData 完成后在 UITableView 上做一些事情。“正确的 hack " 是做一个 UIViewAnimation，然后在它的完成块中做第二个动画，保持 UIKit 中的顺序。）

【讨论】：

哇，谢谢！我无法相信解决方案是如此简单。这个问题几个月来一直困扰着我！当答案如此简单时，总是苦乐参半：很高兴知道它很容易解决，知道您在如此简单的事情上浪费了这么多时间令人沮丧！再次感谢