10个案例详解AnimatableExtend装饰器定义可动画属性

Hello，大家好，我是 V 哥。HarmonyOS开发中，使用@AnimatableExtend装饰器来定义可动画属性是个很好玩的事情，废话不多说，马上进入主题，先来看一下基本语法，接着 V 哥提供10个好玩的案例供你参考。

@AnimatableExtend装饰器的使用说明

@AnimatableExtend装饰器用于自定义可动画的属性方法，允许开发者在动画执行过程中通过逐帧回调函数修改不可动画属性值，从而使不可动画属性也能实现动画效果。

语法

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

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

AnimtableArithmetic接口说明

对于复杂数据类型做动画，需要实现AnimtableArithmetic<T>接口中的加法、减法、乘法和判断相等函数。

业务场景代码案例

案例1：实现字体大小的动画效果

// 使用@AnimatableExtend装饰器，自定义可动画属性接口
@AnimatableExtend(Text) function animatableFontSize(size: number) {
  .fontSize(size) // 调用系统属性接口
}

@Entry
@Component
struct 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
@Component
struct 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
@Component
struct 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
@Component
struct 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
@Component
struct 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
@Component
struct 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
@Component
struct 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
@Component
struct 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
@Component
struct 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
@Component
struct 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属性，使其可以动画化。点击按钮时，进度条会有一个增长的效果。

关注威哥爱编程，一起鸿蒙起来。鸿蒙你我他，生态靠大家。