MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

SwiftUI动画实现与转场效果定制

2023-07-086.1k 阅读

SwiftUI动画基础

隐式动画

在SwiftUI中，隐式动画是一种非常便捷的动画实现方式。当视图的某些属性发生变化时，SwiftUI会自动为这些变化添加动画效果，而无需开发者手动编写复杂的动画代码。

例如，我们可以通过修改视图的 opacity（透明度）属性来实现淡入淡出的动画效果。假设我们有一个简单的 Text 视图：

struct ContentView: View {
    @State private var isVisible = true
    
    var body: some View {
        VStack {
            if isVisible {
                Text("Hello, SwiftUI!")
                    .opacity(isVisible ? 1 : 0)
            }
            Button("Toggle Visibility") {
                isVisible.toggle()
            }
        }
        .animation(.easeInOut, value: isVisible)
    }
}

在上述代码中，我们使用 @State 来声明一个布尔变量 isVisible，用于控制 Text 视图的显示与隐藏。通过修改 isVisible 的值，Text 视图的 opacity 属性会相应改变。同时，我们使用 .animation(.easeInOut, value: isVisible) 为 isVisible 的变化添加了一个缓入缓出的动画效果。这里的 value 参数用于告诉SwiftUI哪些值的变化需要触发动画。

显式动画

与隐式动画相对，显式动画给予开发者更多的控制权。开发者可以精确地定义动画的起始状态、结束状态、持续时间、动画曲线等参数。

以 withAnimation 函数为例，它允许我们在代码块中显式地指定动画效果。假设我们有一个 Rectangle 视图，我们想要在点击按钮时，让它的宽度逐渐增加：

struct ContentView: View {
    @State private var rectangleWidth: CGFloat = 100
    
    var body: some View {
        VStack {
            Rectangle()
                .fill(Color.blue)
                .frame(width: rectangleWidth, height: 50)
            Button("Increase Width") {
                withAnimation(.linear(duration: 2)) {
                    rectangleWidth += 50
                }
            }
        }
    }
}

在上述代码中，我们通过 @State 声明了 rectangleWidth 变量来控制 Rectangle 的宽度。当点击按钮时，withAnimation(.linear(duration: 2)) 块内的 rectangleWidth += 50 代码会触发一个持续时间为2秒的线性动画，使得 Rectangle 的宽度平滑增加。

动画曲线

动画曲线决定了动画在持续时间内的变化速率。SwiftUI提供了多种预定义的动画曲线，如 .easeIn、.easeOut、.easeInOut、.linear 等。

  • .easeIn：动画开始时速度较慢，然后逐渐加快。适用于模拟物体从静止开始加速的场景，比如一辆汽车启动。
  • .easeOut：动画开始时速度较快，然后逐渐减慢。适用于模拟物体减速停止的场景，比如一个球滚到停止。
  • .easeInOut：动画开始和结束时速度较慢，中间速度较快。这是一种比较常用的曲线，能给人一种自然的加速和减速感觉，类似于现实生活中很多物体的运动方式。
  • .linear：动画以恒定的速度进行，没有加速或减速过程。适用于一些需要均匀变化的场景，比如进度条的填充。

我们可以通过修改动画的曲线来改变动画的视觉效果。例如，将前面 Rectangle 宽度增加的动画曲线改为 .easeIn：

struct ContentView: View {
    @State private var rectangleWidth: CGFloat = 100
    
    var body: some View {
        VStack {
            Rectangle()
                .fill(Color.blue)
                .frame(width: rectangleWidth, height: 50)
            Button("Increase Width") {
                withAnimation(.easeIn(duration: 2)) {
                    rectangleWidth += 50
                }
            }
        }
    }
}

这样，当点击按钮时，Rectangle 的宽度会以 easeIn 的曲线方式增加，开始时增加速度较慢，之后逐渐加快。

复杂动画实现

组合动画

在实际应用中，我们常常需要同时执行多个动画，这就涉及到组合动画的概念。SwiftUI提供了多种方式来组合动画。

一种常见的方式是通过 animation 修饰符链式调用。例如，我们想要同时对一个 Circle 视图进行缩放和旋转动画：

struct ContentView: View {
    @State private var isAnimating = false
    
    var body: some View {
        VStack {
            Circle()
                .fill(Color.red)
                .frame(width: 100, height: 100)
                .scaleEffect(isAnimating ? 2 : 1)
                .rotationEffect(.degrees(isAnimating ? 360 : 0))
                .animation(.easeInOut(duration: 2), value: isAnimating)
            Button("Start Animation") {
                isAnimating.toggle()
            }
        }
    }
}

在上述代码中，Circle 视图同时应用了 scaleEffect 和 rotationEffect，并且通过 animation 修饰符为这两个效果添加了相同的动画，当 isAnimating 变量改变时，缩放和旋转动画会同时进行。

另一种组合动画的方式是使用 AnimationGroup。AnimationGroup 允许我们将多个动画组合在一起，并为它们设置不同的参数。例如：

struct ContentView: View {
    @State private var isAnimating = false
    
