swiftui - SwiftUI scaleEffect 导致不需要的位置更改

Question

Xcode 12.4 + macOS 11.2.3

我在 Mac 应用程序中编写了一个非常简单的 SwiftUI 项目，但我不明白为什么scaleEffect会这样。

这是我的代码：

import SwiftUI

struct ContentView: View {
  @State var active = false
  
  var body: some View {
    VStack{
      Text("Hi")
        .scaleEffect(active ? 2 : 1)
        .animation(Animation.easeInOut(duration: 1).repeatForever())
      Button("Toggle Animation"){
        active.toggle()
      }
    }
    .frame(width:200, height:200)
  }
}

我的期望是，当我单击按钮时，“Hi”文本会变大两倍。相反，一旦我的视图加载，文本就会上下移动。单击按钮后，文本开始变得越来越小，但上下移动仍在继续。

为什么不Text留在原地而变得越来越小？

Answer 1

Animation 在 iOS 或 macOS 中的一般工作方式是：它看到并观察参数的差异并尝试回答它们，除非我们说忽略一些变化！或者只是观察我在代码中所做的特殊变化！

---

import SwiftUI

struct ContentView: View {

    @State private var toggleAnimation: Bool = Bool()
    
    var body: some View {
        
        VStack{
            
            Text("Hi")
                .background(Color.red)
                .cornerRadius(2.0)
                .scaleEffect(toggleAnimation ? 2.0 : 1.0)
                .animation(toggleAnimation ? Animation.easeInOut(duration: 1).repeatForever(autoreverses: true) : Animation.easeInOut, value: toggleAnimation)
                

            Button("Toggle Animation") { toggleAnimation.toggle() }
            
        }
        .frame(width:200, height:200)
        .background(Color.black)
 
    }
}

Answer 2

仍然有一个不需要的初始动画，“嗨”移动到位，但我找到了一种可靠地启动和停止动画的方法：

Text("Hi")
  .scaleEffect(active ? 2 : 1)
  .animation(active ? Animation.easeInOut(duration: 1).repeatForever() : Animation.default)

我找到了这个有帮助的答案：SwiftUI：停止永远重复的动画

对于.repeatFoever()动画，您必须在条件不再是时向其传递动画，true以覆盖先前的、永远重复的动画。