首页 > 其他分享 >鸿蒙next开发学习:@AnimatableExtend装饰器-自定义可动画属性

鸿蒙next开发学习:@AnimatableExtend装饰器-自定义可动画属性

时间:2024-07-26 16:57:24浏览次数:18  
标签:自定义 鸿蒙 Point rhs next AnimatableExtend PointVector new 属性

@AnimatableExtend装饰器用于自定义可动画的属性方法,在这个属性方法中修改组件不可动画的属性。在动画执行过程时,通过逐帧回调函数修改不可动画属性值,让不可动画属性也能实现动画效果。也可通过逐帧回调函数每帧修改可动画属性的值,实现逐帧布局的效果。

  • 可动画属性:如果一个属性方法在animation属性前调用,改变这个属性的值可以生效animation属性的动画效果,这个属性称为可动画属性。比如height、width、backgroundColor、translate属性,Text组件的fontSize属性等。

  • 不可动画属性:如果一个属性方法在animation属性前调用,改变这个属性的值不能生效animation属性的动画效果,这个属性称为不可动画属性。比如Polyline组件的points属性等。

该装饰器从API Version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

从API version 11开始,该装饰器支持在元服务中使用。

装饰器使用说明

语法

@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相等判断函数

使用场景

以下示例通过改变Text组件宽度实现逐帧布局的效果。

@AnimatableExtend(Text)
function animatableWidth(width: number) {
  .width(width)
}

@Entry
@Component
struct AnimatablePropertyExample {
  @State textWidth: number = 80;

  build() {
    Column() {
      Text("AnimatableProperty")
        .animatableWidth(this.textWidth)
        .animation({ duration: 2000, curve: Curve.Ease })
      Button("Play")
        .onClick(() => {
          this.textWidth = this.textWidth == 80 ? 160 : 80;
        })
    }.width("100%")
    .padding(10)
  }
}

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

class Point {
  x: number
  y: number

  constructor(x: number, y: number) {
    this.x = x
    this.y = y
  }
  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
  }
}

class PointVector extends Array<Point> implements AnimatableArithmetic<PointVector> {
  constructor(value: Array<Point>) {
    super();
    value.forEach(p => this.push(p))
  }
  plus(rhs: PointVector): PointVector {
    let result = new PointVector([])
    const len = Math.min(this.length, rhs.length)
    for (let i = 0; i < len; i++) {
      result.push((this as Array<Point>)[i].plus((rhs as Array<Point>)[i]))
    }
    return result
  }
  subtract(rhs: PointVector): PointVector {
    let result = new PointVector([])
    const len = Math.min(this.length, rhs.length)
    for (let i = 0; i < len; i++) {
      result.push((this as Array<Point>)[i].subtract((rhs as Array<Point>)[i]))
    }
    return result
  }
  multiply(scale: number): PointVector {
    let result = new PointVector([])
    for (let i = 0; i < this.length; i++) {
      result.push((this as Array<Point>)[i].multiply(scale))
    }
    return result
  }
  equals(rhs: PointVector): boolean {
    if (this.length != rhs.length) {
      return false
    }
    for (let i = 0; i < this.length; i++) {
      if (!(this as Array<Point>)[i].equals((rhs as Array<Point>)[i])) {
        return false
      }
    }
    return true
  }
  get(): Array<Object[]> {
    let result: Array<Object[]> = []
    this.forEach(p => result.push([p.x, p.y]))
    return result
  }
}

@AnimatableExtend(Polyline) function animatablePoints(points: PointVector) {
  .points(points.get())
}

@Entry
@Component
struct AnimatablePropertyExample {
  @State points: PointVector = new PointVector([
    new Point(50, Math.random() * 200),
    new Point(100, Math.random() * 200),
    new Point(150, Math.random() * 200),
    new Point(200, Math.random() * 200),
    new Point(250, Math.random() * 200),
  ])
  build() {
    Column() {
      Polyline()
        .animatablePoints(this.points)
        .animation({duration: 1000, curve: Curve.Ease})
        .size({height:220, width:300})
        .fill(Color.Green)
        .stroke(Color.Red)
        .backgroundColor('#eeaacc')
      Button("Play")
        .onClick(() => {
          this.points = new PointVector([
            new Point(50, Math.random() * 200),
            new Point(100, Math.random() * 200),
            new Point(150, Math.random() * 200),
            new Point(200, Math.random() * 200),
            new Point(250, Math.random() * 200),
          ])
        })
    }.width("100%")
    .padding(10)
  }
}

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)资料用来跟着学习是非常有必要的。 

点击领取→【纯血版鸿蒙全套最新学习资料】(安全链接,放心点击希望这一份鸿蒙学习资料能够给大家带来帮助,有需要的小伙伴自行领取~限时开源!!


 鸿蒙(HarmonyOS NEXT)最新学习路线

有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )开发入门教学视频,内容包含:ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

