这里每天共享一个 iOS 的新知识，快来重视我吧

前语

小组件系列传送门：

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

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

增加动画

要给动态内容增加动画的方法非常简单，只需要在控件上运用 .contentTransition 特点，当内容改动时，就会自动根据设置的动画特点执行对应动画了：

Text("成果: (NumberManager.number)")
                .contentTransition(.symbolEffect)

动画类型

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

1、 identity

严格来说，这个类型是禁用动画的，当运用这个特点时，内容改动将不运用动画：

Text("成果: (NumberManager.number)")
                .contentTransition(.identity)

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

2、 opacity

依照透明度方法过度动画。

Text("成果: (NumberManager.number)")
                .contentTransition(.opacity)

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

3、 interpolate

当文本视图具有相同的字符串时，文本视图可以刺进过渡。匹配字形对可以对其颜色、位置、巨细和任何变量特点进行动画更改。

Text("成果: (NumberManager.number)")
                .contentTransition(.interpolate)

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

4、 numericText(countsDown: Bool = false)

这个特点首要针对数字类型改动时的过渡动画，当数字切换时，会有数字滚动效果，数字默许向上翻滚，countsDown 参数用来操控是否向下翻滚。

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

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

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

5、 numericText(value: Double)

这个特点同样是针对数字切换的，只不过数字动画切换的方向是由参数 value 值和当时值对比决定的，假如更新的值大于当时值，则动画向上翻滚，不然向下翻滚。

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

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

6、 symbolEffect

依照苹果文档的说法，这个特点是将默许符号作用过渡应用于刺进或删除视图层次结构中的符号图画的内容过渡。不过我测验下来仅仅增加了一个缩放的动画作用

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

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

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

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

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

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

这里每天共享一个 iOS 的新知识，快来重视我吧

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