質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

Q&A

解決済

2回答

2841閲覧

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

AtsushiNakamura

総合スコア46

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

0グッド

0クリップ

投稿2021/02/15 09:12

編集2021/02/15 09:20

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

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 } }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

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

基本的な考え方は

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

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

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

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

という流れです。

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

イメージ説明

Swift

1import UIKit 2 3class ViewController: UIViewController { 4 // ボタンフラグ 5 var buttonStartFlg = true 6 7 // 現時点での回転角 8 var currentDegree: CGFloat = 0 9 10 // 定期割り込みのための Timer のインスタンス 11 var timer = Timer() 12 13 var interval: TimeInterval = 0.01 14 15 // ボタン 16 @IBOutlet weak var startButton: UIButton! 17 // ルーレット画像 18 @IBOutlet weak var rouletteImage: UIImageView! 19 20 // スタートボタンを押した際のIBAction 21 @IBAction func tapStartButton(_ sender: UIButton) { 22 // 初期スピード 23 let degree: CGFloat = 10.0 24 25 if buttonStartFlg { 26 // ストップボタンを押すまでは、定期的に(repeats: true)呼び出される 27 // 回転処理に使われるメソッドは rotateImage) 28 timer = Timer.scheduledTimer(timeInterval: interval, target: self, selector: #selector(rotateImage), userInfo: degree, repeats: true) 29 buttonStartFlg = false 30 31 // ボタンのタイトルを変更 32 startButton.setTitle("Stop", for: .normal) 33 } else { 34 // 定期的な呼び出しを中止する 35 timer.invalidate() 36 37 // 回転を徐々に止めるためのメソッドを1回だけ(repeats: false)呼び出し 38 // 止めるために使われるメソッドは stopImage 39 timer = Timer.scheduledTimer(timeInterval: interval, target: self, selector: #selector(stopImage), userInfo: degree, repeats: false) 40 } 41 } 42 43 // ストップボタンを押されるまで呼びだされる回転処理 44 @objc func rotateImage(_ sender: Timer) { 45 let degree = sender.userInfo as! CGFloat 46 let angle = currentDegree * CGFloat.pi / 180 // Radian 47 let affine = CGAffineTransform(rotationAngle: angle) 48 rouletteImage.transform = affine 49 currentDegree += degree 50 currentDegree.formRemainder(dividingBy: 360.0) 51 } 52 53 // ストップボタンを押した後、止まるまで呼び出される回転処理 54 @objc func stopImage(_ sender: Timer) { 55 // 呼び出し時に送られれてきた値を CGFloat に変換 56 var degree = sender.userInfo as! CGFloat 57 58 let angle = currentDegree * CGFloat.pi / 180 // Radian 59 let affine = CGAffineTransform(rotationAngle: angle) 60 rouletteImage.transform = affine 61 currentDegree += degree 62 currentDegree.formRemainder(dividingBy: 360.0) 63 64 // 回転角を減らす 65 degree -= 0.05 66 67 if degree > 0 { 68 // 回転角が正の間は、減らした回転角を使って再度タイマ割り込みを使う 69 timer = Timer.scheduledTimer(timeInterval: interval, target: self, selector: #selector(stopImage), userInfo: degree, repeats: false) 70 } else { 71 // 状態を元に戻し、ボタンのタイトルを変更する 72 buttonStartFlg = true 73 startButton.setTitle("Start", for: .normal) 74 } 75 } 76}

投稿2021/02/16 04:18

TsukubaDepot

総合スコア5086

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

AtsushiNakamura

2021/02/16 04:28

回答ありがとうございます codeまで添付していただき大変助かります 理想的なアニメーションで全て解決しそうです
TsukubaDepot

2021/02/16 08:51

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

0

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

投稿2021/02/15 09:29

cleaner

総合スコア49

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

AtsushiNakamura

2021/02/16 04:24

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問