swift - 属性更改 SwiftUI 的动画 View

Question

我有意见

struct CellView: View {
    @Binding var color: Int
    @State var padding : Length = 10
    let colors = [Color.yellow, Color.red, Color.blue, Color.green]

    var body: some View {
        colors[color]
            .cornerRadius(20)
            .padding(padding)
            .animation(.spring())
    }
}

我希望它在属性 color 更改时具有填充动画。我想对从 10 到 0 的填充进行动画处理。

我试过使用onAppear

    ...onAppear {
      self.padding = 0
    }

但它只在 View 出现时(如预期的那样)工作一次，我想在每次属性 color 更改时都这样做。基本上，每次 color 属性更改时，我都希望将填充从 10 设置为动画 0。您能告诉我是否有办法做到这一点吗？

Answer 1

正如您在另一个答案中注意到的那样，您无法从 body 中更新状态。您也不能像使用 @State 那样在 @Binding(至少从 Beta 4 开始)上使用 didSet。

我能想到的最佳解决方案是使用 BindableObject 和 sink/onReceive 来更新每个 上的 padding >颜色改变。我还需要添加延迟以使填充动画完成。

class IndexBinding: BindableObject {
    let willChange = PassthroughSubject<Void, Never>()
    var index: Int = 0 {
        didSet {
            self.willChange.send()
        }
    }
}

struct ParentView: View {
    @State var index = IndexBinding()
    var body: some View {
        CellView(index: self.index)
            .gesture(TapGesture().onEnded { _ in
                self.index.index += 1
            })
    }
}

struct CellView: View {

    @ObjectBinding var index: IndexBinding
    @State private var padding: CGFloat = 0.0

    var body: some View {
            Color.red
                .cornerRadius(20.0)
                .padding(self.padding + 20.0)
                .animation(.spring())
                .onReceive(self.index.willChange) {
                    self.padding = 10.0
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.35) {
                        self.padding = 0.0
                    }
                }
    }
}

此示例不会在 Beta 4 的 Xcode Canvas 中设置动画。请在模拟器或设备上运行它。