    var body: some View {
        VStack {
            Rectangle()
                .fill(Color.green)
                .frame(width: 100, height: 100)
                .offset(x: isAnimating ? 200 : 0, y: 0)
                .opacity(isAnimating ? 0 : 1)
                .animation(
                    AnimationGroup {
                        Animation.easeInOut(duration: 2).delay(0.5).offset(x: 200, y: 0)
                        Animation.easeInOut(duration: 1).opacity(0)
                    },
                    value: isAnimating
                )
            Button("Start Animation") {
                isAnimating.toggle()
            }
        }
    }
}

在这个例子中，Rectangle 视图同时进行了偏移和透明度变化的动画。通过 AnimationGroup，我们为偏移动画设置了0.5秒的延迟，并且两个动画的持续时间也不同，从而实现了更复杂的动画组合效果。

重复与循环动画

SwiftUI支持创建重复和循环动画，这在很多场景下非常有用，比如创建加载动画、动态背景等。

我们可以通过 repeatCount 或 repeatForever 方法来实现重复动画。例如，我们想要让一个 Image 视图无限循环旋转：

struct ContentView: View {
    var body: some View {
        Image(systemName: "arrow.clockwise")
            .resizable()
            .frame(width: 50, height: 50)
            .rotationEffect(.degrees(360))
            .animation(
                Animation.linear(duration: 2)
                    .repeatForever(autoreverses: false),
                value: ())
    }
}

在上述代码中，Animation.linear(duration: 2).repeatForever(autoreverses: false) 表示以2秒的线性动画持续时间，无限循环旋转，并且不进行反向播放（如果 autoreverses 设置为 true，则动画会在每次循环结束时反向播放）。

如果我们只想让动画重复特定的次数，可以使用 repeatCount。例如，让一个 Rectangle 视图在宽度和高度上交替缩放5次：

struct ContentView: View {
    @State private var isAnimating = false
    
    var body: some View {
        VStack {
            Rectangle()
                .fill(Color.yellow)
                .frame(width: isAnimating ? 200 : 100, height: isAnimating ? 100 : 200)
                .animation(
                    Animation.easeInOut(duration: 1)
                        .repeatCount(5, autoreverses: true),
                    value: isAnimating
                )
            Button("Start Animation") {
                isAnimating.toggle()
            }
        }
    }
}

这里，Animation.easeInOut(duration: 1).repeatCount(5, autoreverses: true) 表示以1秒的缓入缓出动画持续时间，重复5次，并且每次循环结束时反向播放，从而实现宽度和高度交替缩放的效果。

弹簧动画

弹簧动画能模拟出类似现实世界中弹簧的弹性效果，给动画增添自然和生动的感觉。在SwiftUI中，我们可以通过 Animation.spring 来创建弹簧动画。

例如，我们想要让一个 Text 视图在点击按钮时，像弹簧一样跳动：

struct ContentView: View {
    @State private var isJumping = false
    
    var body: some View {
        VStack {
            Text("Jump!")
                .font(.largeTitle)
                .scaleEffect(isJumping ? 1.5 : 1)
                .animation(
                    Animation.spring(
                        response: 0.5,
                        dampingFraction: 0.7,
                        blendDuration: 0.5
                    ),
                    value: isJumping
                )
            Button("Make it Jump") {
                isJumping.toggle()
            }
        }
    }
}

在上述代码中，Animation.spring 有几个重要的参数：

  • response：控制弹簧对力的响应速度，值越小，响应越快。
  • dampingFraction：决定弹簧的阻尼程度，值越接近0，弹簧的振荡越明显；值越接近1，弹簧越容易停下来。
  • blendDuration：用于控制弹簧动画与其他动画混合的时间。

通过调整这些参数，我们可以创建出各种不同弹性效果的弹簧动画。

SwiftUI转场效果定制

基本转场

SwiftUI提供了一些基本的转场效果，如淡入淡出、滑动和缩放等。这些转场效果可以在视图切换时提供平滑的过渡体验。

淡入淡出转场

淡入淡出转场是一种常见的转场效果，用于在两个视图之间实现平滑的透明度变化。我们可以通过 transition 修饰符来应用淡入淡出转场。例如，我们有两个 Text 视图，通过点击按钮在它们之间切换：

struct ContentView: View {
    @State private var showFirstView = true
    
    var body: some View {
        VStack {
            if showFirstView {
                Text("First View")
                    .transition(.opacity)
            } else {
                Text("Second View")
                    .transition(.opacity)
            }
            Button("Toggle View") {
                showFirstView.toggle()
            }
        }
        .animation(.easeInOut, value: showFirstView)
    }
}

在上述代码中，当 showFirstView 变量改变时，两个 Text 视图会通过淡入淡出的方式进行切换。.transition(.opacity) 表示应用透明度转场效果，并且通过 .animation 为切换过程添加了缓入缓出的动画。

滑动转场

滑动转场可以让视图从一侧滑入或滑出屏幕。我们可以通过 transition 修饰符结合 SlideTransition 来实现滑动转场。例如：

struct ContentView: View {
    @State private var showFirstView = true
    
