[Swift]スワイプしたら角度が変わるUIViewを作る その②

前編

前編はこちらになります。こちらの記事は後編になりますので、ご注意ください。
https://note.com/simd_float4x4/n/nce34f1812570

前回使ったコード

import UIKit

class SpinnerViewController: UIViewController {
    
    @IBOutlet var spinnerView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let swipeGesture = UISwipeGestureRecognizer(target: self, action: #selector(SpinnerViewController.swipeUpAction(_ :)))
        self.spinnerView.addGestureRecognizer(swipeGesture)
    }
    
    @objc func swipeUpAction(_ sender: UISwipeGestureRecognizer){
    
        let angle: CGFloat = 40.0
        
        let radian = (angle * (CGFloat.pi / 180))

        let affineSin = sin(radian)
        let affineCos = cos(radian)

        let affine = CGAffineTransform(a: affineCos,
                                       b: affineSin,
                                       c: -affineSin,
                                       d: affineCos,
                                       tx: 0,
                                       ty: 0)

        spinnerView.transform = affine
    }
    
}

前回の課題のおさらい

前回の実装では、以下の課題がありました。
・1度しかスワイプできない
・40°しか回転できない(スワイプの距離or速度で動きが変わるようにしない)
・animateしない

この度、全ての課題をクリアできたので共有します。

解決策① スワイプを1度しかできない


原因はよくわかりませんでしたが、前編で使用したコードでも2回以上回せたことが稀にありました。ですので、スワイプの仕方に問題があるのでは?と思ったのです。

よって、スワイプの影響範囲を大きくしました。

//変更前
self.spinnerView.addGestureRecognizer(swipeGesture)

//変更後
self.view.addGestureRecognizer(swipeGesture)

解決策② 40°しか回転しない

・angleをローカル変数からグローバル変数にしました。
・angleをスワイプされるたび+40°するように仕様を変更しました。
・また、angleをletからvarに変更しました。

//変更後(グローバル変数に)
var angle: CGFloat = 40.0

//変更後(swipeAction内に追加)
angle += 40.0

解決策③ animateしない

UIView.animate(withDuration: 0.1,
    delay: 0,
    options: [.curveEaseInOut],
    animations: {
         self.spinnerView.transform = affine
 })

UIView.animateを用いて、アニメーションさせました。
・withDuration:スピードをめちゃんこ早くしたかったので0.1に、
・options:スピードを最初は加速して徐々に減衰させるために、.curveEaseInOutに、
・animationsプロパティで、アフィン変換を採用させます。

出来上がり

上記のことを踏まえて実装すると、だいぶいい感じに仕上がりました。
まだ「スワイプの速度によって、回る角度を変更させる」と言う処理は実装できていませんが、引き続き実装していきます。


この記事が気に入ったらサポートをしてみませんか?