【SwiftUI】Viewの回転:rotationEffect

はじめに
基本形
1. rotationEffect(_:anchor:)
使い方
回転する位置を変更したい場合は？
さいごに
SwiftUIのおすすめ参考書籍

はじめに

Viewの回転を行うためにはrotationEffectを使います。私も振り子の作成に使いました。

そんなrotationEffectに関して記載します。

基本形

rotationEffect(_:anchor:)

func rotationEffect(
    _ angle: Angle,
    anchor: UnitPoint = .center
) -> some View

・angle：回転角度です。Angle(degrees: 角度)で角度を直接入れることが出来ます。

・anchor：回転する位置です。デフォルトはcenterになっています。

使い方

スライダーで回転角度を調整し、長方形を回転させています。

struct animationTest: View {
    @State private var angle = 180.0
    var body: some View {
        VStack {
            Spacer()
            Text("\(Int(angle))°")
                .font(.largeTitle)
            Spacer()
            Rectangle()
                .frame(width: 10,height: 200)
                .rotationEffect(Angle(degrees: angle))
            Spacer()
            Slider(value: Binding(get: {
                self.angle
            }, set: { value in
                angle = value
                self.angle = value
            }),in: 0...360,step: 1.0)
            Spacer()
            
        }
    }
}

回転する位置を変更したい場合は？

anchorを変更することで回転する位置を変更することが出来ます。

UnitPoint.bottom：Viewの底辺を基準に回転

UnitPoint.top：Viewのてっぺんを基準に回転

などなどそのほかにも指定することが可能です。

ちなみに UnitPoint.bottomを指定した場合は以下のようになります。

struct animationTest: View {
    @State private var angle = 0.0
    var body: some View {
        VStack {
            Spacer()
            Text("\(Int(angle))°")
                .font(.largeTitle)
            Spacer()
            Rectangle()
                .frame(width: 10,height: 200)
                .rotationEffect(Angle(degrees: angle),anchor: UnitPoint.bottom)
            Spacer()
            Slider(value: Binding(get: {
                self.angle
            }, set: { value in
                angle = value
                self.angle = value
            }),in: 0...360,step: 1.0)
            Spacer()
            
        }
    }
}