2017年になりました。
新年あけましておめでとうございます。

新年一発目のUIトレース会を1月12日に株式会社オハコ様にて行いました。

【朝活】iOS_UIトレース会 #7

2017年の元旦にFacebookが面白いイースターエッグを実装していました。
ポストをするとその文字に「あけおめ」や「Happy New Year」などの特定の文字があるとボタンになって、それをタップすると花火のアニメーションが打ち上げられるのです。

以下のYoutube動画で動きが確認できます。

これをお題募集アンケートに出したらぶっちぎりでFacebookが一番になりました。

https://www.facebook.com/groups/407821455988195/permalink/1196346283802371/

今回の記事では、朝活で私が実装した例を紹介したいと思います。

作ったもの

今回はボタンを押したら、SpriteKitで火花ができるようにしました。

作り方

ボタンを押したら全面に火花が出るアプリの作り方です。

SpriteKit Particle Fileの追加

SpriteKitにパーティクルを表示するファイルがあります。これを追加します。

XcodeのメニューでFile > New > FileをしてSpriteKit Particle Fileを追加します。

今回はParticle templeteをSparkにしました。
名前はNewYearParticle.sksにしました。

Storyboardの設定

Navigation Controllerを使ったビュー構成にしました。
真ん中にボタンをつけたビューコントローラーと
火花を表示するためのビューを作るためのビューコントローラーを作りました。
identifyがFullScreenとつけています。

コード

ボタンにアクションを接続したら以下のコードを書きます。

@IBAction func animation(_ sender: UIButton) {
    
    guard let myStoryboard = self.storyboard else {
        return
    }
    let fullScreenViewController = myStoryboard.instantiateViewController(withIdentifier: "FullScreen")
    guard let fullView = fullScreenViewController.view else {
      return
    }
    fullView.isUserInteractionEnabled = false 
    //Sprite Kitを追加
    let sparkView = SKView(frame: fullView.bounds)
    sparkView.isUserInteractionEnabled = false
    sparkView.autoresizingMask = [.flexibleWidth]
    sparkView.backgroundColor = UIColor.clear
    fullView.addSubview(sparkView)
    //Sceneの追加
    let scene = SKScene(size: sparkView.frame.size)
    scene.backgroundColor = UIColor.clear
    sparkView.presentScene(scene)
    
    if let node = SKEmitterNode(fileNamed: "NewYearParticle") {
        node.position = CGPoint(x: scene.frame.width / 2, y: scene.frame.height / 2)
        scene.addChild(node)
    }
    
    self.navigationController?.view.addSubview(fullView)
    UIView.animate(withDuration: 2.0, delay: 0, options: .curveEaseIn, animations: {
        fullView.alpha = 0.0
    }, completion: {
        finishe in
        fullView.removeFromSuperview()
    })
}

これで動くはずです。

次にやること

次回はUITextViewに特定の文字（あけおめなど）があったらリンクにして、タップしたら火花を散らせたいです。

次回のUIトレース会は1月26日です。
参加お待ちしております！

【朝活】iOS_UIトレース会 #8

参考

【Swift】燃えさかるUITabBarを作ってみる
Happy New Year Face book New year's Animation👌