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留在原地而变得越来越小？

标签： swiftuiswiftui-animation

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)
 
    }
}