如何使用 AutoLayout 在 swift 中平滑地动画化 UIImageView？

Question

我正在尝试复制我当前使用的应用程序的动画。在应用程序中，拍照后，如果用户点击 UIImageView，它会平滑地展开到一定大小，而在点击 UIImageView 时，它会平滑地收缩到原始大小。

这是一个例子：

但是，当我尝试复制它时，动画是 "wooply"，如下所示：

这是我的代码示例：

if recogizer.view == thumbnailImageView && isThumbnailExpanded == false
{
    UIView.animateWithDuration(1, animations: {() -> Void in

    self.thumbnailImageView!.frame.size.width = self.view.frame.size.width * 0.7
    self.thumbnailImageView!.frame.size.height = self.view.frame.size.height * 0.6
    self.thumbnailImageView!.frame.origin.x = (self.view.frame.width / 2) - (self.thumbnailImageView!.frame.size.width / 2)
    self.thumbnailImageView!.frame.origin.y = -100

    })

    isThumbnailExpanded = true
    }
else if recogizer.view == thumbnailImageView && isThumbnailExpanded == true
{
    UIView.animateWithDuration(1, animations: {() -> Void in

    self.thumbnailImageView!.frame.size.width = self.thumbnailImageViewWidth
    self.thumbnailImageView!.frame.size.height = self.thumbnailImageViewHeight
    self.thumbnailImageView!.frame.origin.x = self.thumbnailImageViewXPosition
    self.thumbnailImageView!.frame.origin.y = self.thumbnailImageViewYPosition

    })

    isThumbnailExpanded = false
}

这是我的自动布局约束：

如何使 UIImageView 的动画更流畅，如上所示？

谢谢

Answer 1

动画出现摇晃是因为您正在更改图像的宽高比，您应该保持宽高比以免挤压图像。

此外，您不应通过更改其框架来为基于约束的自动布局设置动画 UIView。在动画块中，您应该更改在故事板中添加的图像视图约束。

要获得对故事板创建的约束的引用，请通过 control 创建一个 IBOutlet - 将它们拖到您的视图控制器。这将在您的代码中创建一个 NSLayoutConstraint 类型的变量。在动画块中，更改每个要更改的约束的 constant 属性，然后在视图上调用 layoutIfNeeded。

UIView.animateWithDuration(1, animations: {

    yourConstraint.constant = 20
    // any other constraints...
    // ...
    thumbnailImageView.layoutIfNeeded()
})

如何使用 AutoLayout 在 swift 中平滑地动画化 UIImageView？

How to animated a UIImageView smoothly in swift with AutoLayout?

animation

uiimageview

ios

swift