    var body: some View {
        VStack {
            if showFirstView {
                Text("First View")
                    .transition(
                        .slide
                            .combined(with: .opacity)
                    )
            } else {
                Text("Second View")
                    .transition(
                        .slide
                            .combined(with: .opacity)
                    )
            }
            Button("Toggle View") {
                showFirstView.toggle()
            }
        }
        .animation(.easeInOut, value: showFirstView)
    }
}

在这个例子中，.transition(.slide) 表示应用滑动转场效果，并且我们还通过 combined(with: .opacity) 将滑动转场与淡入淡出转场结合起来，使视图在滑动的同时伴有透明度变化，让转场效果更加平滑自然。

缩放转场

缩放转场可以让视图在切换时进行放大或缩小。我们可以通过 transition 修饰符结合 ScaleTransition 来实现缩放转场。例如：

struct ContentView: View {
    @State private var showFirstView = true
    
    var body: some View {
        VStack {
            if showFirstView {
                Text("First View")
                    .transition(
                        .scale
                            .combined(with: .opacity)
                    )
            } else {
                Text("Second View")
                    .transition(
                        .scale
                            .combined(with: .opacity)
                    )
            }
            Button("Toggle View") {
                showFirstView.toggle()
            }
        }
        .animation(.easeInOut, value: showFirstView)
    }
}

这里，.transition(.scale) 表示应用缩放转场效果，同样结合了淡入淡出转场，使得视图在缩放的过程中伴有透明度变化，增强转场的视觉效果。

自定义转场

除了基本的转场效果，SwiftUI还允许开发者创建自定义转场效果，以满足特定的设计需求。

我们可以通过创建一个符合 AnyTransition 协议的自定义转场来实现。例如，我们想要创建一个从底部向上翻页的转场效果：

extension AnyTransition {
    static var customFlipFromBottom: AnyTransition {
        .modifier(
            active: FlipFromBottomModifier(isPresenting: true),
            identity: FlipFromBottomModifier(isPresenting: false)
        )
    }
}

struct FlipFromBottomModifier: AnimatableModifier {
    var isPresenting: Bool
    var animatableData: Double
    
    init(isPresenting: Bool) {
        self.isPresenting = isPresenting
        self.animatableData = isPresenting ? 1 : 0
    }
    
    func body(content: Content) -> some View {
        content
            .rotation3DEffect(
                .degrees(animatableData == 1 ? 0 : 180),
                axis: (x: 1, y: 0, z: 0)
            )
            .offset(y: animatableData == 1 ? 0 : UIScreen.main.bounds.height)
    }
}

然后在视图中使用这个自定义转场：

struct ContentView: View {
    @State private var showFirstView = true
    
    var body: some View {
        VStack {
            if showFirstView {
                Text("First View")
                    .transition(.customFlipFromBottom)
            } else {
                Text("Second View")
                    .transition(.customFlipFromBottom)
            }
            Button("Toggle View") {
                showFirstView.toggle()
            }
        }
        .animation(.easeInOut, value: showFirstView)
    }
}

在上述代码中，我们首先扩展了 AnyTransition 类型，定义了一个名为 customFlipFromBottom 的自定义转场。FlipFromBottomModifier 是一个实现了 AnimatableModifier 协议的结构体，它通过 rotation3DEffect 和 offset 来实现从底部向上翻页的动画效果。animatableData 用于控制动画的进度，当 isPresenting 为 true 时，视图从底部向上翻入；当 isPresenting 为 false 时，视图从顶部向下翻出。

转场与导航

在实际应用中，转场效果常常与导航相结合，为用户提供流畅的页面切换体验。

SwiftUI的 NavigationView 提供了默认的导航转场效果，但我们也可以自定义这些转场。例如，我们可以为 NavigationLink 添加自定义转场效果：

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink("Go to Detail", destination: DetailView())
                    .navigationBarTitle("Main")
                    .buttonStyle(PlainButtonStyle())
                    .transition(.slide)
                    .animation(.easeInOut)
            }
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("Detail View")
            .navigationBarTitle("Detail")
    }
}

在上述代码中，我们为 NavigationLink 添加了 .transition(.slide) 转场效果，使得在从主视图导航到详情视图时，详情视图以滑动的方式进入屏幕。同时，通过 .animation(.easeInOut) 为转场添加了缓入缓出的动画，让过渡更加平滑。

通过合理地定制转场效果，我们可以为应用程序打造独特且用户友好的导航体验，提升用户对应用的好感度和使用体验。无论是简单的淡入淡出，还是复杂的自定义转场，都能为应用的界面切换增添魅力。

在SwiftUI中，动画和转场效果的实现为开发者提供了丰富的创意空间，使得我们能够创建出极具吸引力和交互性的应用程序界面。通过深入理解和灵活运用这些技术，我们可以将应用的用户体验提升到一个新的高度。从基础的隐式和显式动画，到复杂的组合动画、重复动画和弹簧动画，再到各种转场效果的定制，每一个方面都蕴含着无限的可能性，等待开发者去探索和挖掘。无论是小型的个人项目，还是大型的商业应用，SwiftUI的动画和转场技术都能为其增色不少。