在 App 中为符号添加动画效果

使用动画符号为你的 App 增添趣味。探索如何使用具有统一 API 的新符号框架来创建和配置符号效果。了解如何使用 SwiftUI、AppKit 和 UIKit 在用户界面中轻松实现符号动画。探索无缝集成新动画和其他 App 内容的技巧和诀窍。为了充分理解本节内容，建议你先观看讲座“SF Symbols 5 中的新功能”。

资源

- 高清视频
- 标清视频

相关视频

WWDC23

下载

♪ ♪

Anant：大家好欢迎观看课程 “在 App 中为符号添加动画” 我是 Anant 是一名 UIKit 工程师 SF Symbols 是 Apple 界面的一个标志性部分

菜单、工具栏和边栏中的符号都很美观因为用户熟悉符号所以符号可以直观地表现 App 的功能在 iOS 17 和 macOS Sonoma 中我们用动画来增强符号效果为 App 注入前所未有的活力我会先介绍新的符号动画也叫“符号效果” 然后我会为你介绍如何使用 SwiftUI、 UIKit 和 AppKit 中新的 API 来为 App 添加符号效果最后我会提供一些能给符号效果锦上添花的小技巧

我们开始吧

iOS 17 和 macOS Sonoma 引入了一系列通用动画可以应用到任何符号图像包括自定义符号这些动画包括弹跳、脉冲、可变颜色、缩放、出现、消失和替换

建议你观看课程 “SF Symbols 5 的新功能” 深入了解有关动画的内容包括使用动画设计界面的最佳实践

在 API 中我们称这些动画为“符号效果” 而新的 Symbols 框架是动画的主要组成部分当你使用 SwiftUI、AppKit 或 UIKit 构建 App 时可免费使用 Symbols 框架 Symbols 框架有一个很酷的功能那就是每个效果都有一个简单的以点分隔的名称因此如果要创建一个弹跳效果只需在代码中简单地写上“.bounce”

这种以点分隔的命名方式也适用于效果的配置方式例如可以指定符号的弹跳方向是向上还是向下但大多数情况下你不需要指定任何内容框架将自动选择最合适的方向某些效果具有多个配置选项例如可变颜色效果有三种不同的设置通过链接配置选项你可以轻松配置特定的效果这些效果名称是真实的 Swift 代码没有附带的字符串 Xcode 会自动补全名称的每个部分并且如果效果配置错误你在编译时会收到错误消息使用 SF Symbols App 是探索所有新动画的最佳方法在新动画的标签页中你可以了解每个效果的所有可用配置选项你甚至可以复制以点分隔的效果名称直接在代码中使用将不同的效果类型和配置选项相结合后可以生成各种动画效果所有这些效果其实都包含一小组行为

比如弹跳效果是在符号上播放一次动画这是离散行为另一方面添加一个缩放效果会改变符号的大小并会无限保持这种状态缩放效果可支持无限行为与离散效果不同无限效果只有在明确移除时才会结束

出现效果和消失效果支持过渡行为这两种效果可让符号过渡进出视图

最后替换效果是一种内容过渡会从一种符号变成另一种符号

这 4 种不同的行为是：离散、无限、过渡以及内容过渡在 Symbols 框架中每种行为都对应一种协议效果通过遵守这些协议来声明它们所支持的行为

下面是所有可用效果的分类以及它们支持的行为我会在本课程中详细介绍请注意效果的行为决定了可以与哪些 UI 框架的 API 一起使用说到 UI 框架的 API 我们来看看如何在 SwiftUI、 UIKit 和 AppKit App 中添加这些炫酷效果

在 SwiftUI 中有个新的视图修饰符：symbolEffect

只需添加修饰符并传入所需的效果即可这里我传入了 variableColor 此符号现在正播放默认的可变颜色动画

在 AppKit 和 UIKit 中也可以轻松实现只需在图像视图上使用新的 addSymbolEffect 方法来添加可变颜色效果即可我可以使用点语法来配置可变颜色效果在这里我将效果更改为 variableColor.iterative.reversing 得到了不同的可变颜色动画它生动表现了我的 App 正在连接网络甚至还可以组合不同的效果在这里我添加了 scale.up 效果现在符号同时在进行可变颜色动画和缩放

