Zenn
📀

【Swift 】回転し続けるボタンを作る

2021/04/01に公開
Swift
tech

４月になり新年度になったということでZennでの投稿にチャレンジすることにしました。

回るボタン？

完成形はこんな感じです。
回り続けるButtonがタップされると次の画面に遷移します。
SpinningButton

コード全体

SpinningButtonViewController.swift
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） で１°当たりの値を算出し、それに３６０を掛ける事で３６０°回転する値を代入しています。

次にどれだけの時間をかけてそのアニメーションを行うのかを決めます。

rotationAnimation.duration = 1.0

今回は１秒で１回転するように指定しました。

次に回転する回数を決めます。

otationAnimation.repeatCount = .greatestFiniteMagnitude

repeatCountでリピートする回数を指定します。
今回は回転し続けて欲しかったので.greatestFiniteMagnitudeを代入しました。

最後にButtonにアニメーションを追加します。

spinningButton.layer.add(rotationAnimation, forKey: "rotationAnimation")

.layer.add(_:forKey: "rotationAnimation")で回転するアニメーションをUIView（今回はUIButton）につけることが出来ます。

コードはGithub(littleossa)にも載せております。

まとめ

CABasicAnimationにはまだまだ触っていないKeyPathがあるので色々触ってみたいです。
初めてのZennでドキドキしていますが、書き心地はとても気持ち良いですね☺︎

参考

【Swift】UIButtonを一回転させるアニメーション【改】

Discussion