SwiftConfettiViewを使って紙吹雪を降らしてみた

はじめに

現在開発中のプロダクトで紙吹雪のアニメーションを入れたいと考えライブラリを探したところ、とても利用しやすいライブラリだったので、もし「紙吹雪を降らして画面を豪華にしたいなー」と考えている方がいれば少しでも参考になれいいなと言う気持ちを込めて記事を書きました。

完成形

使用したライブラリ

SwiftConfettiView

準備

プロジェクトを作成し、Storyboardに以下のようにパーツを配置してください。

CocoaPodsを利用してインストール

CocoaPodsを使用してSwiftConfettiViewをインストールします。
まず、PodFileを作成します。

$pod init

次に、PodFileを開き以下のコードを入力してください。

pod 'SwiftConfettiView'

そして、ターミナルに戻り実行してください。

$pod install

インポート

正しくインストールできていればすぐ語換が出てくると思います。

import SwiftConfettiView

コーディング

ViewController.swift

    @IBAction func startButton(_ sender: Any) {
        //Viewを生成
        let confettiView = SwiftConfettiView(frame: self.view.bounds)
        //Viewを追加
        self.view.addSubview(confettiView)
        //パーティクルの種類を設定
        confettiView.type = .confetti
        //パーティクルのカラーを設定
        confettiView.colors = [UIColor.purple, UIColor.systemPink, UIColor.blue, UIColor.green]
        //パーティクルの強度を設定
        confettiView.intensity = 0.75
        //紙吹雪をスタート
        confettiView.startConfetti()
        //3秒後に紙吹雪を停止する
        DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
            confettiView.stopConfetti()
        }
        //6秒後にSubviewを削除する
        DispatchQueue.main.asyncAfter(deadline: .now() + 6) {
            confettiView.removeFromSuperview()
        }
    }

工夫したところ

実際に開発をしている時に少し手間取ってしまったのは、追加したViewを削除しないとストーリーボードに配置したボタンが押せないことでした。また、ストップと同じタイミング Viewを削除すると紙吹雪がパッと消えて不自然になってしまいます。
そこで、今回は時間差で紙吹雪をストップさせ、紙吹雪がほぼ落ち切ったタイミングでViewを削除すると言う風に実装しました。

最後に

このライブライはパーティクルの種類が複数用意されていたり、カラーも追加することができたりと、自分のイメージ通りにカスタマイズすることができると思います。
ぜひ、試してみてください！