用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的基本使用
奇舞週刊