【swift】ルーレットを徐々にゆっくり止めたい

Question

下記の記事を参考にルーレットを作成しましたが、
ストップボタンを押した後ゆっくり止まるアニメーションにしたいですが
やり方がわかりません
分かる方いれば教えていただきたいです

https://qiita.com/chanNaru/items/48362b18369b29429e6c

// ボタンフラグ
var buttonStartFlg = true

// ボタン
@IBOutlet weak var startButton: UIButton!
// ルーレット画像
@IBOutlet weak var rouletteImage: UIImageView!

// スタートボタンを押した際のIBAction
@IBAction func tapStartButton(_ sender: UIButton) {

    let animation = CABasicAnimation(keyPath: "transform.rotation")
    animation.isRemovedOnCompletion = false
    animation.fillMode = kCAFillModeForwards

    if buttonStartFlg {
        startButton.setImage(UIImage(named: "stop"), for: .normal)
        rouletteImage.layer.speed = 2.0
        animation.toValue = .pi / 2.0
        animation.duration = 0.1
        animation.repeatCount = MAXFLOAT
        animation.isCumulative = true
        rouletteImage.layer.add(animation, forKey: "ImageViewRotation")
        buttonStartFlg = false
    } else {
        startButton.setImage(UIImage(named: "start"), for: .normal)
        let pausedTime = rulletImage.layer.convertTime(CACurrentMediaTime(), from: nil)
        rouletteImage.layer.speed = 0.0
        rouletteImage.layer.timeOffset = pausedTime
        buttonStartFlg = true
    }
}

Answer 1

CABasicAnimation を使ってゆっくり止めるという処理を考えてみたのですが、かなり実装がややこしくなりそうなので（そのままではUIView.animateが適用できない上、layer.speed は CABasicAnimation のkeyPathとして使えない）、代わりにCGAffineTransformを使って回転させた方が最終的にはやりやすそうに思えます。

回転処理、停止処理を一つのメソッドにまとめることも可能ですが、ここではわかりやすさ優先であえて冗長的な記述をしています。

基本的な考え方は

• スタートボタンが押されたら

-- 一定時間ごとに指定角度（ここでは10度）回転させるために、rotateImage(_:) を呼び出す
-- タイマ割り込みは自動的に繰り返す

• ストップボタンが押されたら

-- 連続して行われていたタイマ割り込みは止める
-- 止めるためのメソッド stopImage(_:) を呼び出す
-- 回転角を減らす(ここでは 0.05 減らす）
-- 減らした回転角がゼロより大きければ、あらためてstopImage(_:) を呼び出す

という流れです。

下記の動画は Animation Gif なので減速度合いがわかりにくいですが、それなりに減速しています。
あとは各種パラメータをお好きな具合に調整していただければと思います。

import UIKit

class ViewController: UIViewController {
    // ボタンフラグ
    var buttonStartFlg = true
        
    // 現時点での回転角
    var currentDegree: CGFloat = 0
    
    // 定期割り込みのための Timer のインスタンス
    var timer = Timer()
    
    var interval: TimeInterval = 0.01
    
    // ボタン
    @IBOutlet weak var startButton: UIButton!
    // ルーレット画像
    @IBOutlet weak var rouletteImage: UIImageView!
    
    // スタートボタンを押した際のIBAction
    @IBAction func tapStartButton(_ sender: UIButton) {
        // 初期スピード
        let degree: CGFloat = 10.0

        if buttonStartFlg {
            // ストップボタンを押すまでは、定期的に(repeats: true)呼び出される
            // 回転処理に使われるメソッドは rotateImage)
            timer = Timer.scheduledTimer(timeInterval: interval, target: self, selector: #selector(rotateImage), userInfo: degree, repeats: true)
            buttonStartFlg = false
            
            // ボタンのタイトルを変更
            startButton.setTitle("Stop", for: .normal)
        } else {
            // 定期的な呼び出しを中止する
            timer.invalidate()
            
            // 回転を徐々に止めるためのメソッドを1回だけ(repeats: false)呼び出し
            // 止めるために使われるメソッドは stopImage
            timer = Timer.scheduledTimer(timeInterval: interval, target: self, selector: #selector(stopImage), userInfo: degree, repeats: false)
        }
    }
    
    // ストップボタンを押されるまで呼びだされる回転処理
    @objc func rotateImage(_ sender: Timer) {
        let degree = sender.userInfo as! CGFloat
        let angle = currentDegree * CGFloat.pi / 180  // Radian
        let affine = CGAffineTransform(rotationAngle: angle)
        rouletteImage.transform = affine
        currentDegree += degree
        currentDegree.formRemainder(dividingBy: 360.0)
    }
    
    // ストップボタンを押した後、止まるまで呼び出される回転処理
    @objc func stopImage(_ sender: Timer) {
        // 呼び出し時に送られれてきた値を CGFloat に変換
        var degree = sender.userInfo as! CGFloat
        
        let angle = currentDegree * CGFloat.pi / 180  // Radian
        let affine = CGAffineTransform(rotationAngle: angle)
        rouletteImage.transform = affine
        currentDegree += degree
        currentDegree.formRemainder(dividingBy: 360.0)
        
        // 回転角を減らす
        degree -= 0.05
        
        if degree > 0 {
            // 回転角が正の間は、減らした回転角を使って再度タイマ割り込みを使う
            timer = Timer.scheduledTimer(timeInterval: interval, target: self, selector: #selector(stopImage), userInfo: degree, repeats: false)
        } else {
            // 状態を元に戻し、ボタンのタイトルを変更する
            buttonStartFlg = true
            startButton.setTitle("Start", for: .normal)
        }
    }
}

Comments

[AtsushiNakamura]

回答ありがとうございます
codeまで添付していただき大変助かります

理想的なアニメーションで全て解決しそうです

[TsukubaDepot]

あくまでも一例ですし、これが良い回答とも思えませんので、ぜひこれよりも良い実装を考えていただければと思っています。

Answer 2

buttonEndFlgを用意して、停止ボタンが押されたらフラグをtrueにします。
停止フラグがtrueかつ回転速度が0より大きい間、回転速度を少しずつ減らしていきます。
回転速度が0になったら処理終了です。

Comments

[AtsushiNakamura]

大変助かりました、ありがとうございます