Swift ルーレットを一度止めた後、反時計回りに回したい。

前提

Swiftでルーレットを作りました。丸い円盤状のルーレットの上(０度の位置)に矢印があり、ボタンをタップするとルーレットの画像が回って、もう一度ボタンをタップするとルーレットの画像が止まるようにしています。

ルーレットを止めた時、ルーレットの上半分（270度から0度、0度から90度の位置）に矢印があった場合、ルーレットがゆっくり回って0度の位置で止まるようにしています。270度から0度の位置に止まった場合は時計回り、0度から90度の位置に止まった場合は反時計回りで0度の位置に修正されます。

ルーレットを止めた時、ルーレットの下半分（90度から180度、180度から270度の位置）に矢印があった場合はルーレットがゆっくり回って180度の位置に修正されるようにしました。

ここで、180度から270度の位置に止まった場合はゆっくりと時計回りで回って180度の位置に修正されるのですが、90度から180度の位置に止まった場合も時計回りで大きく回って180度の位置に止まります。回転スピードもゆっくりになりません。

実現したいこと

90度から180度の位置に止まった場合は反時計回りでゆっくり回って180度の位置まで修正されるようにしたいです。うまく行く方法がありましたらご教示いただけますようお願いします。

該当のソースコード

Swift
1import UIKit
2
3class ViewController: UIViewController {
4    
5    var repeatTimer: Timer!
6    // ボタンフラグ
7    var buttonStartFlg = true
8    var animation: CABasicAnimation = CABasicAnimation()
9    // ボタン
10    @IBOutlet weak var startButton: UIButton!
11    // ルーレット画像
12    @IBOutlet weak var rouletteImage: UIImageView!
13    
14    override func viewDidLoad() {
15        startButton.layer.cornerRadius = 10.0//ボタンを角丸にする
16    }
17    // スタートボタンを押した際のIBAction
18    @IBAction func tapStartButton(_ sender: UIButton) {
19        if buttonStartFlg {
20            startRotate()
21            print("Start")
22            buttonStartFlg = false
23        } else {
24            stopRotate()
25            print("Stop")
26            buttonStartFlg = true
27        }
28    }
29    
30    func startRotate() {
31        startButton.setTitle("STOP", for: .normal)
32
33        let layer = rouletteImage.layer
34        // animation の設定
35        animation = CABasicAnimation(keyPath: "transform.rotation")
36        animation.isRemovedOnCompletion = false
37        animation.fillMode = CAMediaTimingFillMode.forwards
38        // 0度から回転を開始する。
39        animation.fromValue = 0
40        // 1回のアニメーションで、360度まで回転する。
41        animation.toValue = CGFloat(Double.pi / 180) * 360
42        // 回転速度
43        animation.duration = 2.0
44        // リピート回数
45        animation.repeatCount = .infinity
46        
47        layer.add(animation, forKey: "animation")
48
49        // 一時停止した時の時刻
50        let pausedTime = layer.timeOffset
51        
52        // アニメーションを再開する
53        layer.speed = 1.0
54        
55        // layer の timeOffset プロパティに 0 を設定
56        layer.timeOffset = 0.0
57        
58        // beginTimeプロパティはアニメーションの開始時刻を表します。
59        layer.beginTime = 0.0
60        
61        // 現在時刻 - 一時停止した時の時刻
62        let timeSincePause = layer.convertTime(CACurrentMediaTime(), from: nil) - pausedTime
63        layer.beginTime = timeSincePause
64    }
65    
66    func stopRotate(){
67        startButton.setTitle("START", for: .normal)
68
69        let layer = rouletteImage.layer
70
71        // 現在時刻を layer の timeOffset プロパティに設定
72         let pausedTime = layer.convertTime(CACurrentMediaTime(), from: nil)
73         layer.timeOffset = pausedTime
74        
75        // アニメーションを停止する
76        layer.speed = 0.0
77
78        let transform = self.rouletteImage.layer.presentation()?.transform
79        let angle = atan2(transform!.m12, transform!.m11)
80        var testAngle = (angle * 180) / CGFloat.pi
81
82        // ボタンを押した時の角度から回転を開始する。
83        self.animation.fromValue = CGFloat(Double.pi / 180) * testAngle
84        
85        // 逆回転として考える（矢印の方が回転したと考える）
86        if testAngle < 0 {
87            // マイナスならプラスにする
88            testAngle.negate()
89        }
90        
91        // 矢印の位置
92        print("finalAAA: \(testAngle)º")
93        
94        // 360° = 100% とした時の割合
95        let per = Int((testAngle) / 3.60)
96        print("perAAA: \(per)")
97        
98        if 270 <= testAngle || testAngle < 90 {
99            //270度から90度までの場合、0度の位置まで回転する
100            self.animation.toValue = CGFloat(Double.pi / 180) * 0
101        } else if 90 <= testAngle && testAngle < 270 {
102            //90度から270度までの場合、180度の位置まで回転する
103            self.animation.toValue = CGFloat(Double.pi / 180) * 180
104        }
105
106        // 回転速度
107        self.animation.duration = 2.0
108        // リピート回数
109        self.animation.repeatCount = 1
110        
111        layer.add(self.animation, forKey: "animation")
112        
113        layer.speed = 1.0
114        
115    }
116}

試したこと

90度から180度までで止まった場合のみ

Swift
1self.animation.toValue = CGFloat(Double.pi / 180) * -180

