SwiftUI 框架

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

我們不時都會收到讀者提問如何製作彩色紙屑動畫。在這篇文章中,Simon 會為大家介紹 ConfettiSwiftUI 開源程式庫,這個程式庫的很多元素都可以客製化,讓開發者可以輕鬆打造屬於自己的彩色紙屑動畫。
利用 ConfettiSwiftUI 簡單打造屬於自己的彩色紙屑動畫
Photo by Cristian Escobar on Unsplash
In: SwiftUI 框架

我們不時都會收到讀者提問如何製作彩色紙屑動畫,當然,我們可以使用 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。現在,當我們點擊表情符號按鈕,就會看到彩色紙屑動畫。

swiftuiconfetti-library-demo

添加更多彩色紙屑

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

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

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

改變彩色紙屑散開的半徑

swiftui-confetti-explosion-radius

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

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

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

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

我們也可以利用 colorsrainHeight參數,來客製彩色紙屑的顏色和動畫的垂直距離:

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

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

swiftui-confetti-custom-color

使用自己喜歡的圖形

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

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

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

swiftui-confettis-custom-shape

不斷重覆

這個修飾符還有 repetitionsrepetitionInterval 參數,讓我們可以不斷重覆同一個動畫。讓我們看看以下的範例程式碼:

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

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

swiftui-confetti-animation-demo

總結

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

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

譯者簡介:Kelly Chan-AppCoda 編輯小姐。

作者
Simon Ng
軟體工程師,AppCoda 創辦人。著有《iOS 15 App 程式設計實戰心法》、《iOS 15 App程式設計進階攻略》以及《精通SwiftUI》。曾任職於HSBC, FedEx等跨國企業,專責軟體開發、系統設計。2012年創立AppCoda技術部落格,定期發表iOS程式教學文章。現時專注發展AppCoda業務,致力於iOS程式教學、產品設計及開發。你可以到推特與我聯絡。
評論
更多來自 AppCoda 中文版
WWDC 22 的重點更新:SwiftUI 4.0 新功能一覽
SwiftUI 框架

WWDC 22 的重點更新:SwiftUI 4.0 新功能一覽

WWDC 22 剛剛完結,隨著 iOS 16 和 Xcode 14,Apple 也推出了新版本的 SwiftUI。這次更新帶來了非常多功能,讓開發者可以構建更好的 App,並減少需要編寫的程式碼。在這篇文章中,我會為大家簡單介紹 SwiftUI 4.0 的新功能。
很好! 你已成功註冊。
歡迎回來! 你已成功登入。
你已成功訂閱 AppCoda 中文版 電子報。
你的連結已失效。
成功! 請檢查你的電子郵件以獲取用於登入的連結。
好! 你的付費資料已更新。
你的付費方式並未更新。