这份鸿蒙(HarmonyOS NEXT)资料包含了鸿蒙开发必掌握的核心知识要点,内容包含了(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、(南向驱动、嵌入式等)鸿蒙项目实战等等)鸿蒙(HarmonyOS NEXT)技术知识点。


HarmonyOS Next 最新全套视频教程

 《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

大厂面试必问面试题

鸿蒙南向开发技术

鸿蒙APP开发必备


请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,才能在这个变革的时代中立于不败之地。 

                   

标签:自定义,鸿蒙,Point,rhs,next,AnimatableExtend,PointVector,new,属性
From: https://blog.csdn.net/DMZDAMS/article/details/140713668

相关文章

  • 动态数据增强的艺术:Mojo模型的自定义应用
    动态数据增强的艺术:Mojo模型的自定义应用在机器学习和深度学习领域,数据增强是提升模型泛化能力的重要手段。Mojo模型,作为深度学习模型的一种封装形式,通常指的是通过训练得到的模型参数的集合,它能够被用于快速推理。但是,Mojo模型本身是否支持在推理阶段进行自定义的数据增强......
  • 打造个性化文件操作:Perl中的自定义文件句柄全攻略
    打造个性化文件操作:Perl中的自定义文件句柄全攻略在Perl编程中,文件句柄是处理文件的基本工具。Perl提供了丰富的内置函数来实现文件的打开、读取、写入和关闭等操作。然而,在某些情况下,我们可能需要对文件操作进行更细粒度的控制,或者实现一些特定的功能,比如文件缓冲区的管理......
  • 280:vue+openlayers 自定义上下左右移动键
    作者:还是大剑师兰特,曾为美国某知名大学计算机专业研究生,现为国内GIS领域高级前端工程师,CSDN知名博主,深耕openlayers、leaflet、mapbox、cesium,canvas,echarts等技术开发,欢迎加微信(gis-dajianshi),一起交流。查看本专栏目录-本文是第280个示例文章目录一......
  • 【开源所有代码-全在线智能音箱】树莓派智能音箱,自定义唤醒词,大模型LLM GPT对话
    安装sounddevicepipinstallsounddevice安装portAudiosudoapt-getinstalllibportaudio2sudoapt-getinstalllibasound-devsudoapt-getinstallportaudio.devsudoapt-getinstallpython3-pyaudiopipinstallpyaudio安装wavepipinstallwave......
  • 自定义Linux操作日志配置
    方案一:使用acct工具记录步骤1   通过设置日志文件可以对每个用户的每一条命令进行纪录,这一功能默认是不开放的,为了打开它,我们要确认已经安装了acct工具:#Debian、Ubuntu、SUSE下叫acctapt-getinstallacctzypperinstallacct#CentOS、RHEL、Fedora上叫psacctyu......
  • forms.ModelMultipleChoiceField 与 widget=FilteredSelectMultiple 不适用于自定义新
    我试图在自定义的新管理表单页面上显示forms.ModelMultipleChoiceField但它似乎没有像在已经制作的Django页面上显示的方式显示,例如模型产品Django管理页面。我的forms.ModelMultipleChoiceField看起来像这样:显示我的forms.ModelMultipleChoiceField是什么样子......
  • 如何在 Folium colorbar 中自定义标题文本?我想增加颜色图标题文本的字体大小
    我正在尝试在Folium中使用颜色条作为输出变量圆形图colormap=cm.LinearColormap(colors=['green','red'],index=[min(df['output']),max(df['output'])],vmin=min(df['output']),vmax=max(df['output']),caption='out......
  • KingbaseES 自定义操作符使用示例
    本文详细介绍了KingbaseES中在兼容适配过程中,当遇到不支持的操作符,如何通过自定义方式解决兼容适配问题。Kingbase自定义操作符语法和用例如下:用例数据:createtabledemo(idnumeric(10,5));insertintodemovalues(1.1);insertintodemovalues(0);insertintodemoval......
  • 如何将相对路径设置为解释器路径 xlwings 自定义加载项
    我使用xlwings制作了自定义加载项。我有一本字典,其中:phodnota.py、phodnota.xlam和Python311(带有python解释器和所有需要的库的字典)。问题是,当我尝试添加到解释器路径相对路径Python311\python.exe时,它​​不起作用。我不断收到错误。我找不到......
  • 前端Vue自定义支付密码输入框键盘与设置弹框组件的设计与实现
    摘要随着信息技术的不断发展,前端开发的复杂性日益加剧。传统的开发方式,即将整个系统构建为一个庞大的整体应用,往往会导致开发效率低下和维护成本高昂。任何微小的改动或新功能的增加都可能引发对整个应用逻辑的广泛影响,这种“牵一发而动全身”的现象在开发过程中屡见不鲜。为......