[iOS][SwiftUI] 回転アニメーションの作り方

題字・次男

2025.12.25

 はじめにスターバックスデジタルテクノロジー部のけいすけです。

View に対して回転のアニメーションをかける方法を説明します。
 rotationEffect()XY 平面上で時計回りに回転させたい場合は rotationEffect() を使用します。
https://developer.apple.com/documentation/swiftui/view/rotationeffect(_:anchor:)
回転させたい角度を第一引数の angle に指定します。

反時計回りにしたい場合は angle を負の値にしましょう。
@State private var rotate: Bool = false

var body: some View {
    Button {
        rotate.toggle()
    } label: {
        Image(systemName: "chevron.down")
            .rotationEffect(.degrees(rotate ? 180 : 0))
    }
}
 rotation3DEffect()回転軸を変更したい場合は rotation3DEffect() を使用します。
https://developer.apple.com/documentation/SwiftUI/View/rotation3DEffect(_:axis:anchor:anchorZ:perspective:)
回転軸は第二引数の axis で指定します。

なお前述の rotationEffect() は XY 平面上の回転なので、axis に以下を指定した場合と同じになります。
axis: (x: 0, y: 0, z: 1)
@State private var rotate: Bool = false

var body: some View {
    Button {
        rotate.toggle()
    } label: {
        Image(systemName: "chevron.down")
            .rotation3DEffect(
                .degrees(rotate ? 180 : 0),
                axis: (x: 1, y: 0, z: 0)
            )
    }
}
 ムーンサルト（おまけ）@State private var rotate: Bool = false

var body: some View {
    Button {
        rotate.toggle()
    } label: {
        Image(systemName: "chevron.down")
            .rotation3DEffect(
                .degrees(rotate ? 720 : 0),
                axis: (x: 1, y: 0, z: 0)
            )
            .rotation3DEffect(
                .degrees(rotate ? 360 : 0),
                axis: (x: 0, y: 1, z: 0)
            )
    }
}
 おわりにrotationEffect() や rotation3DEffect() を使用すれば View の回転を自在に操ることができます。

アニメーションと組み合わせて素敵な UI を作ってみてください。
 リンクrotationEffect(_:anchor:) | Apple Documentation
rotation3DEffect(_:axis:anchor:anchorZ:perspective:) | Apple Documentation
【SwiftUI】Viewを左右・上下反転、45°回転させる | DevelopersIO
 採用情報スターバックスデジタルテクノロジー部では iOS アプリエンジニアを募集しています。

一緒にスタバのアプリを作りませんか？
https://careers.classmethod.jp/requirements/sbj-nativeapp-ios/