SwiftUI SF Symbols动画效果修饰符symbolEffect
SwiftUI SF Symbols动画效果修饰符symbolEffect

SwiftUI SF Symbols动画效果修饰符symbolEffect

在 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 6Swift 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

   

如果您认为这篇文章给您带来了帮助,您可以在此通过支付宝或者微信打赏网站开发者。

欢迎加入我们的 微信交流群QQ交流群,交流更多精彩内容!
微信交流群二维码 QQ交流群二维码

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注