級別:★☆☆☆☆
標籤:「SwiftUI」「經常使用動畫」「轉場動畫」
做者: WYW
審校: QiShare團隊php
前言:最近 奇舞647 寫了《用SwiftUI 寫了一個簡單頁面》,筆者也參考官方SwiftUI教程及網絡博客,寫了一個給視圖添加改變位置、透明度、旋轉、前景色、背景色及轉場動畫的Demo。Demo效果以下:git
簡單說一下Demo,首先在設置應用的rootViewController部分,筆者設置了UIHostingController,傳入指定的QiRootView,其中QiRootView是用SwiftUI佈局的。github
window.rootViewController = UIHostingController(rootView: QiRootView())
複製代碼
簡單示例以下:在QiRootView 的body裏邊寫上咱們要顯示的視圖。spring
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寫的簡單頁面。swift
下邊筆者分2部分介紹給視圖添加動畫的內容:bash
使用SwiftUI給視圖添加動畫的方式比較簡單。分2種方式能夠給視圖添加動畫。微信
給視圖添加經常使用動畫使用的是直接在 View 上使用 .animation 類型的方式給視圖添加動畫。網絡
給視圖添加轉場動畫部分使用的是在按鈕的action裏邊用withAnimation { } 來控制某個 State 屬性,進而觸發的轉場動畫。app
下邊筆者介紹下上述Demo 動畫中用到的相應API。函數
.offset(x: changeAnimation ? offsetX2 : offsetX1, y: changeAnimation ? offsetY2 : offsetY1)
複製代碼
.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)
複製代碼
.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 下載地址:QiSwiftUIAnimation
小編微信:可加並拉入《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的基本使用
奇舞週刊