这些 API 提供了一种简单的方式用于对符号图像添加无限效果刚才介绍过无限效果会无限期地改变符号直到移除效果

因此借助 symbolEffect 修饰符我就可以应用一个可变颜色效果它会持续播放动画但我还需要一种控制效果的方法当 App 成功连接到网络后我希望该动画停止播放

可以通过添加布尔型的 isActive 参数来实现控制在这里我只在 App 正在连接互联网时应用该效果 App 完成连接后符号动画会同时结束

在 AppKit 和 UIKit 中使用 removeSymbolEffect 方法可终止无限效果那要如何终止负责执行一次性动画的离散效果呢？我之前提到了弹跳的例子 App 可能会触发反弹效果来响应某些事件

在 SwiftUI 中可以使用相同的 symbolEffect 修饰符来添加离散效果但我还必须向 SwiftUI 提供一个值每当该值发生变化时 SwiftUI 就会触发离散效果

我们来添加一个按钮按下它时符号就会弹跳按钮的处理程序只需要增加 bounceValue SwiftUI 会检测到 bounceValue 的变化并触发弹跳效果在 AppKit 和 UIKit 中可以通过向图像视图添加弹跳效果来实现该触发因为弹跳只支持离散行为所以添加效果只会执行一次弹跳我们不需要之后移除效果

现在假设我不希望符号只弹跳一次想要它弹跳两次该怎么办？ SwiftUI、AppKit 和 UIKit 支持 options 参数我可以在其中指定重复次数现在触发该效果时符号会弹跳两次弹跳并不是唯一具有离散行为的效果我开始时介绍的两个效果：脉冲和可变颜色支持无限行为也支持离散行为换句话说这两个效果可以播放一次性的动画就像弹跳效果一样所以我可以将之前的弹跳示例改为 variableColor 可变颜色效果会切换为使用离散行为因为它是以非重复的方式应用的

现在按下该按钮会执行两个可变颜色循环

接下来我们来了解一下内容过渡效果替换效果就是一个主要示例它可以在两个不同的符号图像之间进行动画切换这里有一个图像可在暂停符号和播放符号之间切换

SwiftUI 有个新的 contentTransition 类型叫做 symbolEffect 可以与替换效果一起使用如果将图片放在一个按钮内且该按钮会切换显示的符号那么变化现在就有了动画效果在 AppKit 和 UIKit 中可以使用新的 setSymbolImage 方法通过符号内容过渡来变换图像

最后介绍一下出现效果和消失效果二者使用独特的动画效果来显示和隐藏符号只有这两种效果被归为过渡效果在深入讨论这个之前需要先介绍一下平行空间不过不用担心平行空间并没有看起来那么复杂在一个空间中虽然图像消失了但图像视图仍然在层次结构中也就是说布局没有变化正方形和圆形之间的距离保持不变而在另一个平行空间中层次结构中图像视图的添加或删除是真实的周围视图的布局会因此发生变化

更棒的是出现和消失效果都支持这两种行为

第一种行为可以实现是因为出现和消失都属于无限效果

你已经知道如何使用无限效果了在 SwiftUI 中使用 .symbolEffect 修饰符并传入 .disappear 当 isMoonHidden 的值更新时就会应用消失效果

在 AppKit 和 UIKit 中使用 addSymbolEffect 并传入 .disappear 或 .appear

要注意的是无限效果并不会改变布局只会改变图像视图中符号的呈现方式

这就是刚刚说的第一种行为那么要如何切换到周围布局发生变化的平行空间呢？

这就需要用到过渡行为过渡效果可以与 SwiftUI 内置的过渡修饰符一起使用可以对视图层次结构中视图的插入或移除进行动画处理

我们来把之前的代码转换为使用过渡行为我不用根据条件应用消失效果而是根据条件在视图层次结构中添加符号

然后我会添加一个过渡修饰符 SwiftUI 中有一个新的过渡类型没错就是 symbolEffect 通过传入 .disappear 可以对符号进行添加和移除的动画处理

