一、介绍
在我们前端开发中，通过修改组件的样式或尺寸属性、布局属性、位置属性等实现简单动画，用于根据用户行为给予合适的效果反馈，提升用户体验。
二、属性动画
以下是HarmonyOS可以做动画的属性展示（官方解释：通过可动画属性改变引起UI上产生的连续视觉效果，即为属性动画），参考链接：developer.huawei.com/consumer/cn… 属性接口分类说明：
-
可动画属性：
-
系统可动画属性：
分类 说明 布局属性 位置、大小、内边距、外边距、对齐方式、权重等。 仿射变换 平移、旋转、缩放、锚点等。 背景 背景颜色、背景模糊等。 内容 文字大小、文字颜色，图片对齐方式、模糊等。 前景 前景颜色等。 Overlay Overlay属性等。 外观 透明度、圆角、边框、阴影等。 ... ... -
自定义可动画属性：通过自定义属性动画机制抽象出的可动画属性。
-
-
不可动画属性：zIndex、focusable等。
三、动画接口
属性动画是最基础易懂的动画，ArkUI提供三种动画接口animateTo、animation和keyframeAnimateTo驱动组件属性按照动画曲线等动画参数进行连续的变化，产生属性动画。
| 动画接口 | 作用域 | 原理 | 使用场景 |
|---|---|---|---|
| animateTo | 闭包内改变属性引起的界面变化。作用于出现消失转场。 | 通用函数，对闭包前界面和闭包中的状态变量引起的界面之间的差异做动画。支持多次调用，支持嵌套。 | 适用对多个可动画属性配置相同动画参数的动画。需要嵌套使用动画的场景。 |
| animation | 组件通过属性接口绑定的属性变化引起的界面变化。 | 识别组件的可动画属性变化，自动添加动画。组件的接口调用是从下往上执行，animation只会作用于在其之上的属性调用。组件可以根据调用顺序对多个属性设置不同的animation。 | 适用于对多个可动画属性配置不同参数动画的场景。 |
| keyframeAnimateTo | 多个闭包内改变属性引起的分段属性动画。 | 通用函数，每一段闭包中的状态变量与前一次的差异做动画。支持多次调用，不推荐嵌套。 | 适用于同一属性需要做连续多个动画的场景。 |
四、代码实践
操作以 opacity 和 backgroundColor为例，使用DevEco-Studio（版本：DevEco Studio 5.0.2 Release）编码，HarmonyOS 5.0或以上：
@Entry
@Component
struct Index {
@State message: string = 'Hello World ';
@State opacityValue: number = 1; // 初始透明度
@State backgroundValue: Color = Color.Blue; // 初始背景色
build() {
RelativeContainer() {
Text(this.message)
.id('HelloWorld')
.fontSize($r('app.float.page_text_font_size'))
.fontWeight(FontWeight.Bold)
.backgroundColor(this.backgroundValue)
.opacity(this.opacityValue) // 绑定动态透明度
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
.onClick(() => {
// this.message = 'Welcome';
animateTo({
duration: 250,
curve: 'easeInOut' // 添加平滑曲线
}, () => {
this.opacityValue = 0.5; // 修改状态变量驱动动画
this.backgroundValue = Color.Brown;
});
})
}
.height('100%')
.width('100%')
}
}
效果如下： 使用animateTo，动画duration为250ms： 静默状态下：
点击后：
