【Swift 】回転し続けるボタンを作る
4月になり新年度になったということでZennでの投稿にチャレンジすることにしました。
回るボタン?
完成形はこんな感じです。
回り続けるButtonがタップされると次の画面に遷移します。
SpinningButton
コード全体
import UIKit
class SpinningButtonViewController: UIViewController {
@IBOutlet weak var spinningButton: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
spinningButton.layer.cornerRadius = 50
spinningButton.clipsToBounds = true
// configure rotationAnimation
let rotationAnimation = CABasicAnimation(keyPath:"transform.rotation.z")
rotationAnimation.toValue = CGFloat(Double.pi / 180) * 360
rotationAnimation.duration = 1.0
// greatestFiniteMagnitude will cause the animation to repeat forever.
rotationAnimation.repeatCount = .greatestFiniteMagnitude
spinningButton.layer.add(rotationAnimation, forKey: "rotationAnimation")
}
@IBAction func didTapSpinningButton(_ sender: UIButton) {
performSegue(withIdentifier: "next", sender: nil)
}
回転するアニメーションを作成する
全体コード内のコメントアウトをしているconfigure rotationAnimationの部分について
let rotationAnimation = CABasicAnimation(keyPath:"transform.rotation.z")
まず回転アニメーションにCABasicAnimation(KeyPath:"transform.rotation.z")
を代入します。
CABasicAnimation(KeyPath:)
には様々なKeyPathがあり、それに応じたアニメーションを行う事ができます。(今回は使用したtransform.rotation.z
以外の説明は割愛させていただきます)
transform.rotation.z
を指定することで、回転軸をz軸で回転させる事が出来ます。
x軸を回転軸にしたい場合は、transform.rotation.x
、y軸を回転軸にしたい場合は、transform.rotation.y
で指定できます。
回転軸x | 回転軸y | 回転軸z |
---|---|---|
rotation.x | rotation.y | rotation.z |
回転軸を決めたので次に回転量を決めます。
rotationAnimation.toValue = CGFloat(Double.pi / 180) * 360
toValue
では回転量(どこまでアニメーションを行うか)を設定します。
今回は、(Double.pi / 180)
で1°当たりの値を算出し、それに360を掛ける事で360°回転する値を代入しています。
次にどれだけの時間をかけてそのアニメーションを行うのかを決めます。
rotationAnimation.duration = 1.0
今回は1秒で1回転するように指定しました。
次に回転する回数を決めます。
otationAnimation.repeatCount = .greatestFiniteMagnitude
repeatCount
でリピートする回数を指定します。
今回は回転し続けて欲しかったので.greatestFiniteMagnitude
を代入しました。
最後にButtonにアニメーションを追加します。
spinningButton.layer.add(rotationAnimation, forKey: "rotationAnimation")
.layer.add(_:forKey: "rotationAnimation")
で回転するアニメーションをUIView(今回はUIButton)につけることが出来ます。
コードはGithub(littleossa)にも載せております。
まとめ
CABasicAnimation
にはまだまだ触っていないKeyPathがあるので色々触ってみたいです。
初めてのZennでドキドキしていますが、書き心地はとても気持ち良いですね☺︎
Discussion