2024/2/5

【Swift UI】Viewを左右上下に反転させる方法！rotation3DEffectの使い方

この記事からわかること

Swift UIでViewを左右/上下に反転させる方法
rotation3DEffectメソッドの使い方

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Xcode：15.0.1
iOS：17.1
Swift：5.9
macOS：Sonoma 14.1

Viewを左右上下に反転させる方法

Swift UIでViewを左右上下に反転させるにはrotation3DEffectメソッドを使用します。例えば左右に反転させたい場合はrotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))と指定します。

HStack {
    Image(systemName: "swift")
        .resizable()
        .scaledToFit()
        .frame(width: 200)
    
    Image(systemName: "swift")
        .resizable()
        .scaledToFit()
        .frame(width: 200)
        .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
}

rotation3DEffectメソッド

公式リファレンス：rotation3DEffectメソッド

rotation3DEffectはビューを指定した軸を中心に3次元で回転させてレンダリングするメソッドです。回転させる角度や回転軸、回転の基準となるポイントなどを細かく指定することができます。

func rotation3DEffect(
    _ angle: Angle,
    axis: (x: CGFloat, y: CGFloat, z: CGFloat),
    anchor: UnitPoint = .center,
    anchorZ: CGFloat = 0,
    perspective: CGFloat = 1
) -> some View

angle：ビューを回転させる角度
axis：回転軸(x/y/z)
anchor：回転を実行する基準となるポイント(デフォルト値：center)
anchorZ：コンテンツを回転させるZ軸上の位置(デフォルト値：0)
perspective：回転の相対的な消失点(デフォルト値：1)

上下

 Image(systemName: "swift")
    .resizable()
    .scaledToFit()
    .frame(width: 200)
    .rotation3DEffect(.degrees(180), axis: (x: 1, y: 0, z: 0))

上下左右

 Image(systemName: "swift")
    .resizable()
    .scaledToFit()
    .frame(width: 200)
    .rotation3DEffect(.degrees(180), axis: (x: 0, y: 0, z: 1))

画像以外のViewでも回転させることが可能

当然ですが画像(Image構造体)だけでなく他のViewにも使用することができます。

Text("Webエンジニア学習部屋")
    .rotation3DEffect(
        .degrees(45),
        axis: (x: 0.0, y: 1.0, z: 0.0),
        anchor: .center,
        anchorZ: 0,
        perspective: 1)