使用SwiftUI搭建一個風箏搖擺動畫，實現放風箏的夢想～

語言: CN / TW / HK
時間 2022-10-10 11:15:25

theme: smartblue

我正在參與掘金創作者訓練營第5期，  點選瞭解活動詳情。

在本章中，你將學會使用SwiftUI建立一個風箏搖擺動畫。

前言

為了更加熟悉和了解SwiftUI，本系列將從實戰角度出發完成100個SwiftUI專案，方便大家更好地學習和掌握SwiftUI。

這同時也是對自己學習SwiftUI過程的知識整理。

如有錯誤，以你為準。

專案背景

有一次週末在海邊晃悠，抬頭看到好多風箏在天空自由的翱翔，有些風箏一節接著一節在空中搖盪甚是壯觀。

突然腦海裡有了些許靈感，是不是可以把這個景象使用SwiftUI做一個動畫？

說幹就幹。

專案搭建

首先，建立一個新的SwiftUI專案，命名為MagicAnimation。

1.png

頁面樣式

首先是圖片部分，這裡我們可以使用Apple官方提供的系統圖標作為展示的樣式，也可以使用匯入的圖片作為樣式設計的元素，示例：

Image(systemName: "heart.circle")     .font(.system(size: 32))     .foregroundColor(.purple)

2.png

為了實現翻頁切換效果，我們需要宣告一個變數作為切換，示例：

@State var isSwitch:Bool = false

宣告好變數isSwitch後，我們根據isSwitch的狀態可以設定切換Image圖示圖片和圖片填充顏色，示例：

Image(systemName: isSwitch ? "heart.circle.fill" : "heart.circle")     .font(.system(size: 32))     .foregroundColor(isSwitch ? .red : .purple)

當我們把isSwitch變成true時，預覽效果如下：

3.png

接下來，我們通過ForEach迴圈遍歷多一些圖片，示例：

HStack{     ForEach(0..<8) { num in         Image(systemName: isSwitch ? "heart.circle.fill" : "heart.circle")             .font(.system(size: 32))             .foregroundColor(isSwitch ? .red : .purple)     } }

4.png

上述程式碼中，我們使用HStack橫向佈局和ForEach迴圈，遍歷展示了8個圖示圖片。

至此，我們的樣式部分就完成了。

互動動畫

由於我們需要使用拖動動畫，我們先宣告一個變數來儲存拖動的位置，示例：

@State private var dragAmount = CGSize.zero

然後在Image加上一個偏移修飾符，並且增加拖動動畫，示例：

HStack {     ForEach(0 ..< 8) { num in         Image(systemName: isSwitch ? "heart.circle.fill" : "heart.circle")             .font(.system(size: 32))             .foregroundColor(isSwitch ? .red : .purple)             .offset(self.dragAmount)     } } .gesture(     DragGesture()         .onChanged { self.dragAmount = $0.translation }         .onEnded { _ in             self.dragAmount = .zero             self.isSwitch.toggle()         } )

5.gif

上述程式碼中，我們給Image添加了一個偏移量修飾符offset，偏移位置為dragAmount。

然後給HStack整個橫向檢視增加拖動動畫DragGesture，在拖動時，更改偏移量的位置為拖動的位置，在拖動結束時，我們將檢視復位dragAmount到初始位置zero，並且切換樣式狀態isSwitch。

好像看起來效果一般，不夠優雅。

我們再加一個互動動畫，讓幾個Image有延遲錯落感，示例：

.animation(      Animation.default.delay(Double(num) / 20), value: dragAmount )

專案展示

6.gif

本章程式碼

``` import SwiftUI

struct ContentView: View {     @State var isSwitch: Bool = false     @State private var dragAmount = CGSize.zero

var body: some View {         HStack {             ForEach(0 ..< 8) { num in                 Image(systemName: isSwitch ? "heart.circle.fill" : "heart.circle")                     .font(.system(size: 32))                     .foregroundColor(isSwitch ? .red : .purple)                     .offset(self.dragAmount)                     .animation(                         Animation.default.delay(Double(num) / 20), value: dragAmount                     )            }         }         .gesture(             DragGesture()                 .onChanged { self.dragAmount = $0.translation }                 .onEnded { _ in                     self.dragAmount = .zero                     self.isSwitch.toggle()                 }         )     } } ```

恭喜你，完成了整個專案的全部內容！

快來動手試試吧。

如果本專欄對你有幫助，不妨點贊、評論、關注～

「其他文章」
「」
「」