如何将视图动画化到 X 和 Y 的中心？

Question

我有一个 ImageView，它对 Helper Header View 有 centerX 和 centerY 约束，如下图

我想将该徽标 imageView 设置为位于屏幕中央的动画，如下图所示：

我已经尝试了一些代码，但它不起作用，老实说，我不确定下面的这段代码，这是我尝试的。也许你有更好的方法。这是我试过的

首先，我尝试为两个约束提供标识符：

然后我删除约束并创建一个新的约束，如下面的代码：

 UIView.animate(withDuration: 1.1, delay: 0.5, usingSpringWithDamping:  0.4, initialSpringVelocity: 0.0, animations: {

            // remove the initial constraint
            self.mainLogoCenterXConstraint.isActive = false
            self.mainLogoCenterYConstraint.isActive = false

            // create new constraint
            let newMainLogoCenterXConstraint = NSLayoutConstraint(
                item: self.mainLogoImageView,
                attribute: .centerX,
                relatedBy: .equal,
                toItem: self.view,
                attribute: .centerY,
                multiplier: 1.0,
                constant: 0)
            newMainLogoCenterXConstraint.identifier = "mainLogoCenterXConstraint"
            newMainLogoCenterXConstraint.isActive = true

            let newMainLogoCenterYConstraint = NSLayoutConstraint(
                item: self.mainLogoImageView,
                attribute: .centerY,
                relatedBy: .equal,
                toItem: self.view,
                attribute: .centerY,
                multiplier: 1.0,
                constant: 0)
            newMainLogoCenterYConstraint.identifier = "mainLogoCenterYConstraint"
            newMainLogoCenterYConstraint.isActive = true


            self.view.layoutIfNeeded()

        }, completion: nil)

但它崩溃并给出错误：

'NSInvalidLayoutConstraintException', reason: 'Constraint improperly relates anchors of incompatible types:

也许你有更好的方法来实现这个....

Answer 1

您在创建与 self.mainLogoImageView.centerX 和 self.view.centerY 相关的第一个约束时出错 - 将第二个约束更改为 self.view.centerX。您不能将 x 轴锚点绑定到 y 轴锚点。

此外，请确保正确设置动画，请查看我关于如何使用自动布局执行此操作的回答 here。

你的情况：

// remove the initial constraint
self.mainLogoCenterXConstraint.isActive = false
self.mainLogoCenterYConstraint.isActive = false

// create new constraint
let newMainLogoCenterXConstraint = NSLayoutConstraint(
            item: self.mainLogoImageView,
            attribute: .centerX,
            relatedBy: .equal,
            toItem: self.view,
            attribute: .centerX,
            multiplier: 1.0,
            constant: 0)
newMainLogoCenterXConstraint.identifier = "mainLogoCenterXConstraint"
newMainLogoCenterXConstraint.isActive = true

let newMainLogoCenterYConstraint = NSLayoutConstraint(
            item: self.mainLogoImageView,
            attribute: .centerY,
            relatedBy: .equal,
            toItem: self.view,
            attribute: .centerY,
            multiplier: 1.0,
            constant: 0)
newMainLogoCenterYConstraint.identifier = "mainLogoCenterYConstraint"
newMainLogoCenterYConstraint.isActive = true

self.view.setNeedsLayout()

UIView.animate(withDuration: 1.1, delay: 0.5, usingSpringWithDamping:  0.4, initialSpringVelocity: 0.0, animations: {

    self.view.layoutIfNeeded()

}, completion: nil)

Answer 2

问题就在这里

     // create new constraint
        let newMainLogoCenterXConstraint = NSLayoutConstraint(
            item: self.mainLogoImageView,
            attribute: .centerX,
            relatedBy: .equal,
            toItem: self.view,
            attribute: .centerY,
            multiplier: 1.0,
            constant: 0)

你给中心 X,y 是兼容类型，但两者都应该是 centerX

此外，这不足以在视图中心显示图像，因为它是 helperView 的子视图，因此您需要设置

 self.helperView.clipsToBounds = false // if it's true

如何将视图动画化到 X 和 Y 的中心？

How to animate the view to the center of X and Y?

ios

swift

uiviewanimation