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

头像
威哥爱编程
     北京
    阅读 8 分钟

    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>接口中的加法、减法、乘法和判断相等函数。

    名称入参类型返回值类型说明
    plusAnimtableArithmetic<T>AnimtableArithmetic<T>加法函数
    subtractAnimtableArithmetic<T>AnimtableArithmetic<T>减法函数
    multiplynumberAnimtableArithmetic<T>乘法函数
    equalsAnimtableArithmetic<T>boolean相等判断函数

    业务场景代码案例

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

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

    HarmonyOSharmonyosharmonyos-nextharmonyos先行者华为
    威哥爱编程
    183 声望16 粉丝

    华为开发者专家（HDE）、TiDB开发者官方认证讲师、Java畅销书作者、HarmonyOS应用开发高级讲师

    « 上一篇
    优雅的@ObservedV2和@Trace装饰器
    下一篇 »
    鸿蒙 NEXT 开发之后台任务开发服务框架学习笔记

    引用和评论

    推荐阅读
    头像
    鸿蒙 NEXT 开发之后台任务开发服务框架学习笔记

    威哥爱编程阅读 40

    头像
    HarmonyOS NEXT 技术问答冲榜，等你来战！

    SegmentFault思否赞 15阅读 43.1k评论 6

    头像
    “一起学 HarmonyOS”第二弹来啦！

    SegmentFault思否赞 5阅读 30.6k评论 5

    头像
    HarmonyOS Next 应用实战案例—“马背上的家乡”元服务

    申公豹赞 8阅读 2k评论 3

    头像
    API接口设计的未来趋势：探索技术方向与实践方案

    Swift社区赞 3阅读 1k

    头像
    HarmonyOS 如何获取设备信息（系统、版本、网络连接状态）

    Swift社区赞 3阅读 1k

    头像
    构建安全护盾：HarmonyOS 应用的数据安全审计与日志管理实战

    Swift社区赞 3阅读 846

    0 条评论
    得票最新