Swift导航栏中图像的动画变化答案

【问题标题】：Animate change of image in Navigation Bar in SwiftSwift导航栏中图像的动画变化
【发布时间】：2018-11-07 11:00:59
【问题描述】：

我在 Storyboard 中创建的 ViewController 的导航栏中有一个图像和一个图像的插座属性，并且想要动画到另一个图像的过渡。视图控制器使用转换以模态方式启动。

我可以通过更改图像的 alpha 值来动画淡化图像。但是，如果我更改图像而不是淡化它，则没有动画。相反，新图像在页面加载后立即可见。无论我将动画代码放在viewDidLoad 还是viewWillAppear 中都是如此。我希望这个动画只在视图加载时发生一次，但是，我在viewWillAppear 中尝试了它，只是为了看看我是否能得到效果。

这是我的代码

// in viewdidload or viewwillappear
   let newImage = UIImage(named: "headshot.png")
    UIView.transition(with: self.imageView,
                      duration:0.5,
                      options: .transitionCrossDissolve,
                      animations: { self.ImageView.image = newImage },
                      completion: nil)

相对于常规视图，导航栏中的图像动画有什么特别之处吗？或者我需要做什么来动画导航栏中图像的变化？

【问题讨论】：

标签： ios swift animation uinavigationbar

【解决方案1】：

您的图像没有动画的原因是因为从编译器的角度来看，用另一个图像替换图像（就像插入图像一样）是一个原子动作。这意味着self.ImageView.image = newImage 是在一个步骤中发生的一行。也就是说，在任何时间点，您的 imageView 要么将 newImage 作为其 image 属性，要么没有。像这样以原子方式发生的状态变化不能随着时间的推移而动画化。

另一种看待它的方式是，为了将动画的持续时间更改为 0.5 秒（而不是在一个步骤中原子地执行此操作），XCode 编译器必须逐字地将图像放在您的imageView 在0.5 秒内的点点滴滴。显然，这是未定义的行为。编译器如何知道图像的哪些部分在什么时间放置在屏幕上？

解决您的问题的一个简单方法是将两个单独的imageViews（其中一个以透明开头）放置在屏幕上完全相同的位置。每个imageViews 都有一个单独的图像，您可以通过简单地淡出一个图像然后淡入另一个图像在这两个图像之间进行转换，如下所示：

class viewController: UIViewController {
    let imageView1 = UIImageView("headshot1.png")
    let imageView2 = UIImageView("headshot2.png")

    override viewDidLoad() {
        super.viewDidLoad()

        /* add imageViews to your view and place them both 
           in the middle of the screen */
        imageView1.translatesAutoresizingMaskIntoConstraints = false
        imageView1.alpha = 1.0
        self.addSubview(imageView1)

        /* notice that this imageView is completely transparent */
        imageView2.translatesAutoresizingMaskIntoConstraints = false
        imageView2.alpha = 0.0
        self.addSubview(imageView2)

        /* place both imageViews in the middle of your screen,
           with imageView1 completely visible and imageView2
           completely transparent */
        imageView1.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        imageView1.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true

        imageView2.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        imageView2.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true

        // fade out first imageView
        UIView.animate(withDuration: 0.25) {
        imageView1.alpha = 0.0
        }

        // fade in second imageView
        UIView.animate(withDuration: 0.25) {
        imageView2.alpha = 1.0
        }
    }
}

您也可以使用 transition 函数代替我的 animate 函数 - 逻辑几乎相同。

【讨论】：