Hello，大家好，我是 V 哥。HarmonyOS 开发中，使用 @AnimatableExtend 装饰器来定义可动画属性是个很好玩的事情，废话不多说，马上进入主题，先来看一下基本语法，接着 V 哥提供 10 个好玩的案例供你参考。
@AnimatableExtend 装饰器的使用说明
@AnimatableExtend 装饰器用于自定义可动画的属性方法，允许开发者在动画执行过程中通过逐帧回调函数修改不可动画属性值，从而使不可动画属性也能实现动画效果。
语法
@AnimatableExtend(UIComponentName) function functionName(value: typeName) { .propertyName(value)}
复制代码
@AnimatableExtend 仅支持定义在全局，不支持在组件内部定义。
@AnimatableExtend 定义的函数参数类型必须为number类型或者实现AnimtableArithmetic<T>接口的自定义类型。
@AnimatableExtend 定义的函数体内只能调用 @AnimatableExtend 括号内组件的属性方法。
AnimtableArithmetic<T>接口说明
对于复杂数据类型做动画，需要实现AnimtableArithmetic<T>接口中的加法、减法、乘法和判断相等函数。
业务场景代码案例
案例 1：实现字体大小的动画效果
// 使用@AnimatableExtend装饰器，自定义可动画属性接口@AnimatableExtend(Text) function animatableFontSize(size: number) { .fontSize(size) // 调用系统属性接口}
@Entry@Componentstruct AnimatablePropertyExample { @State fontSize: number = 20; build() { Column() { Text("AnimatableProperty") .animatableFontSize(this.fontSize) // 将自定义可动画属性接口设置到组件上 .animation({ duration: 1000, curve: "ease" }) // 为自定义可动画属性接口绑定动画 Button("Play") .onClick(() => { this.fontSize = this.fontSize == 20 ? 36 : 20; // 改变自定义可动画属性的参数，产生动画 }) }.width("100%") .padding(10) }}
复制代码
在这个例子中，我们定义了一个animatableFontSize函数来修改 Text 组件的 fontSize 属性，使其可以动画化。通过改变fontSize状态的值，我们可以实现字体大小的动画效果。
案例 2：实现折线的动画效果
class Point { x: number; y: number; constructor(x: number, y: number) { this.x = x; this.y = y; } // 实现AnimtableArithmetic接口的方法 plus(rhs: Point): Point { return new Point(this.x + rhs.x, this.y + rhs.y); } subtract(rhs: Point): Point { return new Point(this.x - rhs.x, this.y - rhs.y); } multiply(scale: number): Point { return new Point(this.x * scale, this.y * scale); } equals(rhs: Point): boolean { return this.x === rhs.x && this.y === rhs.y; }}
// 自定义可动画属性接口@AnimatableExtend(Polyline) function animatablePoints(points: Array<Point>) { .points(points)}
@Entry@Componentstruct PolylineAnimationExample { @State points: Array<Point> = [new Point(0, 0), new Point(100, 100)]; build() { Column() { Polyline() .animatablePoints(this.points) // 将自定义可动画属性接口设置到组件上 .animation({ duration: 1000, curve: "ease" }) // 为自定义可动画属性接口绑定动画 Button("Play") .onClick(() => { // 改变自定义可动画属性的参数，产生动画 this.points = this.points.map(point => point.multiply(1.1)); }) }.width("100%") .padding(10) }}
复制代码
在这个例子中，我们定义了一个Point类来表示折线上的点，并实现了AnimtableArithmetic接口。然后我们定义了一个animatablePoints函数来修改 Polyline 组件的 points 属性，使其可以动画化。通过改变points状态的值，我们可以实现折线的动画效果。
案例 3：实现颜色渐变动画效果
// 使用@AnimatableExtend装饰器，自定义可动画属性接口@AnimatableExtend(View) function animatableBackgroundColor(color: number) { .backgroundColor(color)}
@Entry@Componentstruct ColorAnimationExample { @State color: number = 0xff0000; // 初始颜色为红色 build() { Column() { View() .width(200) .height(200) .animatableBackgroundColor(this.color) // 将自定义可动画属性接口设置到组件上 .animation({ duration: 2000, curve: "ease" }) // 为自定义可动画属性接口绑定动画 Button("Play") .onClick(() => { this.color = this.color === 0xff0000 ? 0x00ff00 : 0xff0000; // 改变自定义可动画属性的参数，产生动画 }) }.width("100%") .padding(10) }}
复制代码
在这个例子中，我们定义了一个animatableBackgroundColor函数来修改 View 组件的 backgroundColor 属性，使其可以动画化。通过改变color状态的值，我们可以实现背景颜色的渐变动画效果。
案例 4：实现旋转动画效果
// 使用@AnimatableExtend装饰器，自定义可动画属性接口@AnimatableExtend(Image) function animatableRotate(angle: number) { .rotate(angle)}
@Entry@Componentstruct RotateAnimationExample { @State angle: number = 0; build() { Column() { Image("https://example.com/image.png") .width(100) .height(100) .animatableRotate(this.angle) // 将自定义可动画属性接口设置到组件上 .animation({ duration: 2000, curve: "linear" }) // 为自定义可动画属性接口绑定动画 Button("Play") .onClick(() => { this.angle = this.angle === 0 ? 360 : 0; // 改变自定义可动画属性的参数，产生动画 }) }.width("100%") .padding(10) }}
复制代码
在这个例子中，我们定义了一个animatableRotate函数来修改 Image 组件的 rotate 属性，使其可以动画化。通过改变angle状态的值，我们可以实现图片的旋转动画效果。
案例 5：实现透明度渐变动画效果
// 使用@AnimatableExtend装饰器，自定义可动画属性接口@AnimatableExtend(Text) function animatableOpacity(opacity: number) { .opacity(opacity)}
@Entry@Componentstruct OpacityAnimationExample { @State opacity: number = 0; // 初始透明度为0 build() { Column() { Text("Opacity Animation") .fontSize(20) .animatableOpacity(this.opacity) // 将自定义可动画属性接口设置到组件上 .animation({ duration: 2000, curve: "ease-in-out" }) // 为自定义可动画属性接口绑定动画 Button("Play") .onClick(() => { this.opacity = this.opacity === 0 ? 1 : 0; // 改变自定义可动画属性的参数，产生动画 }) }.width("100%") .padding(10) }}
复制代码
在这个例子中，我们定义了一个animatableOpacity函数来修改 Text 组件的 opacity 属性，使其可以动画化。通过改变opacity状态的值，我们可以实现文本的透明度渐变动画效果。
案例 6：实现按钮的弹性动画效果
// 使用@AnimatableExtend装饰器，自定义可动画属性接口@AnimatableExtend(Button) function animatableScale(scale: number) { .scale(scale)}
@Entry@Componentstruct ElasticButtonExample { @State scaleValue: number = 1; // 初始缩放比例为1 build() { Column() { Button("Click Me") .width(100) .height(50) .backgroundColor(0x3399ff) .textColor(0xffffff) .animatableScale(this.scaleValue) // 将自定义可动画属性接口设置到组件上 .onClick(() => { this.scaleValue = this.scaleValue === 1 ? 0.8 : 1; // 改变自定义可动画属性的参数，产生动画 }) }.width("100%") .padding(10) }}
复制代码
在这个例子中，我们定义了一个animatableScale函数来修改 Button 组件的 scale 属性，使其可以动画化。点击按钮时，按钮会有一个弹性缩放的效果。
案例 7：实现滑动进入的动画效果
// 使用@AnimatableExtend装饰器，自定义可动画属性接口@AnimatableExtend(View) function animatableTranslationX(translationX: number) { .translationX(translationX)}
@Entry@Componentstruct SlideInAnimationExample { @State translation: number = -200; // 初始横向位移为-200 build() { Column() { View() .width(200) .height(200) .backgroundColor(0x33cc33) .animatableTranslationX(this.translation) // 将自定义可动画属性接口设置到组件上 .animation({ duration: 1000, curve: "ease-out" }) // 为自定义可动画属性接口绑定动画 Button("Slide In") .onClick(() => { this.translation = 0; // 改变自定义可动画属性的参数，产生动画 }) }.width("100%") .padding(10) }}
复制代码
在这个例子中，我们定义了一个animatableTranslationX函数来修改 View 组件的 translationX 属性，使其可以动画化。点击按钮时，视图会从左侧滑动进入。
案例 8：实现视图的淡入淡出动画效果
// 使用@AnimatableExtend装饰器，自定义可动画属性接口@AnimatableExtend(View) function animatableAlpha(alpha: number) { .alpha(alpha)}
@Entry@Componentstruct FadeAnimationExample { @State alphaValue: number = 0; // 初始透明度为0 build() { Column() { View() .width(200) .height(200) .backgroundColor(0x6633ff) .animatableAlpha(this.alphaValue) // 将自定义可动画属性接口设置到组件上 .animation({ duration: 1000, curve: "ease-in-out" }) // 为自定义可动画属性接口绑定动画 Button("Fade In") .onClick(() => { this.alphaValue = this.alphaValue === 0 ? 1 : 0; // 改变自定义可动画属性的参数，产生动画 }) }.width("100%") .padding(10) }}
复制代码
在这个例子中，我们定义了一个animatableAlpha函数来修改 View 组件的 alpha 属性，使其可以动画化。点击按钮时，视图会有一个淡入淡出的效果。
案例 9：实现文本的上下移动动画效果
// 使用@AnimatableExtend装饰器，自定义可动画属性接口@AnimatableExtend(Text) function animatableTranslationY(translationY: number) { .translationY(translationY)}
@Entry@Componentstruct TextMoveAnimationExample { @State translationY: number = -100; // 初始纵向位移为-100 build() { Column() { Text("Move Me") .fontSize(20) .animatableTranslationY(this.translationY) // 将自定义可动画属性接口设置到组件上 .animation({ duration: 1000, curve: "ease-in-out" }) // 为自定义可动画属性接口绑定动画 Button("Move Up & Down") .onClick(() => { this.translationY = this.translationY === -100 ? 0 : -100; // 改变自定义可动画属性的参数，产生动画 }) }.width("100%") .padding(10) }}
复制代码
在这个例子中，我们定义了一个animatableTranslationY函数来修改 Text 组件的 translationY 属性，使其可以动画化。点击按钮时，文本会有一个上下移动的效果。
案例 10：实现进度条的增长动画效果
// 使用@AnimatableExtend装饰器，自定义可动画属性接口@AnimatableExtend(ProgressBar) function animatableProgress(progress: number) { .progress(progress)}
@Entry@Componentstruct ProgressBarAnimationExample { @State progressValue: number = 0; // 初始进度为0 build() { Column() { ProgressBar() .width(300) .animatableProgress(this.progressValue) // 将自定义可动画属性接口设置到组件上 .animation({ duration: 2000, curve: "ease-in-out" }) // 为自定义可动画属性接口绑定动画 Button("Increase") .onClick(() => { this.progressValue = this.progressValue === 0 ? 1 : 0; // 改变自定义可动画属性的参数，产生动画 }) }.width("100%") .padding(10) }}
复制代码
在这个例子中，我们定义了一个animatableProgress函数来修改 ProgressBar 组件的 progress 属性，使其可以动画化。点击按钮时，进度条会有一个增长的效果。
关注威哥爱编程，一起鸿蒙起来。鸿蒙你我他，生态靠大家。
评论