iOS 17 之 SwiftUI 5 中 SF Symbols 符号的动画效果示例

从 iOS 17 开始，SF 符号 SF Symbols 加入了动画支持。要给 SF 符号 添加动画，我们需要使用 symbolEffect 修饰符来进行动画效果配置，它的配置参数。

效果预览

symbolEffect 修饰符说明

scaleEffect 的动画选项有以下几种：

• automatic 自动
• appear 显示、出现动画
• disappear 消失动画
• bounce 缩放、反弹效果，跳动动画
• pulse 脉冲淡化动画
• replace 替换效果
• scale 缩放动画
• variableColor 变色动画

示例代码

struct AnimatedSFSymbols : View { 
    @State  private  var animate =  false 
    var body: some  View { 
        Image (systemName: "alarm.waves.left.and.right.fill" ) 
            .symbolEffect(.bounce, value: animate) 
            .font(20) 
        .onTapGesture { 
            animate.toggle() 
        } 
    } 
}

这样配置的动画只有当点击图像时才会出现一次，如果要想循环重复执行动画， .symbolEffect 修饰符附加使用 options 参数，它的传值要求是 SymbolEffectOptions 类型的实例，可以用它来定义动画效果。

重复执行

.symbolEffect(.bounce, options: .repeating, value: animate) 

SymbolEffectOptions 有以下值：

重复效果

• .repeating 无限期重复的效果
• .nonRepeating 不重复
• .repeat(Int) 指定重复次数

动画速度

.speed(Double) 动画效果速度

.symbolEffect(.variableColor, options: .repeat(2), value: animate)