SwiftUI學習筆記之Animations 一

SwiftUI的Animations可以用到View當中，不僅是數值變化可以使用，即使是布爾變量也可以使用，例如在Button中使用

 @State private var enabled = false
    var body: some View {
        Button("點我") {
            self.enabled.toggle()
        }
        .frame(width: 200, height: 200)
        .background(enabled ? Color.blue : Color.red)
    }

當點擊button時，背景顏色立刻變為藍色或者紅色。如果我們加上animation

@State private var enabled = false
    var body: some View {
        Button("Tap Me") {
            self.enabled.toggle()
        }
        .frame(width: 200, height: 200)
        .background(enabled ? Color.blue : Color.red)
        .animation(.default)
    }
}

則顏色變化則漸變為紅色或者藍色。
除了默認的動畫模式還有很多可供選擇
比如
interpolatingSpring

.animation(.interpolatingSpring(stiffness: 10, damping: 2))

easeInOut

.animation(.easeOut(duration: 2))

如果需要關閉動畫或者使用不同的動畫則可以

}
        .frame(width: 200, height: 200)
        .background(enabled ? Color.blue : Color.red)
        .animation(.easeOut(duration: 2))
        .animation(nil)

在.animation(nil)以后的modifier則不會再使用easeOut動畫，我們則可以加入別的動畫應用到modifier中，如

}
        .frame(width: 200, height: 200)
        .background(enabled ? Color.blue : Color.red)
        .animation(.easeOut(duration: 2))
        .animation(nil)
        .clipShape(RoundedRectangle(cornerRadius: enabled ? 60 : 0))
        .animation(Animation.interpolatingSpring(stiffness: 10, damping: 1))

當使用clipShape時，動畫呈現的方式為interpolatingSpring
也可以直接在賦值時使用動畫如

Button("Tap Me") {
//animations 
            withAnimation(Animation.easeOut(duration: 2)){
                
                    self.enabled.toggle()
                
            }
            
        }
        .frame(width: 200, height: 200)
        .background(enabled ? Color.blue : Color.red)
        .clipShape(RoundedRectangle(cornerRadius: enabled ? 60 : 0))
        .animation(Animation.interpolatingSpring(stiffness: 10, damping: 1))

光圈變化
當button被點擊時，出現綠色光圈，并由小到大變化四次
首先為button添加overlay

.overlay(
            Circle()
                
                .stroke(Color.green,lineWidth: 4)
                
                .scaleEffect(animationAmount)
                
                .opacity(Double(2 - animationAmount))
                .animation(
                    Animation.easeInOut(duration: 4)
                        .repeatForever(autoreverses: false)
                )
                
                
        )

變量animationAmout用于變化光圈大小以及光圈的透明度，在struct內定義

@State private var animationAmount: CGFloat = 1

button的全代碼

Button("Tap Me") {
            withAnimation(Animation.easeOut(duration: 2)){
                
                    self.enabled.toggle()
                    self.animationAmount = 2
                
            }
            
        }
        .frame(width: 200, height: 200)
        .background(enabled ? Color.blue : Color.red)
        .clipShape(RoundedRectangle(cornerRadius: enabled ? 100 : 0))
        //.animation(Animation.interpolatingSpring(stiffness: 10, damping: 1))
        .overlay(
            Circle()
                
                .stroke(Color.green,lineWidth: 4)
                
                .scaleEffect(animationAmount)
                .opacity(Double(2 - animationAmount))
                .animation(
                    Animation.easeInOut(duration: 4)
                        .repeatForever(autoreverses: false)
                )
                //.opacity(self.enabled ? 100 : 0)
        )

然后點擊后