連続したUIViewアニメーションをリピートさせる

ゲームのようにひとつながりのアニメーションをリピートさせたくて、ようやくできるようになったのでシェアします。

あるViewを使って、

・スタート時はスケール0
　　↓
・スケール1.0になって、
　　↓
・右に移動して、
　　↓
・元の位置に戻って、
　　↓
・スケール0になって消える

こんな一連のアクションをリピートさせます。

###新しいプロジェクトを作ってから、viewを載せます
<img width="730" alt="スクリーンショット 2016-11-02 15.00.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/45467/c1fb8e30-4a4b-840e-a36f-2b0614eae067.png">

<img width="1129" alt="スクリーンショット_2016-11-02_15_10_55.png" src="https://qiita-image-store.s3.amazonaws.com/0/45467/ed0a0e76-2430-4c72-89e2-965a7c041671.png">

###載せたViewをViewController.swiftと紐付けします
![IMG_5711.JPG](https://qiita-image-store.s3.amazonaws.com/0/45467/d06b4618-124e-3528-506f-972edd3087bb.jpeg)
左から右へctrlを押しながらドラッグ

<img width="742" alt="スクリーンショット 2016-11-02 15.17.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/45467/df185541-2366-b328-d823-c3a62a56739b.png">
redViewという名前にしました

<img width="657" alt="スクリーンショット_2016-11-02_15_17_41.png" src="https://qiita-image-store.s3.amazonaws.com/0/45467/58017051-7a45-129c-85c9-07f880882ced.png">

###動かすコードはこんな感じ
```
import UIKit

class ViewController: UIViewController {


    @IBOutlet weak var redView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        sequencialAnimation()

    }
    
    func sequencialAnimation() {
        
        // スケールを最初は０にする
        redView.transform = CGAffineTransform(scaleX: 0, y: 0)
        
        // UIView.animateを入れ子にしていく
        UIView.animate(withDuration: 1.0, delay: 0, options: UIViewAnimationOptions(rawValue: 0), animations: {
            // ① スケールが1.0になって出現
            self.redView.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
        }, completion: { finished in

            // ①が終わったら、
            UIView.animate(withDuration: 1.0, delay: 0, options: UIViewAnimationOptions(rawValue: 0), animations: {
                // ② 右へ100px動く
                self.redView.frame = CGRect(x: self.redView.frame.origin.x + 100,
                                            y: self.redView.frame.origin.y,
                                            width: self.redView.frame.width,
                                            height: self.redView.frame.height)
            }, completion: { finished in

                // ②が終わったら、
                UIView.animate(withDuration: 1.0, delay: 0, options: UIViewAnimationOptions(rawValue: 0), animations: {
                    // ③ 元の位置に戻る
                    self.redView.frame = CGRect(x: self.redView.frame.origin.x - 100,
                                                y: self.redView.frame.origin.y,
                                                width: self.redView.frame.width,
                                                height: self.redView.frame.height)
                }, completion: { finished in
                    
                    // ③が終わったら
                    UIView.animate(withDuration: 1.0, delay: 0, options: UIViewAnimationOptions(rawValue: 0), animations: {
                        // ④ スケールが0になって消える
                        //（0を入れるとどういうわけかアニメーションしませんでした。そのため0.0001という小さい値をとりあえず入れています。他の方法がわからなかったので、ご存知でしたら教えてくださいm(_ _)m）
                        self.redView.transform = CGAffineTransform(scaleX: 0.0001, y: 0.0001)
                    }, completion: { finished in
                        
                        // ④が終わったら、もう一度このメソッドを呼び出す
                        self.sequencialAnimation()
                    })
                })
            })
        })
    }
}
```

###はい、連続して動くようになりました
![スクリーンショット 2016-11-02 16.06.26.png](https://qiita-image-store.s3.amazonaws.com/0/45467/1874b38f-d4b3-3020-d661-8a3ae629d368.png)





スケールの変更に
```
        redView.transform = CGAffineTransform(scaleX: 0, y: 0)
```
を使っているのは、CGRectで調整すると左上を中心にしてスケールしてしまうためです。


【お詫び】④で本当はスケール０を入れたいのですが、0だとアニメーションしなかったため、仕方なく0.0001という値を入れてごまかしています。何かいい方法ご存知でしたら教えてください。


SpriteKitだと簡単に書けることもUIViewのアニメーションで書くと大変だしわかりづらいですね。他にスッキリ書ける方法あったら教えてください。

###ありがとうございました