小编典典

满足条件时,SwiftUI 动画背景颜色变化

all

我正在尝试更改Text组件的背景颜色,只要满足给定条件,在本例中为 when numberOfTaps = 3,我可以通过在.background属性调用中使用条件来做到这一点

我想要做的是用动画改变背景,没有什么太花哨的,就像.easeInOut可能工作一样;我怎样才能做到这一点?

import SwiftUI

struct ContentView: View {
    @State private var numberOfTaps = 0

    var body: some View {
        VStack {
            Button("Up") {
                numberOfTaps += 1
            }

            Text("\(numberOfTaps)")
                .padding()
                .background(numberOfTaps == 3 ? Color.blue : Color.green)

            Button("Down") {
                numberOfTaps -= 1
            }
        }
    }
}

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

以下是当前 UI 的示例:

在此处输入图像描述


阅读 66

收藏
2022-07-13

共1个答案

小编典典

我已经改变了你的身体。让我们试试这个 easeInOut 动画:-

var body: some View {
        VStack {
            Button {
                numberOfTaps += 1
                color = (numberOfTaps == 3) ? Color.blue: Color.green
            } label: {
                Text("Up")
            }
            Text("\(numberOfTaps)")
                .padding()
                .background(color.animation(.easeInOut))

            Button {
                numberOfTaps -= 1
                color = (numberOfTaps == 3) ? Color.blue: Color.green
            } label: {
                Text("Down")
            }
        }
    }

注意:- 您可以使用不同的动画属性,例如。缓入、缓出等

2022-07-13