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

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

あるViewを使って、

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

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

###新しいプロジェクトを作ってから、viewを載せます

###載せたViewをViewController.swiftと紐付けします

左から右へctrlを押しながらドラッグ

redViewという名前にしました

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

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()
                    })
                })
            })
        })
    }
}

###はい、連続して動くようになりました

スケールの変更に

        redView.transform = CGAffineTransform(scaleX: 0, y: 0)

を使っているのは、CGRectで調整すると左上を中心にしてスケールしてしまうためです。

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

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

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