SwiftUI SF Symbols动画效果修饰符symbolEffect

在 SwiftUI 中，symbolEffect 是一个用于在 SF Symbols（系统图标）上应用动画效果的修饰符。它允许开发者轻松为图标添加动态效果，从而增强用户界面的视觉表现力。

用法

symbolEffect<T>(_ effect: T, options: SymbolEffectOptions = .default, isActive: Bool = true)

参数说明

effect：一个 SymbolEffect 类型的值，定义了应用的动画效果。

options：可选的 SymbolEffectOptions，可以调整动画行为，比如重复、延迟等。

isActive：控制动画效果是否激活。true 表示激活效果，false 表示禁用效果。

常用的 SymbolEffect

1、.pulse

图标会像脉动一样放大缩小。

Image(systemName: "exclamationmark.icloud")
    .font(.largeTitle)
    .imageScale(.large)
    .foregroundColor(.red)
    .symbolEffect(.pulse)
    .padding()

2、.variableColor

图标会逐渐变换颜色。

Image(systemName: "wifi")
    .font(.largeTitle)
    .imageScale(.large)
    .foregroundColor(.blue)
    .symbolEffect(.variableColor.reversing)
    .padding()

这里还额外使用 .reversing 反转颜色。

3、.disapper

隐藏图标。

Image(systemName: "trash.slash")
    .font(.largeTitle)
    .imageScale(.large)
    .foregroundColor(.blue)
    .symbolEffect(.disappear)
    .padding()

注意事项

symbolEffect 主要针对 SF Symbols 生效，普通图片（如 Image(“example”)）不支持。

使用时确保指定的符号支持动态效果。某些 SF Symbols 不支持某些特定效果。

效果可以结合其他修饰符（如 rotationEffect 或 scaleEffect）进行复杂动画设计。

更多效果可能需要在SwiftUI 6和Swift 6中体现。

相关文章

iOS 18, SwiftUI 6, & Swift 6: 从零开始构建iOS应用程序, 涵盖visionOS, macOS, watchOS：https://www.bilibili.com/video/BV1b6421f7Px?spm_id_from=333.788.videopod.episodes&vd_source=f21219cb93118beac6a36b0ef961df6a&p=3