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

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

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

はじめに

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

じゃあ制約をかけているViewに対してアニメーションしたいときはというとCGAffineTransformです。今回は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を使うとうまくいく

iOS開発のおすすめ書籍

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

コメント

タイトルとURLをコピーしました