SwiftUI实现曲线动画让你的UI更生动！

iOS

2022-12-21 06:23:10

SwiftUI 曲线动画：打造生动而迷人的 UI 交互

曲线动画，打造动感交互的强大工具

SwiftUI 的曲线动画功能犹如魔法一般，使开发者能够使用简洁的代码创建出复杂多样的动画效果。从流畅的移动到优雅的旋转，从动态的缩放再到渐显渐隐，曲线动画让你的 UI 界面瞬间充满生机与活力。

实现曲线动画的便捷之道：withAnimation()

SwiftUI 中的曲线动画通常通过 withAnimation() 方法实现。该方法拥有三个参数：

动画持续时间：掌控动画持续的秒数。
动画延迟时间：设定动画启动前的等待时间（单位为秒）。
动画曲线：选择决定动画节奏和速度的运动曲线。

常用曲线函数，打造个性化动画效果

SwiftUI 提供了五种常用的曲线函数，赋予开发者灵活定制动画的权利：

Linear： 均匀线性的动画运动。
EaseIn： 缓入曲线，动画起始阶段速度较慢，逐渐提速。
EaseOut： 缓出曲线，动画结束阶段速度较慢，逐渐减速。
EaseInOut： 缓入缓出曲线，动画起始和结束阶段速度较慢，中间阶段速度较快。
Spring： 弹簧曲线，赋予动画弹簧般的反弹效果。

示例代码：让矩形动起来

让我们通过一个简单的示例领略曲线动画的魅力：

import SwiftUI

struct ContentView: View {
    @State private var offset = CGSize.zero

    var body: some View {
        VStack {
            Button("Move View") {
                withAnimation(.easeInOut(duration: 1)) {
                    offset = CGSize(width: 100, height: 100)
                }
            }

            Rectangle()
                .frame(width: 100, height: 100)
                .offset(offset)
        }
    }
}