3.2_实现位置与大小变化动画

想要让你的 iOS 应用界面更加生动有趣吗？🎉 那么，掌握位置与大小变化动画绝对是关键！通过 UIView.animate(withDuration:animations:) 方法，你可以轻松实现视图的位置和大小的平滑过渡，为用户带来更佳的交互体验。

动画基础：位置变化

首先，我们来看看如何实现位置变化动画。想象一下，你希望一个按钮从屏幕左侧滑动到屏幕中央。这可以通过修改按钮的 center 属性来实现。

UIView.animate(withDuration: 1.0) { // 动画时长1秒
    myButton.center = CGPoint(x: self.view.center.x, y: myButton.center.y) // 移动到屏幕中央
}

这段代码会让 myButton 在 1 秒内平滑地移动到屏幕的水平中心位置。是不是很简单？ 记住，CGPoint 结构体用于表示二维坐标系中的一个点。

动画基础：大小变化

接下来，我们学习如何实现大小变化动画。假设你希望一个图片视图在点击后放大。这可以通过修改视图的 transform 属性来实现。

UIView.animate(withDuration: 0.5) { // 动画时长0.5秒
    myImageView.transform = CGAffineTransform(scaleX: 1.2, y: 1.2) // 放大1.2倍
}

这段代码会让 myImageView 在 0.5 秒内放大 1.2 倍。CGAffineTransform 是一个用于表示二维仿射变换的结构体，可以实现缩放、旋转、平移等效果。

组合动画：位置与大小同时变化

更酷的是，你可以将位置和大小变化动画组合在一起，创造出更复杂的动画效果！ 🤩

UIView.animate(withDuration: 0.8) { // 动画时长0.8秒
    myView.center = CGPoint(x: self.view.frame.width - 50, y: 100) // 移动到右上角
    myView.transform = CGAffineTransform(scaleX: 0.5, y: 0.5) // 缩小到一半
}

这段代码会让 myView 在 0.8 秒内移动到屏幕右上角，并缩小到原来的一半。

进阶技巧：Auto Layout 与动画

在使用 Auto Layout 的情况下，直接修改 frame 或 center 可能会导致布局冲突。更好的做法是修改约束（Constraints）的值，然后调用 layoutIfNeeded() 来触发动画。

// 假设 myView 的宽度约束为 widthConstraint
widthConstraint.constant = 200 // 修改宽度约束
UIView.animate(withDuration: 0.3) {
    myView.superview?.layoutIfNeeded() // 触发布局更新动画
}

这种方法可以确保动画与 Auto Layout 协同工作，避免出现意外的布局问题。

实践案例：按钮点击动画

让我们通过一个实际的例子来巩固所学知识。假设你想要在用户点击按钮时，按钮稍微放大并改变位置。

@objc func buttonTapped() {
    UIView.animate(withDuration: 0.2, animations: {
        myButton.transform = CGAffineTransform(scaleX: 1.1, y: 1.1) // 稍微放大
        myButton.center.y += 10 // 向下移动10个像素
    }) { (_) in // 动画完成后的回调
        UIView.animate(withDuration: 0.2) {
            myButton.transform = CGAffineTransform.identity // 恢复原始大小
            myButton.center.y -= 10 // 恢复原始位置
        }
    }
}

这段代码首先在 0.2 秒内将按钮放大 1.1 倍并向下移动 10 个像素，然后在动画完成后，再用 0.2 秒将按钮恢复到原始大小和位置。 这样就实现了一个简单的按钮点击动画效果。👍

希望这些例子能帮助你更好地理解和掌握位置与大小变化动画！ 动画的世界非常精彩，尽情发挥你的创造力吧！ 🚀