2

可能なはずの状態値の値に応じて背景のグラデーションを変更しようとしていましたが、そうです。ただし、このグラデーション/背景の変化をアニメーション化したかったのです (プロパティが何らかの遷移に依存する場合によくあることです)。そこで、アニメーション/トランジションを使用して、背景を別のグラデーションに変更する三項演算子を設定しようとしました。背景は変化しますが、滑らかな変化はなく、単なる変化です。この問題を説明するために作成した最小限の実例を次に示します。

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()
    }
}

これを回避する方法/ここでアニメーション化された背景の変更の意図した効果を作成する方法はありますか? ありがとう。

4

1 に答える 1

2

トランジションを機能させるにはコンテナをアニメーション化する必要があるため、解決策は次のとおりです。

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()))
于 2021-01-07T05:45:47.340 に答える