停止SwiftUI动画进行水平移动

Question

我有一个正在创建心跳图案的动画。问题是，一旦文本（在同一HStack中）以合理的幅度更改，动画就会由于被文本推动而水平振荡。我该如何阻止这种情况的发生？有没有一种方法可以锚定图像，以免发生这种剧烈的水平移动？

        HStack(alignment: .bottom){
            Text("\(self.hr)") +  Text("BPM")
            Image(systemName: "heart.fill")
                .padding(.init(top: 5, leading: 5, bottom: 10, trailing: 5))
                .foregroundColor(self.outdatedHR ? Color.gray : Color.red)
                .scaleEffect(self.heart ? 1.05: 0.95, anchor: .center)
                .opacity(self.heart ? 1.0: 0.75)
                .animation(Animation.easeInOut.repeatForever())
                .onAppear{
                    self.heart.toggle()
            }

        }

Answer 1

我可以看到几种可能性：

您可以将Text与另一个VStack放在Text中，其中包含您认为在这种情况下最长的String。即使它是隐藏的，它仍然会强制VStack调整其尺寸。您需要根据字体大小调整VStack中的间距。

HStack(alignment: .bottom) {
    VStack(alignment: .leading, spacing: -20) {
        Text("888 BPM").hidden()
        Text("\(self.hr) BPM")
    }
    Image(systemName: "heart.fill")
    //etc.
}

另一个选择是给Text一个明确的帧宽度。但是，它不是动态文本的理想选择：

Text("\(self.hr) BPM").frame(width: 100)

您还可以在两个元素之间放置一个Spacer()，然后将心脏一直向右推。

Answer 2

给您一个完美的答案

 .animation( Animation.easeInOut.repeatForever(), value: self.heart)

这将确保动画在self.heart更改后重新启动