UIViewを砕く（Swift）

はじめに

SpriteKit をさわっているときに天啓が降りました

Confetti のパーティクルをちょっといじれば UIView を砕けるのでは？

ということでやってみました。完成形はこんな感じです。

SKSファイル作成

昔は SpriteKit Particle File にデフォルトであった Confetti を少し修正して使います。設定はこんな感じです。

実装

UIView の extension で SKView を使ってパーティクル表示を行うメソッドをはやします。

import UIKit
import SpriteKit

extension UIView {

    func `break`() {
        guard let window = window else {
            return
        }

        let skView = SKView(frame: window.bounds)
        skView.allowsTransparency = true
        window.addSubview(skView)
        let scene = SKScene(size: skView.frame.size)
        scene.backgroundColor = .clear
        skView.presentScene(scene)
        let point = convert(.init(x: frame.width/2, y: frame.height/2), to: window)
        if let particle = SKEmitterNode(fileNamed: "Confetti") {
            particle.particleColorSequence = nil
            particle.particleColorBlendFactor = 1.0
            particle.particleColor = backgroundColor ?? .white
            particle.position = scene.convertPoint(fromView: point)
            skView.scene?.addChild(particle)
        }
        UIView.animate(withDuration: 0.2, delay: 0, options: []) {
            self.alpha = 0.0
        } completion: { _ in
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                skView.removeFromSuperview()
            }
        }
    }
}

あとは break() を呼び出すだけです。

View を砕く方法としては指定の View の Window に SKView をのせ、指定の View の中心座標に View の背景色を設定したパーティクルを表示しています。そしてパーティクル表示とともに View をフェードアウトさせるアニメーションをつけています。

改善案

いくつか改善案です。

• Window ではなく superView か自身にのせる
  これはできそう
• SKView ではなく CAEmitterLayer を使う
  パーティクルの設定方法がわからずうまくいきませんでした。。。
• UIImageView とかも砕けるようにしたい
  View の細かい画像を取得してパーティクルに設定すればそれっぽくなりそうですがやり方がわからない。。。
• リソース管理がめんどくさいので全部コードにする
  これはできそう

おわりに

これで UIView を砕き放題です！
みんなも好きな View を砕こう