・・・と、マイナス180度まで回るようにしてみたり、「Swift animate　回転　反時計回り」などの単語で検索してみたりしましたが、うまく行く方法は分かりませんでした。

補足情報（FW/ツールのバージョンなど）

Xcode13.4.1
iphone7
iOS15.5

行動規範の内容に同意します

回答1件

ベストアンサー

時計回りか反時計回りかはfromからtoの角度が増えるのか減るのかで決まると思います。

あまり最適に修正できていないかもしれませんが、次のようなコードはどうでしょうか。
修正したところに// *****のようなコメントを記述しています。

swift
1import UIKit
2
3class ViewControllerXxx: UIViewController {
4    
5    var repeatTimer: Timer!
6    // ボタンフラグ
7    var buttonStartFlg = true
8    var animation: CABasicAnimation = CABasicAnimation()
9    // ボタン
10    @IBOutlet weak var startButton: UIButton!
11    // ルーレット画像
12    @IBOutlet weak var rouletteImage: UIImageView!
13    
14    override func viewDidLoad() {
15        startButton.layer.cornerRadius = 10.0//ボタンを角丸にする
16    }
17    // スタートボタンを押した際のIBAction
18    @IBAction func tapStartButton(_ sender: UIButton) {
19        if buttonStartFlg {
20            startRotate()
21            print("Start")
22            buttonStartFlg = false
23        } else {
24            stopRotate()
25            print("Stop")
26            buttonStartFlg = true
27        }
28    }
29    
30    func startRotate() {
31        startButton.setTitle("STOP", for: .normal)
32
33        let layer = rouletteImage.layer
34        // animation の設定
35        animation = CABasicAnimation(keyPath: "transform.rotation")
36        animation.isRemovedOnCompletion = false
37        animation.fillMode = CAMediaTimingFillMode.forwards
38        // 0度から回転を開始する。
39        animation.fromValue = 0
40        // 1回のアニメーションで、360度まで回転する。
41        animation.toValue = CGFloat(Double.pi / 180) * 360
42        // 回転速度
43        animation.duration = 2.0
44        // リピート回数
45        animation.repeatCount = .infinity
46        
47        layer.add(animation, forKey: "animation")
48
49        // 一時停止した時の時刻
50        let pausedTime = layer.timeOffset
51        
52        // アニメーションを再開する
53        layer.speed = 1.0
54        
55        // layer の timeOffset プロパティに 0 を設定
56        layer.timeOffset = 0.0
57        
58        // beginTimeプロパティはアニメーションの開始時刻を表します。
59        layer.beginTime = 0.0
60        
61        // 現在時刻 - 一時停止した時の時刻
62        let timeSincePause = layer.convertTime(CACurrentMediaTime(), from: nil) - pausedTime
63        layer.beginTime = timeSincePause
64    }
65    
66    func stopRotate(){
67        startButton.setTitle("START", for: .normal)
68
69        let layer = rouletteImage.layer
70
71        // 現在時刻を layer の timeOffset プロパティに設定
72         let pausedTime = layer.convertTime(CACurrentMediaTime(), from: nil)
73         layer.timeOffset = pausedTime
74        
75        // アニメーションを停止する
76        layer.speed = 0.0
77
78        let transform = self.rouletteImage.layer.presentation()?.transform
79        let angle = atan2(transform!.m12, transform!.m11)
80        var testAngle = (angle * 180) / CGFloat.pi
81        
82        // ***** 円の右半分は0~180で、左半分は-0~-180です
83        // ***** 360度で考える場合は左半分に+360を加算して扱う感じでしょうか
84        if testAngle < 0 {
85            testAngle += 360
86        }
87        
88        // ボタンを押した時の角度から回転を開始する。
89        self.animation.fromValue = CGFloat(Double.pi / 180) * testAngle
90        
91        // 矢印の位置
92        print("finalAAA: \(testAngle)º")
93        
94        // 360° = 100% とした時の割合
95        let per = Int((testAngle) / 3.60)
96        print("perAAA: \(per)")
97        
98        if testAngle < 90 {
99            // ***** 0~90の場合はfromValueが0~90でtoValueが0の反時計回りです
100            self.animation.toValue = CGFloat(Double.pi / 180) * 0
101        } else if testAngle < 270 {
102            // ***** 90~180の場合はfromValueが90~180でtoValueが180の時計回りです
103            // ***** 180~270の場合はfromValueが180~270でtoValueが180の反時計回りです
104            self.animation.toValue = CGFloat(Double.pi / 180) * 180
105        } else {
106            // ***** 270~360の場合はfromValueが270~360でtoValueが360の時計回りです
107            self.animation.toValue = CGFloat(Double.pi / 180) * 360
108        }
109        
110        // 回転速度
111        self.animation.duration = 2.0
112        // リピート回数
113        self.animation.repeatCount = 1
114        
115        layer.add(self.animation, forKey: "animation")
116        
117        layer.speed = 1.0
118        
119    }
120}

投稿2022/06/12 15:18

退会済みユーザー

総合スコア0

tmyk1979

2022/06/12 17:49

xg63ex2b様、回答ありがとうございます！教えていただいたコードを試したところ、望んでいた通りの動作になりました。 360度に置き換えて考えるところがミソだったのですね！　目から鱗でした。また、自分は時計回りか反時計回りかがどこで決まるのかも分かっていませんでした。この質問では質問用にコードをまとめていたのですが、360度をパーセントに直すなどして使わせていただこうと思います。思っていた事ができて嬉しいです。本当に本当にありがとうございました！

行動規範の内容に同意します