【SwiftUI】Shapeのアニメーション化。円のアニメーションのサンプル有り。円グラフに使えそう。

この記事で分かることは？
Shapeのアニメーション化とは？
例：円のアニメーション
注意点
1. animatableDataに直接Angleは入れられない
2. withAnimationだけでも動きそうですがanimatableDataを使わないとアニメーションしません。
さいごに
SwiftUIのおすすめ参考書籍

この記事で分かることは？

以下のようなShapeを使った円などのアニメーションを実現する方法がわかります。

Shapeのアニメーション化とは？

Shapeによる円などの実現方法に関しては以下で記載しているのでご参照下さい。

【SwiftUI】path,Shape関数で四角形や三角形,円弧などの任意の図形を書く

図形を書く場合CircleやRectangleを使うと思いますが、PathやShapeを使うことで任意の図形を書くことが出来ます。PathとShapeを使った図形の書き方を説明します。

Shapeは元々Animatableプロトコルを継承しています。そのため以下のanimatableDataを持っています。

var animatableData: EmptyAnimatableData

このanimatableDataにアニメーションさせたい変数をセットすることで、その変数はアニメーションします。

以下はendAngleをアニメーション化したい場合

    var endAngle:Double
    
    var animatableData: Double{
        get{endAngle}
        set{endAngle = newValue}
    }

例：円のアニメーション

上記で示したanimatableDataを円の終点として、下部のボタンを押すと終点がランダムで決まるソフト（冒頭のGIF）のソースが以下となります。

struct Arc:Shape{
    var startAngle:Double
    var endAngle:Double
    var clockwise:Bool
        
    var animatableData: Double{
        get{endAngle}
        set{endAngle = newValue}
    }
    
    func path(in rect: CGRect) -> Path {
        let rotationAdjustment = Angle(degrees: 90)
        let modifiedStart = Angle(degrees: startAngle) - rotationAdjustment
        let modifiedEnd = Angle(degrees: endAngle) - rotationAdjustment
        var path = Path()
        path.addArc(center: CGPoint(x: rect.midX, y: rect.midY), radius: rect.width / 2, startAngle: modifiedStart, endAngle: modifiedEnd, clockwise: clockwise)
        
        path.addLine(to: CGPoint(x: rect.midX, y: rect.midY))
        path.closeSubpath()
        
        return path
    }
}

struct ContentView: View {
    
    @State private var endAngle = 90.0
    
    var body: some View {
        VStack{
            Arc(startAngle: 0.0, endAngle: endAngle, clockwise: false)
            Button {
                withAnimation {
                    endAngle = Double.random(in: 0..<360)
                }
            } label: {
                Text("Start")
            }
            
        }
    }
}