The Util Designer
SwiftUI 創建Loading的動畫
xcode 13.3.1, swift 5.5, iOS 15.4
2022-08-10
Loading的動畫在很多地方都會用到，這篇我們會講講怎樣用SwiftUI Animation簡單的創建Loading的動畫。
首先先畫一個寬度為50的綠色的部份圓圈
struct CircleExample : View {
    var lineWidth = 50.0
    
    var body: some View {
        Circle()
            .inset(by: lineWidth/2.0)
            .trim(from: 0.0, to: 0.2)
            .stroke(lineWidth: lineWidth)
            .foregroundColor(.green)
            .background(
                Circle().foregroundColor(.white)
            )
    }
}
然後可以使用一個bool變量去旋轉的角度達到動畫的效果。
struct CircleExample : View {
    var lineWidth = 50.0
    @State var animationFlag = false
    
    var body: some View {
        Circle()
            .inset(by: lineWidth/2.0)
            .trim(from: 0.0, to: 0.2)
            .stroke(lineWidth: lineWidth)
            .foregroundColor(.green)
            .background(
                Circle().foregroundColor(.white)
            )
            .rotationEffect(.degrees(animationFlag ? 360.0 : 0.0))
            .animation(.linear(duration: 2), value: animationFlag)
            .onTapGesture {
                animationFlag = true
            }
    }
}
以上動畫只轉了一圈就停下來了，若想不停的讓動畫轉動，我們可以在animation中加上.repeatForever(autoreverses: false)就可以。
代碼如下：
import SwiftUI
struct CircleExample : View {
    var lineWidth = 50.0
    @State var animationFlag = false
    
    var body: some View {
        Circle()
            .inset(by: lineWidth/2.0)
            .trim(from: 0.0, to: 0.2)
            .stroke(lineWidth: lineWidth)
            .foregroundColor(.green)
            .background(
                Circle().foregroundColor(.white)
            )
            .rotationEffect(.degrees(animationFlag ? 360.0 : 0.0))
            .animation(.linear(duration: 2).repeatForever(autoreverses: false), value: animationFlag)
            .onTapGesture {
                animationFlag = true
            }
    }
}