SwiftUI scaleEffect 导致不需要的位置变化

问题描述

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 不会留在原地，只是变得越来越小？

解决方法

动画在 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)
 
    }
}

,

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

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

我发现这个答案有帮助：SwiftUI: Stop an Animation that Repeats Forever

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