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

Swiftの勉強をするならUdemyがおすすめ!

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

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

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

iOS & Swift – The Complete iOS App Development Bootcamp icon
https://www.udemy.com/courses/search/?src=ukw&q=swift

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

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

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

コメント

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