SwiftUI直通车系列（6）—— 使用动画

本系列博客是针对SwiftUI开发框架的快速入门介绍，之前系列博客地址：

前面的博客整体对使用SwiftUI进行页面布局与简单的用户交互做了介绍。我们知道，作为一个优秀的UI框架，其很重要的一点是对动画的支持，动画是提升用户体验的重要方式，在SwiftUI中，实现动画效果将变得非常容易。

一、使用属性动画

属性动画是指当组件的属性发生变化时所展示动画效果，例如组件的颜色、位置、尺寸、旋转角度等。在SwiftUI中，我们知道要动态的对组件样式进行更改，需要使用状态来控制。我们也可以使用状态来控制动画动作。

例如，我们定义一个按钮组件，当点击时，让其旋转180度，并略微放大，代码如下：

1struct DrawContent:View {
2    @State private var begin = false
3    var body: some View {
4        VStack(alignment: .center, spacing: 20) {
5            Button(action: {
6                self.begin.toggle()
7            }) {
8                Text("开始")
9                    .font(Font.system(size: 30))
10                    .rotationEffect(.degrees(self.begin ? 180 : 0))
11                    .scaleEffect(self.begin ? 2 : 1)
12                    .animation(.easeInOut(duration: 3))
13                                        
14            }
15        }
16    }
17}

其中，begin状态属性用来记录动画的状态，当一次点击此按钮时，会将当前按钮放大一倍，并旋转180度，再次点击按钮会动画还原。

rotationEffect用来定义组件的旋转角度，scaleEffect用来定义组件缩放的比例，与之类似，大部分用来渲染视图样式的属性都支持进行动画。animation用来设置动画的执行方式，如上代码所示，设置的为easeInOut表示动画执行的过程采用渐入渐出的方式，且动画执行的时长为3秒。

二、使用转场动画

属性动画用在组件的某些属性发生变化的场景，转场动画会影响组件的切换动作。当对组件进行展示或隐藏时，通常可以采用转场动画来处理。我们以上一篇博客自定义的图形组件为例，我们可以为其出现时加一个滑动动画，示例代码如下：

1extension Animation {
2    static func custom() -> Animation {
3        Animation.spring(response: 1.5, dampingFraction: 0.5, blendDuration: 0.5)
4            .speed(2)
5            .delay(0.03)
6    }
7}
8
9struct DrawContent:View {
10    @State private var begin = false
11    var body: some View {
12        VStack(alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/, spacing: 20) {
13            Button(action: {
14                withAnimation {
15                    self.begin.toggle()
16                }
17            }) {
18                Text("开始")
19                    .font(Font.system(size: 30))
20                    .rotationEffect(.degrees(self.begin ? 180 : 0))
21                    .scaleEffect(self.begin ? 2 : 1)
22                    .animation(.easeInOut(duration: 3))
23                                        
24            }
25            if self.begin {
26                ZStack{
27                    ForEach(0 ..< 10) { i in
28                        DrawTestView(angle: Angle(degrees:Double(36*i))).opacity( 0.3)
29                    }
30                }.animation(.custom())
31                .transition(.slide)
32            }
33
34        }
35
36    }
37}

如上代码所示，其中custom是我们自定义的一种动画模式，上面采用了阻尼动画，并自定义了动画的阻尼参数，速度，延时等属性。

SwiftUI直通车系列（6）—— 使用动画

SwiftUI直通车系列（6）—— 使用动画

一、使用属性动画

二、使用转场动画

评论区

相关推荐