Swift アニメーションしている画面の向きを変えるとアニメーションしなくなる

Question

丸型のUIViewを画面下から画面上へ移動するアニメーションを作っています。

ソースコード

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

    UIView.animateKeyframes(withDuration: 5.0, delay: 0.0, options: [.repeat], animations: {
        UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 1, animations: {
            self.blueView.frame.origin.y -= 400
        })
        UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.2, animations: {
            self.blueView.alpha = 0.5
        })
        UIView.addKeyframe(withRelativeStartTime: 0.8, relativeDuration: 0.2, animations: {
            self.blueView.alpha = 0
        })
    }, completion: nil)
}

不具合内容

画面を表示したタイミングでは正常に動作しているのですが、画面の向きを変更すると座標移動のアニメーションが動作しません。（gif画像参照）

画面の向きが変更されたタイミング（viewWillTransition）で上記のコードを実装してみたのですが動作は変わりませんでした。
Notificationで検知した場合は画面表示時にアニメーションが動作しませんでした。（画面の向きを変更すると意図した動きになった）

なにか解決方法があれば、アドバイスよろしくお願いいたします、

Answer 1

回転したとしても現在アニメーションしているビューに関しては回転前のビュー位置を元にアニメーションし続けているので想定した動きにならないのではないかと思います。
回転後に関しては再度、位置が決定した状態からアニメーションさせ直す必要があると考えて、まずはボタンを押したらアニメーションするようにして、回転させてボタンを押すようにしたところ正常にアニメーションしました。

今回はリピート再生させているものなので、画面の向きが変更されたときにremoveAllAnimationsで以前のアニメーションを削除して、新たにアニメーションさせ直すことで想定した動きになると思います。

画面の向き変更を検知する方法についてはこちらを参考にしました。
Swift3で画面の向き変更を通知する

不明点等あればコメントください。

class ViewController: UIViewController{
    
    @IBOutlet weak var blueView:UIView!
    
    override func viewDidLoad() {
        
        super.viewDidLoad()
        
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        NotificationCenter.default.addObserver(self, selector: #selector(ViewController.changeDirection), name: UIDevice.orientationDidChangeNotification, object: nil)
    }
    
    @objc func changeDirection(notification: NSNotification){
        
        // 以前のアニメーションを消す
        self.blueView.layer.removeAllAnimations()
        
        // frameが変わらないようにcompletionで元に戻すようにする。
        UIView.animateKeyframes(withDuration: 1.0, delay: 0.0, options: [.repeat], animations: {
            UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 1, animations: {
                self.blueView.frame.origin.y -= 100
            })
            UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.2, animations: {
                self.blueView.alpha = 0.5
            })
            UIView.addKeyframe(withRelativeStartTime: 0.8, relativeDuration: 0.2, animations: {
                self.blueView.alpha = 0
            })
        }, completion: { _ in self.blueView.frame.origin.y += 100})
        
    }
    
}

Comments

[daisuke_]

razumaさん。ありがとうございます。
無事解決いたしました。