一个渐变到另一个 SwiftUI 的动画过渡答案

【问题标题】：Animation transition of one gradient to another SwiftUI一个渐变到另一个 SwiftUI 的动画过渡
【发布时间】：2021-01-07 02:00:06
【问题描述】：

我试图根据状态值的值来改变背景的渐变，这应该是可能的，而且确实如此。但是，我想对渐变/背景的这种变化进行动画处理（当属性依赖于某些过渡时，您通常会这样做）。所以我尝试设置一个三元运算符，将背景更改为不同的渐变，并带有动画/过渡。背景确实发生了变化，但没有平滑的过渡，只是一种剧烈的变化。这是我为说明问题而创建的一个最小工作示例：

import SwiftUI
// Based on https://nerdyak.tech/development/2019/09/30/animating-gradients-swiftui.html

struct ContentView: View {
    @State var animCheck: Bool = false
    
    
    var body: some View {
        VStack {
            Button(action: {
                self.animCheck = true
            }){
                Text("Change gradient")
            }
            Button(action: {
                
            }){
                Text("random button")
                    .background(self.animCheck == true ? LinearGradient(gradient: Gradient(colors: [.white, .green]), startPoint: .leading, endPoint: .trailing).transition(.slide).animation(.spring()) : LinearGradient(gradient: Gradient(colors: [.black, .orange]), startPoint: .leading, endPoint: .trailing).transition(.slide).animation(.spring()) )
            }

        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

有什么办法可以解决这个问题/在这里创建动画背景变化的预期效果？谢谢。

【问题讨论】：

标签： swift swiftui swiftui-animation swiftui-button

【解决方案1】：

我们需要对容器进行动画处理以进行过渡，所以这里有一个解决方案：

Text("random button")
    .background(
        VStack {
            if self.animCheck {
                LinearGradient(gradient: Gradient(colors: [.white, .green]), startPoint: .leading, endPoint: .trailing)
                    .transition(.slide)
            } else {
                LinearGradient(gradient: Gradient(colors: [.black, .orange]), startPoint: .leading, endPoint: .trailing)
                   .transition(.slide)
            }
        }.animation(.spring()))

【讨论】：

太棒了，谢谢你，我没有意识到你可以像这样将 if/else 语句放在背景修饰符中！