iOS 小组件开发第十篇：小组件动画

这里每天分享一个 iOS 的新知识，快来关注我吧

前言

小组件系列传送门：

iOS 小组件开发第一篇：基础介绍
 iOS 小组件开发第二篇：时间线
 iOS 小组件开发第三篇：实战
 iOS 小组件开发第四篇：小组件的尺寸
 iOS 小组件开发第五篇：开发可配置的小组件
 iOS 小组件开发第六篇：点击事件和交互
 iOS 小组件开发第七篇：锁屏小组件
 iOS 小组件开发第八篇：灵动岛开发
 iOS 小组件开发第九篇：在 iOS 17 上创建可交互的小组件

昨天讲了 iOS 17 中可直接交互的小组件，如果你有完整运行起来 Demo，可能就会发现，当点击下边的计算按钮时，上边的数字变化是有一个动画的，这其实是 iOS 17 中新增的默认过度动画，今天来讲讲 iOS 17 中新增的这些动画部分。

添加动画

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

scss 复制代码

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

动画类型

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

1、 identity

严格来说，这个类型是禁用动画的，当使用这个属性时，内容改变将不使用动画：

scss 复制代码

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

2、 opacity

按照透明度方式过度动画。

scss 复制代码

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

3、 interpolate

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

scss 复制代码

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

4、 numericText(countsDown: Bool = false)

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

less 复制代码

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

上边几个都是 iOS 16 可用的，接下来几个是 iOS 17 新增的动画效果。

5、 numericText(value: Double)

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

less 复制代码

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

6、 symbolEffect

按照苹果文档的说法，这个属性是将默认符号效果过渡应用于插入或删除视图层次结构中的符号图像的内容过渡。不过我测试下来只是增加了一个缩放的动画效果

scss 复制代码

HStack {
    if NumberManager.number > 10 {
        Image(systemName: "\(NumberManager.number).circle")
    }
    Text("结果: \(NumberManager.number)")
}
.contentTransition(.symbolEffect)

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

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

less 复制代码

Image(systemName: "\(NumberManager.number).circle")
                .contentTransition(.symbolEffect(.automatic, options: .speed(1)))

这里每天分享一个 iOS 的新知识，快来关注我吧

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