HarmonyOS Next开发学习手册——属性动画

概述

属性接口（以下简称属性）包含尺寸属性、布局属性、位置属性等多种类型，用于控制组件的行为。针对当前界面上的组件，其部分属性（如位置属性）的变化会引起UI的变化。添加动画可以让属性值从起点逐渐变化到终点，从而产生连续的动画效果。根据变化时是否能够添加动画，可以将属性分为可动画属性和不可动画属性。判断一种属性是否适合作为可动画属性主要有两个标准：

1. 属性变化能够引起UI的变化。例如， enabled 属性用于控制组件是否可以响应点击、触摸等事件，但enable属性的变化不会引起UI的变化，因此不适合作为可动画属性。

2. 属性在变化时适合添加动画作为过渡。例如， focusable 属性决定当前组件是否可以获得焦点，当focusable属性发生变化时，应立即切换到终点值以响应用户行为，不应该加入动画效果，因此不适合作为可动画属性。

属性接口分类说明：

• 可动画属性：

  • 系统可动画属性：

    分类	说明
    布局属性	位置、大小、内边距、外边距、对齐方式、权重等。
    仿射变换	平移、旋转、缩放、锚点等。
    背景	背景颜色、背景模糊等。
    内容	文字大小、文字颜色，图片对齐方式、模糊等。
    前景	前景颜色等。
    Overlay	Overlay属性等。
    外观	透明度、圆角、边框、阴影等。
    …	…

  • 自定义可动画属性：通过自定义属性动画机制抽象出的可动画属性。

• 不可动画属性：zIndex、focusable等。

通常，可动画属性的参数数据类型必须具备连续性，即可以通过插值方法来填补数据点之间的空隙，达到视觉上的连续效果。但属性的参数数据类型是否能够进行插值并非决定属性是否可动画的关键因素。例如，对于设置元素水平方向布局的 direction 属性，其参数数据类型是枚举值。但是，由于位置属性是可动画属性，ArkUI同样支持在其属性值改变引起组件位置变化时添加动画。

对于可动画属性，系统不仅提供通用属性，还支持自定义可动画属性。

• 系统可动画属性：组件自带的支持改变UI界面的属性接口，如位置、缩放、模糊等。

• 自定义可动画属性 ：ArkUI提供 @AnimatableExtend 装饰器用于自定义可动画属性。开发者可从自定义绘制的内容中抽象出可动画属性，用于控制每帧绘制的内容，如自定义绘制音量图标。通过自定义可动画属性，可以为ArkUI中部分原本不支持动画的属性添加动画。

属性动画接口说明

通过可动画属性改变引起UI上产生的连续视觉效果，即为属性动画。属性动画是最基础易懂的动画，ArkUI提供两种属性动画接口animateTo和animation驱动组件属性按照动画曲线等动画参数进行连续的变化，产生属性动画。

使用animateTo产生属性动画

animateTo(value: AnimateParam, event: () => void): void

animateTo 接口参数中，value指定 动画参数 （包括时长、曲线 等）event为动画的闭包函数，闭包内变量改变产生的属性动画将遵循相同的动画参数。

import curves from '@ohos.curves'

@Entry
@Component
struct AnimateToDemo {
  @State animate: boolean = false;
  // 第一步: 声明相关状态变量
  @State rotateValue: number = 0; // 组件一旋转角度
  @State translateX: number = 0; // 组件二偏移量
  @State opacityValue: num