阻止 SwiftUI 动画进行水平移动答案

【问题标题】：Stop SwiftUI animation from having horizontal movement阻止 SwiftUI 动画进行水平移动
【发布时间】：2020-02-22 17:51:08
【问题描述】：

我有一个正在创建心跳模式的动画。问题是，一旦文本（在同一个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()
            }

        }

【问题讨论】：

标签： swift animation swiftui

【解决方案1】：

给你一个完美的答案

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

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

【讨论】：

非常简单优雅的解决方案！

【解决方案2】：

我可以看到几种可能性：

您可以将您的Text 与另一个Text 放在一个VStack 中，其中包含您认为在这种情况下可能最长的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()，并将心脏一直推到右侧。

【讨论】：