自定义动画效果

在 SwiftUI 中，除了基本的动画效果，你还可以创建自定义动画以实现更复杂和独特的视觉表现。以下是自定义动画效果的介绍和示例。

1. 自定义动画类型

使用 Animation 类型可以创建自定义的动画效果，包括设置时长、缓动函数和重复策略。

示例：自定义动画类型

import SwiftUI

struct CustomAnimationTypeExample: View {
    @State private var isAnimated = false

    var body: some View {
        VStack {
            Button("Tap to Animate") {
                withAnimation(customAnimation) {
                    isAnimated.toggle() // 切换状态
                }
            }
            .font(.title)
            .padding()

            Rectangle()
                .fill(Color.blue)
                .frame(width: 100, height: isAnimated ? 200 : 100) // 根据状态调整高度
                .cornerRadius(20)
        }
        .padding()
    }

    // 自定义动画
    var customAnimation: Animation {
        Animation.easeInOut(duration: 1).delay(0.2).repeatCount(2, autoreverses: true)
    }
}

2. 自定义路径动画

可以通过修改路径实现更复杂的动画效果，使用 Path 和 Animatable 协议来创建自定义动画。

示例：自定义路径动画

struct CustomPathAnimationExample: View {
    @State private var animationAmount = 0.0

    var body: some View {
        VStack {
            Button("Animate Path") {
                withAnimation {
                    animationAmount += 1.0 // 增加动画值
                }
            }
            .font(.title)
            .padding()

            // 自定义路径
            CustomShape(animationAmount: animationAmount)
                .fill(Color.pink)
                .frame(width: 200, height: 200)
        }
    }
}

// 自定义形状
struct CustomShape: Shape {
    var animationAmount: Double

    func path(in rect: CGRect) -> Path {
        var path = Path()
        let width = rect.width
        let height = rect.height

        // 创建动态路径
        path.move(to: CGPoint(x: width / 2, y: 0))
        path.addLine(to: CGPoint(x: width, y: height * animationAmount))
        path.addLine(to: CGPoint(x: 0, y: height))
        path.closeSubpath()

        return path
    }
}

3. 使用关键帧动画

可以使用关键帧动画，通过修改视图的多个属性来创建复杂的效果。

示例：关键帧动画

struct KeyframeAnimationExample: View {
    @State private var animationStep: CGFloat = 0

    var body: some View {
        VStack {
            Button("Start Animation") {
                withAnimation(keyframeAnimation) {
                    animationStep += 1 // 触发关键帧动画
                }
            }
            .font(.title)
            .padding()

            Circle()
                .fill(Color.orange)
                .frame(width: 100, height: 100)
                .offset(x: animationOffset(animationStep), y: 0) // 根据动画步骤调整偏移
        }
    }

    // 关键帧动画
    var keyframeAnimation: Animation {
        Animation.timingCurve(0.6, 0.05, 0.2, 1.0, duration: 1)
    }

    // 动画偏移量
    private func animationOffset(_ step: CGFloat) -> CGFloat {
        switch step {
        case 0: return 0
        case 1: return 100
        case 2: return -100
        default: return 0
        }
    }
}

4. 结合手势和自定义动画

可以结合手势和自定义动画来创建更互动的效果。

示例：结合手势的自定义动画

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

    var body: some View {
        Circle()
            .fill(Color.green)
            .frame(width: 100, height: 100)
            .offset(offset) // 根据手势偏移
            .gesture(
                DragGesture()
                    .onChanged { gesture in
                        offset = gesture.translation // 更新偏移
                    }
                    .onEnded { _ in
                        withAnimation {
                            offset = .zero // 手势结束时返回原位
                        }
                    }
            )
            .animation(.spring()) // 添加弹簧动画效果
            .padding()
    }
}

5. 总结

  • 自定义动画类型：通过 Animation 类型自定义动画的时长和缓动效果。
  • 自定义路径动画：使用 Shape 和 Animatable 创建动态路径。
  • 关键帧动画：利用关键帧动画创建复杂的视觉效果。
  • 手势结合：通过手势与动画结合，增加交互性。

自定义动画可以极大地增强用户体验，让你的 SwiftUI 应用更具吸引力和互动性。

Last Updated::