【iOS小组件】可交互小组件过渡动画

前言

可交互小组件做内容变更时有时需要过渡效果使交互过程更加顺畅，苹果同样为 Text 支持部分过渡动画，有需要的可以自行尝试。

添加动画

要给动态内容添加动画的方式非常简单，只需要在控件上使用 .contentTransition 属性，当内容改变时就会自动根据设置的动画属性执行对应动画了：

Text("结算结果: \(NumberManager.number)") 
    .contentTransition(.symbolEffect)

动画类型

.contentTransition 支持传入一个 ContentTransition 类型，总共有这几种：

public struct ContentTransition : Equatable, Sendable {

    public static let identity: ContentTransition

    public static let opacity: ContentTransition

    public static let interpolate: ContentTransition

    public static func numericText(countsDown: Bool = false) -> ContentTransition

    @available(iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0, *)
    public static func numericText(value: Double) -> ContentTransition

    public static func == (a: ContentTransition, b: ContentTransition) -> Bool
}

@available(iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0, *)
extension ContentTransition {

    public static func symbolEffect<T>(_ effect: T, options: SymbolEffectOptions = .default) -> ContentTransition where T : ContentTransitionSymbolEffect, T : SymbolEffect

    public static var symbolEffect: ContentTransition { get }
}

1.identity

这个类型是初始值，当使用这个属性时，内容改变将不使用动画：

Text("结算结果: \(NumberManager.number)") 
    .contentTransition(.identity)

2.opacity

按照透明度渐变方式过渡动画。

Text("结算结果: \(NumberManager.number)") 
    .contentTransition(.opacity)

3.interpolate

当文本视图具有相同的字符串时，文本视图可以插入过渡。匹配字形对可以对其颜色、位置、大小和任何变量属性进行动画更改。

Text("结算结果: \(NumberManager.number)") 
    .contentTransition(.interpolate)

4.numericText(countsDown: Bool = false)

这个属性主要针对数字类型变化时的过渡动画，当数字切换时，会有数字滚动效果，数字默认向上滚动，countsDown 参数用来控制是否向下滚动。

Text("结算结果: \(NumberManager.number)") 
    .contentTransition(.numericText(countsDown: false))

5.numericText(value: Double)

这个属性同样是针对数字切换的，只不过数字动画切换的方向是由参数 value 值和当前值对比决定的，如果更新的值大于当前值，则动画向上滚动，否则向下滚动。

Text("结算结果: \(NumberManager.number)") 
    .contentTransition(.numericText(value: Double(NumberManager.number)))

6.symbolEffect

将默认符号效果过渡应用于插入或删除视图层次结构中的符号图像的内容过渡。

Text("结算结果: \(NumberManager.number)") 
    .contentTransition(.symbolEffect)

7.symbolEffect(_ effect: T, options: SymbolEffectOptions = .default) -> ContentTransition where T : ContentTransitionSymbolEffect, T : SymbolEffect

同样也是针对符号的动画效果，只是多了可自定义 effect 和 options 参数:

Text("结果: \(NumberManager.number)")
    .contentTransition(.symbolEffect(.automatic, options: .speed(1)))

---

参考

mp.weixin.qq.com/s?\_\_biz=M…

本文同步自微信公众号 "程序员小溪" ，这里只是同步，想看及时消息请移步我的公众号，不定时更新我的学习经验。