SwiftUI 动画 - 切换的布尔值始终以 true 结束

Question

我试图在我的应用程序中创建一个动画，当一个特定的动作发生时，它本质上会使给定元素的背景改变颜色并返回 x 次以创建一种“脉冲”效果。应用程序本身非常大，但我设法在一个非常基本的应用程序中重新创建了这个问题。

所以ContentView如下：

struct ContentView: View {
    struct Constants {
        static let animationDuration = 1.0
        static let backgroundAlpha: CGFloat = 0.6
    }
    
    @State var isAnimating = false
    @ObservedObject var viewModel = ContentViewViewModel()
    private let animation = Animation.easeInOut(duration: Constants.animationDuration).repeatCount(6, autoreverses: false)
    
    var body: some View {
        VStack {
            Text("Hello, world!")
                
                .padding()
            Button(action: {
                animate()
            }) {
                Text("Button")
                    .foregroundColor(Color.white)
            }
        }
        .background(isAnimating ? Color.red : Color.blue)
        .onReceive(viewModel.$shouldAnimate, perform: { _ in
            if viewModel.shouldAnimate {
                withAnimation(self.animation, {
                    self.isAnimating.toggle()
                })
            }
        })
    }
    
    func animate() {
        self.viewModel.isNew = true
    }
}

然后我的 viewModel 是：

import Combine
import SwiftUI

class ContentViewViewModel: ObservableObject {
    @Published var shouldAnimate = false
    @Published var isNew = false
    var cancellables = Set<AnyCancellable>()
    
    init() {
        $isNew
            .sink { result in
                if result {
                    self.shouldAnimate = true
                }
            }
            .store(in: &cancellables)
    }
}

所以我遵循的逻辑是，当点击按钮时，我们将“isNew”设置为 true。这又是一个发布者，当设置为 true 时，将“shouldAnimate”设置为 true。在 ContentView 中，当接收到 shouldAnimate 并且为 true 时，我们切换 VStack 的背景颜色 x 次。

我使用这个 'shouldAnimate' 发布属性的原因是因为在实际应用程序中，可能需要几个不同的动作来触发动画，因此将它绑定到一个我们可以监听的变量感觉更简单在 ContentView 中。

所以在上面的代码中，我们应该切换 isAnimating bool 6 次。所以，我们从 false 开始，然后切换如下：

1：真，2：假，3：真，4：假，5：真，6：假

所以我希望最终结果为 false，因此背景为白色。但是，这就是我得到的：

我尝试更改 repeatCount（以防我误解了计数的工作原理）：

private let animation = Animation.easeInOut(duration: Constants.animationDuration).repeatCount(7, autoreverses: false)

我得到以下信息：

无论计数如何，我总是以 true 结束。

更新：

我现在已经设法通过使用以下循环获得我正在寻找的效果：

for i in 0...5 {
                    DispatchQueue.main.asyncAfter(deadline: .now() + Double(i), execute: {
                        withAnimation(self.animation, {
                            self.isAnimating.toggle()
                        })
                    })
                }

不确定这是不是最好的方法....

Answer 1

要了解发生了什么，了解CALayer 属性动画会有所帮助。

当您定义动画时，系统会捕获图层的状态并监视该图层的动画属性的变化。它记录动画期间播放的属性更改。为了呈现动画，它会创建一个处于初始状态的图层副本（presentationLayer）。然后，它用副本代替屏幕上的实际图层，并通过操纵表示层的动画属性来运行动画。

在这种情况下，当您开始动画时，系统会观察支持您的视图的 CALayer 发生的情况并捕获任何可动画属性（在本例中为背景颜色）的更改。然后它会创建一个presentationLayer 并重复播放这些属性更改。它不会重复运行您的代码 - 它正在更改表示层的属性。

换句话说，由于您在动画块中设置的示例，系统知道层的背景颜色属性应该来回切换的动画，但是动画来回切换背景颜色而无需再次运行您的代码。