用SwiftUI給視圖添加動畫

級別:★☆☆☆☆
標籤:「SwiftUI」「經常使用動畫」「轉場動畫」
做者: WYW
審校: QiShare團隊php


前言:最近 奇舞647 寫了《用SwiftUI 寫了一個簡單頁面》,筆者也參考官方SwiftUI教程及網絡博客,寫了一個給視圖添加改變位置、透明度、旋轉、前景色、背景色及轉場動畫的Demo。Demo效果以下:git

SwiftUIAnimation.gif

簡單說一下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

  1. 給視圖添加經常使用動畫
  2. 給視圖添加轉場動畫

使用SwiftUI給視圖添加動畫的方式比較簡單。分2種方式能夠給視圖添加動畫。微信

  1. 直接在 View 上使用 .animation 類型添加動畫
  2. 在按鈕的action裏邊用withAnimation { } 來控制某個 State 屬性,進而觸發動畫。

給視圖添加經常使用動畫使用的是直接在 View 上使用 .animation 類型的方式給視圖添加動畫。網絡

給視圖添加轉場動畫部分使用的是在按鈕的action裏邊用withAnimation { } 來控制某個 State 屬性,進而觸發的轉場動畫。app

給視圖添加經常使用動畫

下邊筆者介紹下上述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

參考學習網址


小編微信:可加並拉入《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的基本使用
奇舞週刊

相關文章
相關標籤/搜索