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

Codeun

1 年前

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

Table of Contents

效果预览

`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)