前言

今天帶大家認識 animation 的使用，大家可以試著做出自己喜歡的動畫喔！

Animation

在 SwiftUI 中可以透過 .animation 來做出一些動畫效果。

以下是完整的範例 code :

import SwiftUI

struct animationPage: View {
    //variables
    @State private var dist: Double = 0
    
    var body: some View {
        VStack{
            Button("Download"){
                dist += 5
            }
            .padding()
        Image(systemName: "arrow.down")
                .offset(y:dist)
                .animation(.easeIn
                .repeatForever(autoreverses: true)
                , value: dist)   
        }
    }
}
struct animationPage_Previews: PreviewProvider {
    static var previews: some View {
        animationPage()
    }
}

上面的範例是我構想如果下載東西時會用到的簡易下載動畫。
來看一下成果：

首先須宣告一個 var 來做為改變的值。
我用移動的距離（dist）來做範例。

@State private var dist: Double = 0

接著在 animation 後面的參數傳入 dist

.animation(.easeIn, value: dist)

透過 Button 來改變 dist 的值。
dist += 10
會發現箭頭不斷向下移動。

在 .animation 有不同的進出效果:

• .default 預設
• .easeOut 一開始快，接著變慢。
• .easeIn 一開始慢，接著變快。
• .easeInOut 一開始慢，接著愈快，最後變慢。
• .linear 線性速度。
• .spring 彈簧效果。

這邊不一一展示（gif 效果沒有很明顯）大家可以自己試試這些效果，我挑一些比較少見有趣的來使用。
以下展示彈簧效果：

用 duration 來控制時間長短。
3 秒完成動畫：

可以用 .repeatCount( 次數 , autoreverse : bool ) 來執行重複次數

• autoreverse 參數決定是否以反轉的動畫回到原始狀態再播放。

這邊用了 重複三次、autoreverse : false

這邊則用了 autoreverse : true

還有其他：
用 .delay(秒數) 來延遲。
.repeatForever 來循環播放

今天就到這邊啦～
大家可以發揮創意，做出自己的動畫。