UITapGestureRecognizerでタップを認識し、アニメーションを行う！

UITapGestureRecognizerとは

タップを解釈する個別のジェスチャ認識機能。

UITapGestureRecognizerでタップを認識する方法

imageViewをタップすると、UITapGestureRecognizerでタップを認識し、下記のように浮遊感があるアニメーションを実行するサンプルアプリを作ってみます！

TapGestureRecognizer追加

TapGestureRecognizer追加し、ドラッグし、ImageViewの上に持っていくことで、接続できる！

storyboardとViewControllerファイルを接続する！

※storyboardでタップを検出するには、下記にチェックを入れる必要がある！

コードを見ていこう！

ViewController.swift

import UIKit
import SpriteKit

class ViewController: UIViewController {

    @IBOutlet weak var skView: SKView!

    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Sceneを追加
        setupSnow()
    }

    @IBAction func tapImage(_ sender: Any) {
        print("タップしたよ！")

        self.imageView.center = self.view.center
        UIView.animate(withDuration: 1.0, delay: 0.0, options: .autoreverse, animations: {
            self.imageView.center.y += 100.0
        }, completion: nil)
    }
//🟥SpriteKit
    func setupSnow() {
        let scene = SKScene(size: self.view.frame.size)
        let path = Bundle.main.path(forResource: "Snow", ofType: "sks")
        let particle = NSKeyedUnarchiver.unarchiveObject(withFile: path!) as! SKEmitterNode
        particle.name = "Snow"
        particle.position = CGPointMake(self.view.frame.width / 2, self.view.frame.height)
        scene.addChild(particle)
        self.skView!.presentScene(scene)
        self.view.addSubview(self.skView!)
    }
}

UIKitアニメーション

self.imageView.center = self.view.center
        UIView.animate(withDuration: 1.0, delay: 0.0, options: .autoreverse, animations: {
            self.imageView.center.y += 100.0
        }, completion: nil)

self.imageView.center = self.view.centerimageViewをViewの中央に表示する！

UIView.animateメソッド
animate(withDuration:animations:completion:)
指定された期間および完了ハンドラーを使用して、1 つ以上のビューへの変更をアニメーション化する！

durationはアニメーション時間とアニメーションの動くスピードに関わる！
delayは開始までの遅延時間！
optionsではアニメーション中に使用するタイミング曲線の種類やアニメーションの逆再生などを指定できる！
animationsクロージャの中でアニメーションしたいUIViewクラスのプロパティの値を変更する！
今回は、ImageViewのy軸の値を変更し、上に100移動するようなアニメーションになっている！
completionクロージャはアニメーションが完了したタイミングで呼ばれるクロージャ！

🟥雪を降らすSpriteKitについて知りたい方は過去の記事を参考にしてみてください！

参考文献