在 SwiftUI 中,symbolEffect 是一个用于在 SF Symbols(系统图标)上应用动画效果的修饰符。它允许开发者轻松为图标添加动态效果,从而增强用户界面的视觉表现力。
用法
1、isActive写法:用于静态启用或禁用动画。
symbolEffect<T>(_ effect: T, options: SymbolEffectOptions = .default, isActive: Bool = true)
当 isActive 为 true 时,动画播放一次或持续执行(取决于动画类型)。
Image(systemName: "heart.fill")
.symbolEffect(.bounce, isActive: true)
2、value写法:用于状态驱动动画。
symbolEffect<T, U>(_ effect: T, options: SymbolEffectOptions = .default, value: U)
每当 value 改变(通过 Equatable 比较不同),动画会重新播放一次。
@State private var liked = false
Image(systemName: liked ? "heart.fill" : "heart")
.symbolEffect(.bounce, value: liked)
.onTapGesture {
liked.toggle()
}
参数说明
1、effect:一个 SymbolEffect 类型的值,定义了应用的动画效果。
2、options:可选的 SymbolEffectOptions,可以调整动画行为,比如重复、延迟等。
.repeating:无限循环
.nonRepeating:只播放一次(默认)
.speed(Double):调整速度,例如 .speed(2) 加快一倍
.transition:与视图切换相关联(用于符号替换)
3、isActive:控制动画效果是否激活。true 表示激活效果,false 表示禁用效果。
4、value:绑定某个变量。
常用的 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 反转颜色。
常见效果
1、.appear:从无到有的出现动画(渐显或放大进入),用于图标首次出现;
2、.disappear:从有到无的消失动画,用于删除项目、关闭窗口;
3、.bounce:上下弹跳动画,用于点击喜欢、点赞、通知等;
4、.breathe:图标轻微脉动(呼吸感),用于静态状态指示,例如“连接中”;
5、.pulse:快速的闪动/缩放,用于状态更新或提示活动;
6、.rotate:旋转效果,用于刷新、加载中、转动元素;
7、.scale:放大缩小,用于聚焦、切换状态时;
8、.wiggle:左右小幅摆动(像 iOS 图标编辑时那样),用于错误提示、编辑状态;
9、.variableColor:动态颜色渐变,用于状态切换、突出交互感;
10、.replace:将旧图标替换为新图标时,平滑过渡,用于切换符号时,比如播放/暂停切换;
11、.automatic:系统自动选择合适的效果,通常配合 .contentTransition(.symbolEffect(.automatic)) 使用;
12、.hash(_:):控制不同状态下的唯一标识(触发动画的“种子”),当状态值变化时刷新动画。
注意事项
symbolEffect 主要针对 SF Symbols 生效,普通图片(如 Image(“example”))不支持。
使用时确保指定的符号支持动态效果。某些 SF Symbols 不支持某些特定效果。
效果可以结合其他修饰符(如 rotationEffect 或 scaleEffect)进行复杂动画设计。
更多效果可能需要在 SwiftUI 6 和 Swift 6 中体现。
个别写法不能同时触发,例如 .appear 不能和 .symbolEffect(…, value:)这种触发式写法一起写,否则就会报错:
Instance method 'symbolEffect(_:options:value:)' requires that 'AppearSymbolEffect' conform to 'DiscreteSymbolEffect'
相关文章
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
