HarmonyOS开发者社区

鸿蒙中大部分组件属性支持动画（如width、height、opacity等），但某些属性（如backgroundColor、borderRadius）默认不支持平滑过渡。@AnimatableExtend装饰器正是为了解决这个问题而生——它允许开发者为组件自定义可动画属性方法。其核心原理是：在动画执行过程中，系统会逐帧调用被@AnimatableExtend装饰的方法，每帧传入当前动画进度对应的属性值，开发者在此方法中实时修改组件属性，从而实现“伪动画”效果。使用方式：第一，使用@AnimatableExtend(ComponentType)装饰一个自定义方法；第二，在方法体内根据传入的参数设置组件的对应属性；第三，在animateTo动画块中调用这个自定义方法，传入目标值。@AnimatableExtend还支持使用@State变量作为动画中间状态，实现更复杂的插值效果。需要注意的是，@AnimatableExtend方法内不能包含复杂逻辑，否则会影响动画性能。

@AnimatableExtend(Text)
function animatableTextColor(color: Color) {
.fontColor(color)
}

@Entry
@Component
struct AnimatableDemo {
@State textColor: Color = Color.Red;
@State animateValue: number = 0;

build() {
Column({ space: 20 }) {
Text('Hello ArkUI')
.fontSize(24)
.animatableTextColor(this.textColor) // 使用自定义可动画属性

Button('开始动画')
.onClick(() => {
animateTo({ duration: 2000, curve: Curve.EaseInOut }, () => {
this.textColor = Color.Blue;
});
})
}.padding(20)
}
}

// 更复杂的示例：为Image的clip属性添加动画
@AnimatableExtend(Image)
function animatableClip(progress: number) {
// progress从0到1，实现圆形裁剪的半径动画
.clipShape(new CircleShape({ width: progress * 200, height: progress * 200 }))
}