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

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


#step1

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


![スクリーンショット 2017-05-02 20.23.51.png](https://qiita-image-store.s3.amazonaws.com/0/135794/1cf375a4-8932-3319-9d3a-79a49a3a80e0.png "スクリーンショット 2017-05-02 20.23.51.png")

# step2

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

![スクリーンショット 2017-05-02 20.28.11.png](https://qiita-image-store.s3.amazonaws.com/0/135794/64efb119-a639-1b2b-cc74-fceaee058188.png "スクリーンショット 2017-05-02 20.28.11.png")





# step3

### viewDidAppear を生成します


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

```

### 現時点全ソース

```swift

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](https://qiita-image-store.s3.amazonaws.com/0/135794/134445b6-de63-d03d-cda6-742613fa7b57.png "スクリーンショット 2017-05-02 20.36.09.png")


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


```swift
 @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!
    
    
```
# step5

### viewDidAppearの中に処理を書きます

手順としては、

```

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

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

3, 速度を設定する

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

```

### 実装

```swift


// ①アニメーションするプロパティを指定し、オブジェクト作成
        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)



```


# 全ソース

```swift

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://qiita-image-store.s3.amazonaws.com/0/135794/53959008-432a-68e2-f15b-1bbca3a7ce6c.png "スクリーンショット 2017-05-02 20.51.50.png")



# 全ソース

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