用SwiftUI给视图添加动画

级别：★☆☆☆☆
标签：「SwiftUI」「经常使用动画」「转场动画」
做者： WYW
审校： QiShare团队

---

前言：最近 奇舞647 写了《用SwiftUI 写了一个简单页面》，笔者也参考官方SwiftUI教程及网络博客，写了一个给视图添加改变位置、透明度、旋转、前景色、背景色及转场动画的Demo。Demo效果以下：

简单说一下Demo，首先在设置应用的rootViewController部分，笔者设置了UIHostingController，传入指定的QiRootView，其中QiRootView是用SwiftUI布局的。

window.rootViewController = UIHostingController(rootView: QiRootView())
复制代码

简单示例以下：在QiRootView 的body里边写上咱们要显示的视图。

import SwiftUI

struct QiRootView: View {
    var body: some View {
        VStack {
            HStack {
                Button(action: {
                	withAnimation (.easeInOut(duration: 2.0)){
                		self.showDetail.toggle()
                	}
                }) {
                	Text("经常使用动画")
                }
            }
        }
    }
}
复制代码

Demo 里边，笔者在body里边，上边的HStack默认状况显示了2个按钮，其中左边的按钮给按钮添加了普通的位置、透明度、旋转、圆角、前景色、背景色的动画。右边的按钮会触发state属性showDetail，转场显示出奇舞647以前写的简单页面。 下边的HStack显示了5个按钮，第一个按钮显示还没绘制完的徽章。后4个按钮分别以不一样的转场动画显示奇舞647写的简单页面。

下边笔者分2部分介绍给视图添加动画的内容：

1. 给视图添加经常使用动画
2. 给视图添加转场动画

使用SwiftUI给视图添加动画的方式比较简单。分2种方式能够给视图添加动画。

1. 直接在 View 上使用 .animation 类型添加动画
2. 在按钮的action里边用withAnimation { } 来控制某个 State 属性，进而触发动画。

给视图添加经常使用动画使用的是直接在 View 上使用 .animation 类型的方式给视图添加动画。

给视图添加转场动画部分使用的是在按钮的action里边用withAnimation { } 来控制某个 State 属性，进而触发的转场动画。

给视图添加经常使用动画

下边笔者介绍下上述Demo 动画中用到的相应API。

• 改变位置

.offset(x: changeAnimation ? offsetX2 : offsetX1, y: changeAnimation ? offsetY2 : offsetY1)
复制代码

• 改变尺寸的话，也能够改变后边的width height的值。

.frame(width: 100.0, height: 100.0, alignment: .center)
复制代码

• 改变视图圆角

.cornerRadius(changeAnimation ? cornerR2 : cornerR1)
复制代码

• 改变背景色

.background(changeAnimation ? backColor2 : backColor1)
复制代码

• 改变前景色

.foregroundColor(changeAnimation ? foreColor2 : foreColor1)
复制代码

• 改变透明度

.opacity(changeAnimation ? 0.5 : 1.0)
复制代码

• 改变scale

.scaleEffect(changeAnimation ? 1.5 : 1.0)
复制代码

• 旋转视图

.rotationEffect(.degrees(changeAnimation ? 90 : 0))
复制代码

呈现动画的方式能够使用以下API 控制动画类型

.animation(.easeInOut(duration: 2.0))
复制代码

.animation(.spring())
复制代码

综上用到以下代码：

import SwiftUI

struct QiRootView: View {
    
    @State private var changeAnimation = false
    private var offsetX1: CGFloat = 0.0
    private var offsetY1: CGFloat = 0.0
    private var offsetX2: CGFloat = 20.0
    private var offsetY2: CGFloat = 20.0
    
    private var cornerR1: CGFloat = 0.0
    private var cornerR2: CGFloat = 50.0
    
    private var foreColor1 = Color.blue
    private var foreColor2 = Color.white
    
    private var backColor1 = Color.gray
    private var backColor2 = Color.black
    
    var body: some View {
        VStack {
           
            HStack {
                
                Button() {
                                Text("位置")
                                    .offset(x: changeAnimation ? offsetX2 : offsetX1, y: changeAnimation ? offsetY2 : offsetY1)
                                    .frame(width: 100.0, height: 100.0, alignment: .center)
                                    .foregroundColor(changeAnimation ? foreColor2 : foreColor1)
                                    .background(changeAnimation ? backColor2 : backColor1)
                                    .opacity(changeAnimation ? 0.5 : 1.0)
                                    .cornerRadius(changeAnimation ? cornerR2 : cornerR1)
                                    .padding()
                                    .rotationEffect(.degrees(changeAnimation ? 90 : 0))
                                    .animation(.easeInOut(duration: 2.0))
                              }
            }
        }
    }
}
复制代码

给视图添加转场动画

转场动画部分，笔者参照官方教程写了四种转场动画。 分别从左边、右边、上边、下边呈现出来奇舞647写的简单页面。 代码层面的传入的转场类型为给AnyTransition添加了extention的转场类型。

import SwiftUI

extension AnyTransition {
    static var moveAndFade: AnyTransition {
        AnyTransition.move(edge: .trailing)
    }
    static var moveAndFadeLeading: AnyTransition {
        AnyTransition.move(edge: .leading)
    }
    static var moveAndFadeUp: AnyTransition {
        AnyTransition.move(edge: .top)
    }
    static var moveAndFadeBottom: AnyTransition {
        AnyTransition.move(edge: .bottom)
    }
}

struct QiRootView: View {
    
	@State private var showDetail = false
    
    var body: some View {
        VStack {
           
            HStack {
                Button(action: {
                               withAnimation (.easeInOut(duration: 2.0)){
                                   self.showDetail.toggle()
                               }
                }) {
                             Image(systemName: "chevron.right.circle")
                                .imageScale(.large)
                                .rotationEffect(.degrees(showDetail ? 90 : 0))
                                .opacity(showDetail ? 0.5 : 1.0)
                                .scaleEffect(showDetail3 ? 1.5 : 1.0)
                                .padding()
                          }
            }
            
            if showDetail {
                ContentView()
                	.transition(.moveAndFade)
	                // .transition(.moveAndFadeBottom)
					// .transition(.moveAndFadeLeading)
	                // .transition(.moveAndFadeUp)
            }
        }
    }
}
复制代码

Demo

Demo 下载地址：QiSwiftUIAnimation

参考学习网址

• Animating Views and Transitions
• SwiftUI 的一些初步探索 (二)
• SwiftUI(四) 基础动画

---

小编微信：可加并拉入《QiShare技术交流群》。

关注咱们的途径有：
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)

推荐文章：
用SwiftUI写一个简单页面
iOS 控制日志的开关
iOS App中可拆卸一个framework的两种方式
自定义WKWebView显示内容（一）
Swift 5.1 (6) - 函数
Swift 5.1 (5) - 控制流
Xcode11 新建工程中的SceneDelegate
iOS App启动优化（二）—— 使用“Time Profiler”工具监控App的启动耗时
iOS App启动优化（一）—— 了解App的启动流程
iOS WKWebView的基本使用
奇舞周刊