Swift3 – CABasicAnimationを使って画像をクルクル回転させてみた

 

CABasicAnimationを使うと、画像を回転させることができます。

Step1

シングルビューでプロジェクト作成

スクリーンショット 2017-05-02 20.23.51.png

step2

適当な名前をつけた後、Assets.xcassetsに画像を回転させる画像を挿入する

スクリーンショット 2017-05-02 20.28.11.png

step3

viewDidAppear を生成します

override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)



    }

現時点全ソース

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }



    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)



    }



}

Step4

UIImageをたくさん用意して渦巻き挿入

スクリーンショット 2017-05-02 20.36.09.png

IBOutletで画像を参照できるようにします

 @IBOutlet weak var uzumaki01: UIImageView!
    @IBOutlet weak var uzumaki02: UIImageView!
    @IBOutlet weak var uzumaki03: UIImageView!
    @IBOutlet weak var uzumaki04: UIImageView!
    @IBOutlet weak var uzumaki05: UIImageView!
    @IBOutlet weak var uzumaki06: UIImageView!
    @IBOutlet weak var uzumaki07: UIImageView!
    @IBOutlet weak var uzumaki08: UIImageView!
    @IBOutlet weak var uzumaki09: UIImageView!
    @IBOutlet weak var uzumaki10: UIImageView!
    @IBOutlet weak var uzumaki11: UIImageView!
    @IBOutlet weak var uzumaki12: UIImageView!
    @IBOutlet weak var uzumaki13: UIImageView!    
    @IBOutlet weak var uzumaki14: UIImageView!


viewDidAppearの中に処理を書きます

手順としては、

1, CABasicAnimation をインスタンス化する

2, 回転し始める初期値を入力する

3, 速度を設定する

4,くるくる回すように指示する

実装

// ①アニメーションするプロパティを指定し、オブジェクト作成
        let moveToCenter = CABasicAnimation(keyPath: "transform.rotation")

        // ②アニメーションの初期値を指定する
        moveToCenter.fromValue = -view.bounds.size.width/2


        // ③アニメーションの終了時の値を指定する
        //moveToCenter.toValue = view.bounds.size.width/2

        // ④アニメーションの時間を指定する
        moveToCenter.duration = 1

        moveToCenter.repeatCount = MAXFLOAT



        // ⑤アニメーションをlayerに追加する
        self.uzumaki01.layer.add(moveToCenter, forKey: nil)



全ソース

import UIKit

class ViewController: UIViewController {


    @IBOutlet weak var uzumaki01: UIImageView!
    @IBOutlet weak var uzumaki02: UIImageView!
    @IBOutlet weak var uzumaki03: UIImageView!
    @IBOutlet weak var uzumaki04: UIImageView!
    @IBOutlet weak var uzumaki05: UIImageView!
    @IBOutlet weak var uzumaki06: UIImageView!
    @IBOutlet weak var uzumaki07: UIImageView!
    @IBOutlet weak var uzumaki08: UIImageView!
    @IBOutlet weak var uzumaki09: UIImageView!
    @IBOutlet weak var uzumaki10: UIImageView!
    @IBOutlet weak var uzumaki11: UIImageView!
    @IBOutlet weak var uzumaki12: UIImageView!
    @IBOutlet weak var uzumaki13: UIImageView!    
    @IBOutlet weak var uzumaki14: UIImageView!





    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }



    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        // ①アニメーションするプロパティを指定し、オブジェクト作成
        let moveToCenter = CABasicAnimation(keyPath: "transform.rotation")

        // ②アニメーションの初期値を指定する
        moveToCenter.fromValue = -view.bounds.size.width/2


        // ③アニメーションの終了時の値を指定する
        //moveToCenter.toValue = view.bounds.size.width/2

        // ④アニメーションの時間を指定する
        moveToCenter.duration = 1

        moveToCenter.repeatCount = MAXFLOAT



        // ⑤アニメーションをlayerに追加する
        self.uzumaki01.layer.add(moveToCenter, forKey: nil)

        // ⑤アニメーションをlayerに追加する
        self.uzumaki02.layer.add(moveToCenter, forKey: nil)

        // ⑤アニメーションをlayerに追加する
        self.uzumaki03.layer.add(moveToCenter, forKey: nil)

        // ⑤アニメーションをlayerに追加する
        self.uzumaki04.layer.add(moveToCenter, forKey: nil)

        // ⑤アニメーションをlayerに追加する
        self.uzumaki05.layer.add(moveToCenter, forKey: nil)

        // ⑤アニメーションをlayerに追加する
        self.uzumaki06.layer.add(moveToCenter, forKey: nil)

        // ⑤アニメーションをlayerに追加する
        self.uzumaki07.layer.add(moveToCenter, forKey: nil)

        // ⑤アニメーションをlayerに追加する
        self.uzumaki08.layer.add(moveToCenter, forKey: nil)

        // ⑤アニメーションをlayerに追加する
        self.uzumaki09.layer.add(moveToCenter, forKey: nil)

        // ⑤アニメーションをlayerに追加する
        self.uzumaki10.layer.add(moveToCenter, forKey: nil)

        // ⑤アニメーションをlayerに追加する
        self.uzumaki11.layer.add(moveToCenter, forKey: nil)

        // ⑤アニメーションをlayerに追加する
        self.uzumaki12.layer.add(moveToCenter, forKey: nil)

        // ⑤アニメーションをlayerに追加する
        self.uzumaki13.layer.add(moveToCenter, forKey: nil)

        // ⑤アニメーションをlayerに追加する
        self.uzumaki14.layer.add(moveToCenter, forKey: nil)










    }



}

スクリーンショット 2017-05-02 20.51.50.png

全ソース

https://github.com/Ryosuke-Hujisawa/RotationCABasicAnimationSample

藤沢瞭介(Ryosuke Hujisawa)
  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

未整理記事