【SwiftUI】Viewを回転アニメーションさせる方法

はじめに

SwiftUIでViewを回転アニメーションさせる方法を紹介します。この記事を読むと、SwiftUIでViewを回転アニメーションさせる方法を理解できます。

作るもの

SF Symbolsを回します。

やり方

import SwiftUI

struct ContentView: View {
    @State private var isAnimating = false

    var body: some View {
        Image(systemName: "fanblades")
            .resizable()
            .scaledToFit()
            .frame(width: 160, height: 160)
            .foregroundStyle(.cyan)
            .rotationEffect(.degrees(isAnimating ? 360 : 0))
            .animation(
                .linear(duration: 0.5).repeatForever(autoreverses: false),
                value: isAnimating
            )
            .onAppear {
                isAnimating = true
            }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

解説

0.5秒かけて、360度回転するアニメーションを永遠に繰り返します。

.rotationEffect(.degrees(isAnimating ? 360 : 0))

Viewを回転させるには、rotationEffectを使います。rotationEffectには、回転する角度を指定します。isAnimatingがfalseのときは0度回転し、trueのときは360度回転します。

.animation(
    .linear(duration: 0.5).repeatForever(autoreverses: false),
    value: isAnimating
)

Viewをアニメーションさせるには、animationを使います。animationは、valueに指定した値が変更されたときに変化するViewのアニメーションを指定します。アニメーションの種類は第一引数に指定します。第一引数には、.linear(duration: 0.5).repeatForever(autoreverses: false)を指定しています。これにより、0.5秒かけて変化するアニメーションを永遠に繰り返します。

初期状態は、isAnimatingがfalseなので、Viewは0度回転しています。onAppearで、isAnimatingをtrueにすることで、Viewを360度回転します。これが永遠に繰り返されることで、Viewの回転アニメーションを実現しています。

おわりに

SwiftUIでViewを回転アニメーションさせる方法を紹介しました。このテクニックを使うと、独自のローディングスピナーを作れそうですね。この記事が参考になったと思った方は、いいねとフォローしていただけると嬉しいです☺️