7.3_缓入 .easeIn 与 缓出 .easeOut

SwiftUI动画中，.easeIn 和 .easeOut 是两种常用的内置动画曲线，它们分别代表加速和减速的效果。掌握它们，能让你的动画更具表现力！🚀

缓入（Ease In）：起步慢，后程快

.easeIn 动画曲线的特点是开始时速度较慢，然后逐渐加速。想象一下，一辆汽车缓缓启动，然后逐渐加速到正常速度。这种效果非常适合用于元素的进入动画，例如：

• 视图从屏幕外滑入。
• 元素逐渐显示出来。
• 属性值缓慢增加。

使用 .easeIn 可以让动画显得更加自然和流畅，避免突兀感。例如，一个按钮从透明到完全显示，使用 .easeIn 会让它看起来更优雅。

缓出（Ease Out）：起步快，后程慢

与 .easeIn 相反，.easeOut 动画曲线的特点是开始时速度较快，然后逐渐减速。想象一下，一辆汽车高速行驶，然后逐渐减速到停止。这种效果非常适合用于元素的退出动画，例如：

• 视图滑出屏幕。
• 元素逐渐消失。
• 属性值缓慢减小。

.easeOut 可以让动画的结束更加柔和，避免生硬感。例如，一个视图从屏幕中心缩小并消失，使用 .easeOut 会让它看起来更平滑。

如何选择：.easeIn vs .easeOut？

选择 .easeIn 还是 .easeOut，取决于你想要表达的动画效果。一般来说：

1. 进入动画：使用 .easeIn，让元素逐渐进入视野。
2. 退出动画：使用 .easeOut，让元素平滑退出视野。

当然，这并不是绝对的规则。你可以根据具体情况进行调整，甚至可以结合使用 .easeIn 和 .easeOut，创造出更复杂的动画效果。例如，一个视图先使用 .easeIn 进入，然后使用 .easeOut 退出，可以产生一种“弹簧”的效果。

• 例子：一个气泡从屏幕底部升起（.easeIn），到达顶部后缓缓消失（.easeOut）。
• 例子：一个菜单从屏幕左侧滑入（.easeIn），点击后平滑滑出（.easeOut）。

代码示例

import SwiftUI

struct ContentView: View {
    @State private var isAnimating = false

    var body: some View {
        VStack {
            Circle()
                .frame(width: 100, height: 100)
                .offset(x: isAnimating ? 150 : -150, y: 0)
                .animation(.easeIn(duration: 1), value: isAnimating) // 使用 easeIn

            Button("Animate") {
                isAnimating.toggle()
            }
        }
    }
}

在这个例子中，圆圈会以 .easeIn 的方式从左向右移动。你可以尝试将 .easeIn 替换为 .easeOut，看看效果有什么不同。你会发现，使用 .easeOut 时，圆圈一开始移动速度很快，然后逐渐减速。🎉