首页 > 其他分享 >【中秋国庆不断更】OpenHarmony定义可动画属性:@AnimatableExtend装饰器

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

时间:2023-09-30 21:33:07浏览次数:37  
标签:OpenHarmony Point rhs 动画 AnimatableExtend PointVector new 属性

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

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

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

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

说明:

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

装饰器使用说明

语法

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

​ ● @AnimatableExtend仅支持定义在全局,不支持在组件内部定义。

​ ● @AnimatableExtend定义的函数参数类型必须为number类型或者实现 AnimtableArithmetic接口的自定义类型。

​ ● @AnimatableExtend定义的函数体内只能调用@AnimatableExtend括号内组件的属性方法。

AnimtableArithmetic接口说明

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

名称 入参类型 返回值类型 说明
plus AnimtableArithmetic AnimtableArithmetic 加法函数
subtract AnimtableArithmetic AnimtableArithmetic 减法函数
multiply number AnimtableArithmetic 乘法函数
equals AnimtableArithmetic boolean 相等判断函数

使用场景

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

@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)
  }
}

file

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

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: "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)
  }
}

file

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

标签:OpenHarmony,Point,rhs,动画,AnimatableExtend,PointVector,new,属性
From: https://www.cnblogs.com/openharmony/p/17738262.html

相关文章

  • 【中秋国庆不断更】OpenHarmony定义扩展组件样式:@Extend装饰器
    【中秋国庆不断更】OpenHarmony定义扩展组件样式:@Extend装饰器在前文的示例中,可以使用@Styles用于样式的扩展,在@Styles的基础上,我们提供了@Extend,用于扩展原生组件样式。说明:从APIversion9开始,该装饰器支持在ArkTS卡片中使用。装饰器使用说明语法@Extend(UIComponentName)......
  • OpenHarmony定义组件重用样式:@Styles装饰器
    OpenHarmony定义组件重用样式:@Styles装饰器如果每个组件的样式都需要单独设置,在开发过程中会出现大量代码在进行重复样式设置,虽然可以复制粘贴,但为了代码简洁性和后续方便维护,我们推出了可以提炼公共样式进行复用的装饰器@Styles。@Styles装饰器可以将多条样式设置提炼成一个方法......
  • React Native 动画(Animated)
    实现效果代码从react-native中引入import{Animated,Easing,}from'react-native';js实现constopacity1=useRef(newAnimated.Value(0.2)).current;constopacity2=useRef(newAnimated.Value(0.2)).current;constscale1=useRef(newAnimated.Valu......
  • OpenHarmony AI框架开发指导
    OpenHarmonyAI框架开发指导一、概述1、功能简介AI业务子系统是OpenHarmony提供原生的分布式AI能力的子系统。AI业务子系统提供了统一的AI引擎框架,实现算法能力快速插件化集成。AI引擎框架主要包含插件管理、模块管理和通信管理模块,完成对AI算法能力的生命周期管理和按需......
  • OpenHarmony定义组件重用样式:@Styles装饰器
     如果每个组件的样式都需要单独设置,在开发过程中会出现大量代码在进行重复样式设置,虽然可以复制粘贴,但为了代码简洁性和后续方便维护,我们推出了可以提炼公共样式进行复用的装饰器@Styles。@Styles装饰器可以将多条样式设置提炼成一个方法,直接在组件声明的位置调用。通过@Styl......
  • OpenHarmony创新赛|最全赛事奖项信息来啦!
    OpenHarmony创新赛最全赛事奖项信息来啦!不仅有人气作品奖、优秀行业奖、优秀学生奖、创新激励奖参赛即有机会获得多项荣誉激励!快来报名吧!作品提交地址https://atomgit.com/参赛队伍在AtomGit上建仓提交作品资料提交作品时将仓库地址同步给工作人员即可参赛作品需包含说明......
  • OpenHarmony装饰指定自定义组件:@BuilderParam装饰器
     当开发者创建了自定义组件,并想对该组件添加特定功能时,例如在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法,将会导致所有引入该自定义组件的地方均增加了该功能。为解决此问题,ArkUI引入了@BuilderParam装饰器,@BuilderParam用来装饰指向@Builder方法的变量,开......
  • Android动画-1——Android三种动画详解
    一、前言1.Android的三种动画,即:ViewAnimation(视图动画)DrawableAnimation(帧动画)PropertyAnimation(属性动画) 二、ViewAnimation(视图动画)1.View动画的概述及种类视图动画的作用对象是View,支持四种动画效果,分别是平移、缩放、旋转、透明度。譬如,我们可以对TextView设......
  • (十二)Unity性能优化-动画优化
    原链接:https://github.com/lwwhb/Unity2022_SUNTAIL_Stylized_Fantasy_Village_OptimizationAnimation的一些细节播放单个AnimationClip速度,LegacyAnimation系统更快,因为老系统是直接采样曲线并直接写入对象Transform针对动画的缩放曲线比位移、旋转曲线开销更大常数曲线不会每......
  • OpenHarmony自定义构建函数:@Builder装饰器
     前面章节介绍了如何创建一个自定义组件。该自定义组件内部UI结构固定,仅与使用方进行数据传递。ArkUI还提供了一种更轻量的UI元素复用机制@Builder,@Builder所装饰的函数遵循build()函数语法规则,开发者可以将重复使用的UI元素抽象成一个方法,在build方法里调用。为了简化语言,我......