利用 ConfettiSwiftUI　簡單打造屬於自己的彩色紙屑動畫

我們不時都會收到讀者提問如何製作彩色紙屑動畫，當然，我們可以使用 SwiftUI 或 UIKit 從零開始構建動畫。但最近，我找到了一個名為 ConfettiSwiftUI 的開源程式庫，讓開發者可以創建不同類型的彩色紙屑動畫。所以，與其從零開始開發動畫，不如讓我們看看如何使用 Swift Package，來創建一些彩色紙屑動畫吧！

ConfettiSwiftUI 的基本用法

ConfettiSwiftUI 是一個 Swift Package，因此要把它 bundle 到 Xcode 專案十分簡單。

創建了一個新的 Xcode 專案之後，讓我們到 Xcode 選單點選 File > Add Packages…，並輸入以下 Package URL：

https://github.com/simibac/ConfettiSwiftUI.git

Xcode 應該會自動加載 Package 的資訊。然後點擊 Add Package 按鈕，來把 Package 添加到專案中。

下載好 Swift Package 後，我們就可以到 ContentView.swift 檔案。我們只需要像下面這樣 import ConfettiSwiftUI 並更新 ContentView，就可以使用這個程式庫：

struct ContentView: View {
    @State private var counter = 0

    var body: some View {
        Button(action: {
            counter += 1
        }) {
            Text("🎃")
                .font(.system(size: 50))
        }
        .confettiCannon(counter: $counter)

    }
}

在以上的程式碼中，我們創建了一個表情符號按鈕，並附加了 confettiCannon 修飾符，用來渲染彩色紙屑動畫。這個修飾符接受不同的參數 (parameter)，但大部分都是 optional 的。我們只需要提供一個計數器 (counter) 的 binding，就可以觸發動畫。

當按鈕被點擊，我們就將 counter 變數的數值加一。這就是我們觸發彩色紙屑動畫的方式。

讓我們在模擬器執行 App，或就這樣在預覽面版測試 App。現在，當我們點擊表情符號按鈕，就會看到彩色紙屑動畫。

添加更多彩色紙屑

ConfettiSwiftUI 提供了幾個參數，讓開發者客製化彩色紙屑動畫。我們可以利用 num 參數控制彩色紙屑的數量：

.confettiCannon(counter: $counter, num: 50)

在預設情況下，它會製造 20 個彩色紙屑，我們可以按需要調整數值。

改變彩色紙屑散開的半徑

如果我們想控制彩色紙屑動畫的寬度，可以改變 radius 參數的數值：

.confettiCannon(counter: $counter, radius: 500.0)

預計數值是 300.0，數值越大，彩色紙屑散開的範圍就越大。

客製化彩色紙屑的顏色和散落高度

我們也可以利用 colors 和 rainHeight參數，來客製彩色紙屑的顏色和動畫的垂直距離：

.confettiCannon(counter: $counter, colors: [.purple, .orange], rainHeight: 1000.0, radius: 500.0)

以上的程式碼建立了一個彩色紙屑的動畫，當中有紫色和橙色的彩色紙屑。

使用自己喜歡的圖形

我們使用這個開源程式庫，還可以轉用自己喜歡的圖形來取代彩色紙屑。我們可以用表情符號、其他內建形狀（例如 .roundedCross）、或 SF Symbol。

.confettiCannon(counter: $counter, confettis: [.sfSymbol(symbolName: "trash"), .shape(.roundedCross), .text("🎃")], colors: [.purple, .orange], confettiSize: 20.0, radius: 400.0)

我們可以在 confettis 參數指定自己喜歡的圖形，並在 confettiSize 調整圖形的大小。

不斷重覆

這個修飾符還有 repetitions 和 repetitionInterval 參數，讓我們可以不斷重覆同一個動畫。讓我們看看以下的範例程式碼：

.confettiCannon(counter: $counter, num: 1, confettis: [ .text("🎃")], colors: [.purple, .orange], confettiSize: 20.0, radius: 10.0, repetitions: 1000, repetitionInterval: 0.05)

這段程式碼會把同一個動畫重覆 1000 次，重複的時間差距則設置為 0.05 秒。

總結

ConfettiSwiftUI 是一個非常好用的開源程式庫，讓我們可以製作彩色紙屑動畫。程式庫的很多元素都可以客製化，有不同的屬性讓我們控制彩色紙屑的大小和形狀。在這篇教學文章中，我只介紹了一些常用的參數。你可以參閱官方 API 文檔，看看其他可以自己配置的屬性。

希望你喜歡這篇教學文章，你也可以花點時間進一步探索這個程式庫。