如何在 SwiftUI 中为 Start->Max->Start 设置动画？

Question

所以我想在 SwiftUI 中为图像制作动画：在用户点击它之后，图像应该以颜色（红色或绿色，以指示用户点击的是正确的）高亮显示。但几秒钟后它应该恢复正常 - 就像它开始时一样。

我也试过这也能奏效，但看起来它不会动画...

目前，我使用的 ZStack 会在用户点击时激活 Color 叠加层，但我无法获得完成或类似的东西，我可以吗？如何在没有用户交互的情况下 'undo' 动画？

@State var redAlpha = 0.0

var badImg: some View{
    ZStack{
        Image(badImgName)
        .resizable()
        .scaledToFit()
        Button(action: {
            withAnimation {
                self.redAlpha = 0.5
            }
        }) {
            Color.clear
        }
        Color.red.opacity(self.redAlpha)  //<--overlay
    }
}

Answer 1

这就是您可以在延迟一段时间后为视图更改设置动画的方法。您也可以将按钮更改为 .tapAction

       ZStack {
            Image(badImgName)
                .resizable()
                .scaledToFit()
            Button(action: {
                withAnimation {
                    self.redAlpha = 0.5
                }
                DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
                    withAnimation{ self.redAlpha = 0.0 }
                }
            }) {
                Color.clear
            }

            Color.red.opacity(self.redAlpha)  //<--overlay
        }

您可能需要在视图出现或消失时调用动画，使用 .onAppear .onDisappear 很容易做到

如何在 SwiftUI 中为 Start->Max->Start 设置动画？

How to animate Start->Max->Start in SwiftUI?

animation

swift

swiftui