【中秋国庆不断更】OpenHarmony定义可动画属性：@AnimatableExtend装饰器 ...

【中秋国庆不断更】OpenHarmony定义可动画属性：@AnimatableExtend装饰器

@AnimatableExtend装饰器用于自定义可动画的属性方法，在这个属性方法中修改组件不可动画的属性。在动画执行过程时，通过逐帧回调函数修改不可动画属性值，让不可动画属性也能实现动画效果。
​                ● 可动画属性：如果一个属性方法在animation属性前调用，改变这个属性的值可以生效animation属性的动画效果，这个属性称为可动画属性。比如height、width、backgroundColor、translate等。
​                ● 不可动画属性：如果一个属性方法在animation属性前调用，改变这个属性的值不能生效animation属性的动画效果，这个属性称为不可动画属性。比如Text组件的fontSize属性、Ployline组件的points属性等。
说明：
该装饰器从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
装饰器使用说明

语法

1. @AnimatableExtend(UIComponentName) function functionName(value: typeName) {
2.   .propertyName(value)
3. }

复制代码

​                ● @AnimatableExtend仅支持定义在全局，不支持在组件内部定义。
​                ● @AnimatableExtend定义的函数参数类型必须为number类型或者实现 AnimtableArithmetic接口的自定义类型。
​                ● @AnimatableExtend定义的函数体内只能调用@AnimatableExtend括号内组件的属性方法。
AnimtableArithmetic接口说明

对复杂数据类型做动画，需要实现AnimtableArithmetic接口中加法、减法、乘法和判断相等函数。
名称入参类型返回值类型说明plusAnimtableArithmeticAnimtableArithmetic加法函数subtractAnimtableArithmeticAnimtableArithmetic减法函数multiplynumberAnimtableArithmetic乘法函数equalsAnimtableArithmeticboolean相等判断函数使用场景

以下示例实现字体大小的动画效果。

1. @AnimatableExtend(Text) function animatableFontSize(size: number) {
2.   .fontSize(size)
3. }
5. @Entry
6. @Component
7. struct AnimatablePropertyExample {
8.   @State fontSize: number = 20
9.   build() {
10.     Column() {
11.       Text("AnimatableProperty")
12.         .animatableFontSize(this.fontSize)
13.         .animation({duration: 1000, curve: "ease"})
14.       Button("Play")
15.         .onClick(() => {
16.           this.fontSize = this.fontSize == 20 ? 36 : 20
17.         })
18.     }.width("100%")
19.     .padding(10)
20.   }
21. }

复制代码

以下示例实现折线的动画效果。

1. class Point {
2.   x: number
3.   y: number
5.   constructor(x: number, y: number) {
6.     this.x = x
7.     this.y = y
8.   }
9.   plus(rhs: Point): Point {
10.     return new Point(this.x + rhs.x, this.y + rhs.y)
11.   }
12.   subtract(rhs: Point): Point {
13.     return new Point(this.x - rhs.x, this.y - rhs.y)
14.   }
15.   multiply(scale: number): Point {
16.     return new Point(this.x * scale, this.y * scale)
17.   }
18.   equals(rhs: Point): boolean {
19.     return this.x === rhs.x && this.y === rhs.y
20.   }
21. }
23. class PointVector extends Array<Point> implements AnimatableArithmetic<PointVector> {
24.   constructor(value: Array<Point>) {
25.     super();
26.     value.forEach(p => this.push(p))
27.   }
28.   plus(rhs: PointVector): PointVector {
29.     let result = new PointVector([])
30.     const len = Math.min(this.length, rhs.length)
31.     for (let i = 0; i < len; i++) {
32.       result.push((this as Array<Point>)[i].plus((rhs as Array<Point>)[i]))
33.     }
34.     return result
35.   }
36.   subtract(rhs: PointVector): PointVector {
37.     let result = new PointVector([])
38.     const len = Math.min(this.length, rhs.length)
39.     for (let i = 0; i < len; i++) {
40.       result.push((this as Array<Point>)[i].subtract((rhs as Array<Point>)[i]))
41.     }
42.     return result
43.   }
44.   multiply(scale: number): PointVector {
45.     let result = new PointVector([])
46.     for (let i = 0; i < this.length; i++) {
47.       result.push((this as Array<Point>)[i].multiply(scale))
48.     }
49.     return result
50.   }
51.   equals(rhs: PointVector): boolean {
52.     if (this.length != rhs.length) {
53.       return false
54.     }
55.     for (let i = 0; i < this.length; i++) {
56.       if (!(this as Array<Point>)[i].equals((rhs as Array<Point>)[i])) {
57.         return false
58.       }
59.     }
60.     return true
61.   }
62.   get(): Array<Object[]> {
63.     let result: Array<Object[]> = []
64.     this.forEach(p => result.push([p.x, p.y]))
65.     return result
66.   }
67. }
69. @AnimatableExtend(Polyline) function animatablePoints(points: PointVector) {
70.   .points(points.get())
71. }
73. @Entry
74. @Component
75. struct AnimatablePropertyExample {
76.   @State points: PointVector = new PointVector([
77.     new Point(50, Math.random() * 200),
78.     new Point(100, Math.random() * 200),
79.     new Point(150, Math.random() * 200),
80.     new Point(200, Math.random() * 200),
81.     new Point(250, Math.random() * 200),
82.   ])
83.   build() {
84.     Column() {
85.       Polyline()
86.         .animatablePoints(this.points)
87.         .animation({duration: 1000, curve: "ease"})
88.         .size({height:220, width:300})
89.         .fill(Color.Green)
90.         .stroke(Color.Red)
91.         .backgroundColor('#eeaacc')
92.       Button("Play")
93.         .onClick(() => {
94.           this.points = new PointVector([
95.             new Point(50, Math.random() * 200),
96.             new Point(100, Math.random() * 200),
97.             new Point(150, Math.random() * 200),
98.             new Point(200, Math.random() * 200),
99.             new Point(250, Math.random() * 200),
100.           ])
101.         })
102.     }.width("100%")
103.     .padding(10)
104.   }
105. }

复制代码

本文由博客一文多发平台 OpenWrite 发布！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！