iPhoneアプリを作り始めて半年くらいになるんですけど、今さらながらスワイプを実装してみました。指でシュッシュ画面をなぞると、横に遷移していくやつですね。
今さらながらだけど、生まれて初めてスワイプを実装してみた。動画に肝心の指が映ってないけど、ちゃんと出来たよw pic.twitter.com/O1WVsJjEjI
— ホーリー (@gevvoihorry) 2016年8月24日
そんなスワイプの実装方法を、自分への備忘録もかねて書いてみます。
ちなみに僕はSpriteKitで実装しました。なので普通のシングルビューアプリケーションとかだと、どうやるのか分かりません。
まあやることは簡単ですけどね。指が触れたところと、指が離れたところの座標を取得して、それを引き算、んでプラスかマイナスかで、どっちの方向にスワイプされたか判定すればいいわけです。
僕が書いたコードはこんな感じ
僕が書いたコードはこんな感じです。
var beganPos:CGPoint!
〜省略〜
override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?){
for touch:AnyObject in touches{
let location = touch.locationInNode(self)
beganPos = touch.locationInNode(self)
let touchNode = self.nodeAtPoint(location)
}
}
override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?){
for touch:AnyObject in touches{
let location = touch.locationInNode(self)
let endedPos:CGPoint = touch.locationInNode(self)
let _ = self.nodeAtPoint(location)
let testPos = beganPos.x - endedPos.x
if(testPos > 0){
let swipeL = SKTransition.pushWithDirection(SKTransitionDirection.Left, duration: 0.3)
let skView = self.view! as SKView
let scene = StudyScene(size: self.size)
scene.scaleMode = SKSceneScaleMode.AspectFill
skView.presentScene(scene , transition: swipeL)
}else if(testPos < 0){
let swipeR = SKTransition.pushWithDirection(SKTransitionDirection.Right, duration: 0.3)
let skView = self.view! as SKView
let scene = StudyScene(size: self.size)
scene.scaleMode = SKSceneScaleMode.AspectFill
skView.presentScene(scene , transition: swipeR)
}
}
}
touchesBeganが指が触れたところ、touchesEndedが指が離れたところですね。これらの詳しい意味は分かってませんが、SpriteKitに最初からあるやつなので、活用しています。
んで、まず最初にbeganPosを宣言しておいて、そこに触ったところの座標を代入。その後の指が離れたときに、endedPosを宣言して、離れた座標を代入します。
あとはそれぞれを引き算するだけですね。公開するのも恥ずかしいくらい簡単なコードなので、多分見ればすぐに分かるかと思います。
トランジションを使って画面遷移
上記のコードで、どっちからどっちに向かってスワイプしたのかが分かるので、今度はその方向に合わせて画面遷移すればOKです。
普通にパッと切り替わる遷移方法だと、スワイプ感が出ないので、スライドするように移り変わればいいわけです。
僕はそのためにSKTransitionってやつを使いました。詳しくはこういうサイトに書いてあるんで、自分で色々と見てください。ようは画面遷移時のアニメーションですね。
[iOS 7] Sprite Kit の画面遷移アニメーションまとめ | Developers.IO
最後に
一度やれば非常に簡単、だけど今日までやることがなかったスワイプは、こんな感じに実装しました。
以上、Swiftでスワイプを実装する方法(Spritekitでやってみた)、の話でした。