【iOS】新年明けたので、画面に花火を散らしたよ

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👌

Author image

About 佐藤 剛士

  • Japan Tokyo
You've successfully subscribed to Personal Factory
Great! Next, complete checkout for full access to Personal Factory
Welcome back! You've successfully signed in.
Unable to sign you in. Please try again.
Success! Your account is fully activated, you now have access to all content.
Error! Stripe checkout failed.
Success! Your billing info is updated.
Error! Billing info update failed.