4.2_内置转场效果- .opacity, .slide, .scale

SwiftUI 内置转场效果：.opacity, .slide, .scale 🚀

SwiftUI 提供了几个内置的转场效果，让你可以轻松地为视图添加动画。其中，.opacity、.slide 和 .scale 是最常用的几个。它们简单易用，效果却非常出色！🎉

.opacity：透明度渐变

.opacity 转场通过改变视图的透明度来实现动画效果。你可以让视图从完全透明（opacity = 0）渐变为完全不透明（opacity = 1），或者反过来。这是一种非常微妙但有效的转场方式。

• 用法： 直接将 .opacity 应用于 .transition() 修饰符。

• 示例：

  if isVisible {
      Text("Hello, World!")
          .transition(.opacity)
  }

  当 isVisible 变为 true 时，Text 视图会从透明渐变为不透明。反之，当 isVisible 变为 false 时，Text 视图会从不透明渐变为透明。

.slide：滑动进入/退出

.slide 转场使视图从屏幕边缘滑动进入或退出。你可以指定滑动方向，默认是从边缘滑入。

• 用法： 将 .slide 应用于 .transition() 修饰符。

• 示例：

  if isVisible {
      Text("Hello, World!")
          .transition(.slide)
  }

  当 isVisible 变为 true 时，Text 视图会从屏幕边缘滑入。当 isVisible 变为 false 时，Text 视图会滑出屏幕。

.scale：缩放效果

.scale 转场通过改变视图的大小来实现动画效果。你可以让视图从很小逐渐放大到正常大小，或者反过来。

• 用法： 将 .scale 应用于 .transition() 修饰符。

• 示例：

  if isVisible {
      Text("Hello, World!")
          .transition(.scale)
  }

  当 isVisible 变为 true 时，Text 视图会从小逐渐放大到正常大小。当 isVisible 变为 false 时，Text 视图会从正常大小缩小消失。

组合使用，效果更佳！✨

你可以将这些内置转场效果组合起来使用，创造出更复杂的动画效果。例如，你可以同时使用 .opacity 和 .scale，让视图在缩放的同时改变透明度。

• 示例：

  if isVisible {
      Text("Hello, World!")
          .transition(.opacity.combined(with: .scale))
  }

  在这个例子中，Text 视图在显示时会同时进行透明度渐变和缩放动画，效果会更加生动有趣。

这些内置转场效果非常强大，可以帮助你轻松地为 SwiftUI 应用添加各种动画效果。尝试一下，你会发现它们能让你的应用更加吸引人！🚀