你还可以使用一种独特的过渡效果叫自动化此效果将自动执行最合适该符号的过渡动画

如果你不使用 SwiftUI 那就需要在层次结构中手动添加或移除图像视图 UIKit 提供了效果的完成处理程序可以帮到你只需添加一个消失效果当效果完成时可从层次结构中移除图像视图就是这些内容以上就是 SwiftUI、AppKit 和 UIKit 中的符号效果现在各位已了解了基础知识接下来我会介绍一些进阶技巧可帮助你在 App 中深入运用符号效果 UIImageView 上新的 UIKit 方法也可用于 UIBarButtonItem 便捷的符号动画操作让工具栏焕发生机在 iOS 17 上一些 UIKit 控件还具有内置的符号动画

例如 UISlider 现在会在拇指划到轨道的两端时弹跳图像你可以使用 UIControl 和 UIBarButtonItem 上新的 isSymbolAnimationEnabled 属性来控制是否播放这些动画

在 SwiftUI 中禁用符号效果时还有一些事项需要额外注意

与 SwiftUI 中的其他修饰符一样 symbolEffect 修饰符会通过视图层次结构传播也就是说可以通过在父视图上添加修饰符来将效果应用于多个图像使用 symbolEffectsRemoved 修饰符可以防止视图继承符号效果某些符号效果如出现、消失和缩放会通过动画改变符号的外观你可能会希望让符号在初始状态下缩放或消失且不带动画效果在 SwiftUI 中可以使用已禁用动画的事务来实现这一点在此示例中我用它来应用一个无动画的 scale.up 效果

在 AppKit 和 UIKit 中使用 addSymbolEffect 的 animated 参数能够以无动画的方式应用效果最后我们来了解一下变量值

iOS 16 和 macOS Ventura 引入了变量值作为符号的另一个维度代表了诸如音量水平和信号强度等概念

在 iOS 17 和 macOS Sonoma 中在任意变量值之间实现渐变效果已变得非常简单

在 SwiftUI 中你无需任何操作这里有一个 Wi-Fi 符号其变量值基于某个状态在本例中是当前信号强度随着信号强度的变化 Wi-Fi 符号会自动更新并同时在变量值之间进行动画显示在 AppKit 和 UIKit 中可使用自动符号内容过渡它会检测新的符号图像是否有不同的变量值如果有的话就会淡入淡出到新的值

非常感谢你今天观看本课程有很多方法可以对符号进行动画处理欢迎使用 SF Symbols App 来发现更多可能探索 Symbols 框架并尝试在 SwiftUI、 AppKit 和 UIKit 中使用新的符号效果 API 最后欢迎采用动画效果让 App 界面更加赏心悦目

还可以观看其他有关符号的课程了解符号动画的人机界面指南以及更新自定义符号来支持所有效果的方法感谢观看祝你编码顺利

6:02 - Symbol effects in SwiftUI

// Symbol effects in SwiftUI

Image(systemName: "wifi.router")
    .symbolEffect(.variableColor.iterative.reversing)
    .symbolEffect(.scale.up)

6:02 - Symbol effects in AppKit and UIKit

let imageView: NSImageView = ...

imageView.addSymbolEffect(.variableColor.iterative.reversing)
imageView.addSymbolEffect(.scale.up)

6:49 - Indefinite symbol effects in SwiftUI

struct ContentView: View {
    @State var isConnectingToInternet: Bool = true
    
    var body: some View {
        Image(systemName: "wifi.router")
            .symbolEffect(
                .variableColor.iterative.reversing,
                isActive: isConnectingToInternet
            )
    }
}

7:09 - Indefinite symbol effects in AppKit and UIKit

let imageView: NSImageView = ...

imageView.addSymbolEffect(.variableColor.iterative.reversing)

// Later, remove the effect
imageView.removeSymbolEffect(ofType: .variableColor)

8:26 - Discrete symbol effects in SwiftUI

struct ContentView: View {
    @State var bounceValue: Int = 0
    
