【Swift】制約をかけているViewのアニメーションにはCGAffineTransformを使う

はじめに

制約をかけているViewに対して位置、サイズなどのアニメーションをかけても制約と競合するのかうまくいきません。

じゃあ制約をかけているViewに対してアニメーションしたいときはというとCGAffineTransformです。今回はCGAffineTransformの使い方を解説します。

Viewに対してアフィン変換をかけるもので、拡大、縮小、回転などに対応しています。

アフィン変換に関しての詳細は省きます。

中央にwidth:50、height:50で制約をかけた四角形を動かします。

self.imageView.transform = CGAffineTransform(アニメーションの種類)

UIView.animate(withDuration: 1) {
    self.redView.transform = CGAffineTransform(translationX: 0, y: 100)   
}completion: { bool in }

※ループGIFです

UIView.animate(withDuration: 1) {
    self.redView.transform = CGAffineTransform(scaleX: 2, y: 2)
}completion: { bool in }

※ループGifです

UIView.animate(withDuration: 1) {
    self.redView.transform = CGAffineTransform(rotationAngle: 90.degreeToRadius)
}completion: { bool in }

なお、degreeToRadiusは以下です。

extension Double{
    //角度をRadに変換
    var degreeToRadius:Double{
        return Double(self) * .pi / 180
    }
}

※ループGifです。

self.redView.transform = .identity

回転や移動など全て元に戻ります

色などはそもそも制約を受けていないので通常通りのUIViewAnimateでうまく動きます。

制約をかけているオブジェクトに位置・スケール・回転のアニメーションをかけたい時はCGAffineTransformを使うとうまくいく

あの実装方法どうだったっけ？を解決してくれます。swiftの文法から部品、ネットワーク、各種センサーなど端末機能の使い方まで対応しており、あると便利な一冊です。