【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の文法から部品、ネットワーク、各種センサーなど端末機能の使い方まで対応しており、あると便利な一冊です。

私はUdemyでSwiftの勉強をしてアプリを自作して公開出来るようになりました。

特に以下のコースは基礎的なUIKitの使い方からAR、機械学習(CoreML)までiOSの機能を網羅しており、図解が豊富なハンズオン形式なのでアプリを作りながら楽しく学べます。

2022/12/27時点で評価数80000越えのSwiftのトップコースです。

https://www.udemy.com/courses/search/?src=ukw&q=swift

初回は大幅な割引があったり、Udemyは定期的な割引もしていますので良ければ是非。

なお上記は英語のコースになりますが日本語字幕に対応しています。一応以下で英語コースの勉強方法(日本語化)を記載しています。ご参考にどうぞ。

もしご参考になりましたら下部にある役に立ったボタン、TwitterなどSNSへの投稿をしていただけると励みになります