    var body: some View {
        VStack {
            Image(systemName: "antenna.radiowaves.left.and.right")
                .symbolEffect(
                    .bounce,
                    options: .repeat(2),
                    value: bounceValue
                )
            
            Button("Animate") {
                bounceValue += 1
            }
        }
    }
}

8:26 - Discrete symbol effects in AppKit and UIKit

let imageView: NSImageView = ...

// Bounce
imageView.addSymbolEffect(.bounce, options: .repeat(2))

9:40 - Content transition symbol effects in SwiftUI

struct ContentView: View {
    @State var isPaused: Bool = false
    
    var body: some View {
        Button {
            isPaused.toggle()
        } label: {
            Image(systemName: isPaused ? "pause.fill" : "play.fill")
                .contentTransition(.symbolEffect(.replace.offUp))
        }
    }
}

9:57 - Content transition symbol effects in AppKit and UIKit

let imageView: UIImageView = ...
imageView.image = UIImage(systemName: "play.fill")

// Change the image with a Replace effect
let pauseImage = UIImage(systemName: "pause.fill")!
imageView.setSymbolImage(pauseImage, contentTransition: .replace.offUp)

11:14 - Indefinite Appear and Disappear symbol effects in SwiftUI

struct ContentView: View {
    @State var isMoonHidden: Bool = false
    
    var body: some View {
        HStack {
            RoundedRectangle(cornerRadius: 5)

            Image(systemName: "moon.stars")
               .symbolEffect(.disappear, isActive: isMoonHidden)

            Circle()
        }
    }
}

11:30 - Indefinite Appear and Disappear symbol effects in AppKit and UIKit

let imageView: UIImageView = ...
imageView.image = UIImage(systemName: "moon.stars")

imageView.addSymbolEffect(.disappear)
// Re-appear the symbol
imageView.addSymbolEffect(.appear)

12:38 - Transition symbol effects in SwiftUI

struct ContentView: View {
    @State var isMoonHidden: Bool = false
    
    var body: some View {
        HStack {
            RoundedRectangle(cornerRadius: 5)

            if !isMoonHidden {
                Image(systemName: "moon.stars")
                    .transition(.symbolEffect(.disappear.down))
            }

            Circle()
        }
    }
}

12:59 - Appear and Disappear symbol effects in UIKit with completion handler

let imageView: UIImageView = ...
imageView.image = UIImage(systemName: "moon.stars")

imageView.addSymbolEffect(.disappear) { context in
    if let imageView = context.sender as? UIImageView, context.isFinished {
        imageView.removeFromSuperview()
    } 
}

14:19 - Symbol effect propagation in SwiftUI

VStack {
    Image(systemName: "figure.walk")
        .symbolEffectsRemoved()
    Image(systemName: "car")
    Image(systemName: "tram")
}
.symbolEffect(.pulse)

14:55 - Effects without animation in SwiftUI

struct ContentView: View {
    @State var isScaledUp: Bool = false
    
    var body: some View {
        Image(systemName: "iphone.radiowaves.left.and.right")
            .symbolEffect(.scale.up, isActive: isScaledUp)
            .onAppear {
                var transaction = Transaction()
                transaction.disablesAnimations = true
                withTransaction(transaction) {
                    isScaledUp = true
                }
            }
    }
}

15:06 - Effects without animation in AppKit and UIKit

// Effects without animation in AppKit and UIKit

let imageView: UIImageView = ...
imageView.image = UIImage(systemName: "iphone.radiowaves.left.and.right")

imageView.addSymbolEffect(.disappear, animated: false)

15:44 - Variable value animations in SwiftUI

struct ContentView: View {
    @State var signalLevel: Double = 0.5
    
    var body: some View {
        Image(systemName: "wifi", variableValue: signalLevel)
    }
}

16:07 - Variable value animations in AppKit and UIKit

let imageView: UIImageView = ...
imageView.image = UIImage(systemName: "wifi", variableValue: 1.0)

// Animate to a different Wi-Fi level
let currentSignalImage = UIImage(
    systemName: "wifi",
    variableValue: signalLevel
)!
imageView.setSymbolImage(currentSignalImage, contentTransition: .automatic)

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。