SF Symbols 5 新增功能 - 知乎

什么是 SF Symbols

前面的文章有两篇介绍过，感兴趣可以先去看看。

• SF Synbols 介绍

• ​如何动态调整 SF Symbol 的颜色

SF Symbols 是我很喜欢的功能，我的个人 App 里的 icon 几乎都是使用的这里的图标。而且苹果每年的 WWDC 都会对其做更多的支持和改进。

今年的新功能

今年 WWDC 2023，苹果带来了为 SF Symbols 制作动画的方法，支持为 SF Symbols 添加动画，移除动画！

代码中的使用方式

为了使 icon 具有动画效果，UIImageView 中增加了一系列方法：

@available(iOS 17.0, tvOS 17.0, *)
extension UIImageView {

    @MainActor public func addSymbolEffect(_ effect: some DiscreteSymbolEffect & SymbolEffect, options: SymbolEffectOptions = .default, animated: Bool = true, completion: UISymbolEffectCompletion? = nil)

    @MainActor public func addSymbolEffect(_ effect: some IndefiniteSymbolEffect & SymbolEffect, options: SymbolEffectOptions = .default, animated: Bool = true, completion: UISymbolEffectCompletion? = nil)

    @MainActor public func addSymbolEffect(_ effect: some DiscreteSymbolEffect & IndefiniteSymbolEffect & SymbolEffect, options: SymbolEffectOptions = .default, animated: Bool = true, completion: UISymbolEffectCompletion? = nil)

    @MainActor public func removeSymbolEffect(ofType effect: some DiscreteSymbolEffect & SymbolEffect, options: SymbolEffectOptions = .default, animated: Bool = true, completion: UISymbolEffectCompletion? = nil)

    @MainActor public func removeSymbolEffect(ofType effect: some IndefiniteSymbolEffect & SymbolEffect, options: SymbolEffectOptions = .default, animated: Bool = true, completion: UISymbolEffectCompletion? = nil)

    @MainActor public func removeSymbolEffect(ofType effect: some DiscreteSymbolEffect & IndefiniteSymbolEffect & SymbolEffect, options: SymbolEffectOptions = .default, animated: Bool = true, completion: UISymbolEffectCompletion? = nil)

    @MainActor public func removeAllSymbolEffects(options: SymbolEffectOptions = .default, animated: Bool = true)

    @MainActor public func setSymbolImage(_ image: UIImage, contentTransition: some ContentTransitionSymbolEffect & SymbolEffect, options: SymbolEffectOptions = .default, completion: UISymbolEffectCompletion? = nil)
}

创建一个 UIImageView，我们以 wifi 这个图标为例：

let imageView = UIImageView(image: UIImage(systemName: "wifi"))
imageView.sizeToFit()
view.addSubview(imageView)
imageView.center = view.center

这个时候会渲染一个静态的 Wi-Fi 图标，如果想在某个时机添加动画，只需要调用 addSymbolEffect 方法：

imageView.addSymbolEffect(.variableColor)

.variableColor 代表动画的类型，这里设置可变颜色。

除了这个值以外还可以设置 scale（缩放动画）、bounce（弹跳动画）、pulse（针对透明度的动画）、appear/disappear（出现和消失动画）等等一系列的动画效果，大家可以自己去尝试以下。

移除动画也很简单，只需要调用 removeAllSymbolEffects：

imageView.removeAllSymbolEffects()

或者使用 removeSymbolEffect 方法移除某个类型的动画。

在 swiftUI 中使用

在 swiftUI 中的使用更加简单，只需要在 Image 组件上使用 symbolEffect 即可：

Image(systemName: "wifi")
    .symbolEffect(.variableColor)

参考资料

[1]

SF Synbols 介绍: mp.weixin.qq.com/s?__biz=Mzg…

[2]

如何动态调整 SF Symbol 的颜色: mp.weixin.qq.com/s?__biz=Mzg…

点击下方公众号卡片，关注我，每天分享一个关于 iOS 的新知识

本文同步自微信公众号 “iOS新知”，每天准时分享一个新知识，这里只是同步，想要及时学到就来关注我吧！