面试题：Swift中SwiftUI的Button如何设置点击动画效果

Question

在SwiftUI中，给定一个Button，如何为其添加点击时的动画效果，比如改变颜色或大小，阐述具体的实现步骤和涉及的相关API。

Answer 1

1. 改变颜色：
   • 步骤：
     • 首先，在Button的action闭包中更新控制颜色的状态变量。
     • 然后，使用animation修饰符来定义动画效果。
   • 相关API：
     • 定义Button：Button(action: label:)，action为按钮点击时执行的闭包，label为按钮的显示内容。
     • 状态变量：例如，定义一个@State变量来控制颜色，如@State private var isButtonTapped = false。
     • animation修饰符：用于定义动画，如.animation(.easeInOut, value: isButtonTapped)，这里.easeInOut是动画的过渡效果，value是触发动画的状态变量。在Button的label中，根据状态变量来设置颜色，比如：

Button(action: {
    self.isButtonTapped.toggle()
}) {
    Text("点击我")
      .foregroundColor(isButtonTapped? Color.red : Color.blue)
}
.animation(.easeInOut, value: isButtonTapped)

2. 改变大小：
   • 步骤：
     • 同样在Button的action闭包中更新控制大小的状态变量。
     • 通过scaleEffect等修饰符结合animation修饰符实现动画效果。
   • 相关API：
     • 状态变量：如@State private var isButtonTapped = false。
     • scaleEffect修饰符：用于改变视图大小，如.scaleEffect(isButtonTapped? 1.5 : 1.0)。
     • animation修饰符：例如.animation(.spring(), value: isButtonTapped)，.spring()是一种弹簧动画效果。示例代码如下：

Button(action: {
    self.isButtonTapped.toggle()
}) {
    Text("点击我")
      .scaleEffect(isButtonTapped? 1.5 : 1.0)
}
.animation(.spring(), value: isButtonTapped)