我想創建一個帶有漸變和無限加載影片的視圖（漸變的最暗部分將從視圖的左側開始，然后需要 2 秒才能向右影片，并在它“退出”視圖時在右側，它將再次出現在左側）。
一個視覺示例（不是影片，抱歉）：
這是我開始寫的內容，但它沒有按我的意愿作業。
struct TestGradientView: View {
@State private var animateGradient = false
var body: some View {
LinearGradient(
colors: [
.gray.opacity(0.25),
.gray.opacity(0.5)
],
startPoint: animateGradient ? .leading : .trailing,
endPoint: !animateGradient ? .leading : .trailing
)
.onAppear {
withAnimation(
.linear(duration: 2.0)
.repeatForever(autoreverses: true)
) {
animateGradient.toggle()
}
}
}
}
利用：
VStack {
Spacer()
TestGradientView()
.cornerRadius(4.0)
.padding(.horizontal, 16)
.frame(height: 8)
Spacer()
}
謝謝您的幫助！
uj5u.com熱心網友回復：
影片需要一些小數資料，所以只是二進制開關實際上不起作用 - 它只是一個切換。
一種可能的方法是構造位置漸變并讓影片知道漸變中的某些顏色位置發生了變化，因此具有影片效果。這可以通過AnimatableModifier.
這是一個演示（Xcode 13.4 / iOS 15.5）
主要部分：
RoundedRectangle(cornerRadius: 12).fill(.clear)
.modifier(GradientProgressEffect(position: animate))
.animation(.linear(duration: 2.0)
.repeatForever(autoreverses: true), value: animate)
.onAppear {
animate = 0.9
}
// ...
LinearGradient(
stops: [
.init(color: .gray.opacity(0.1), location: 0.0),
.init(color: .gray.opacity(1), location: position - 0.05),
.init(color: .gray.opacity(1), location: position 0.05),
.init(color: .gray.opacity(0.1), location: 1.0),
],
startPoint: .leading,
endPoint: .trailing
)
*常數可以根據需要進行調整
完整的測驗模塊在這里
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/481862.html
上一篇：樣式化組件無法設定：懸停屬性