ArkUI-系统可动画属性

项目案例 (opens new window)

arkts-attribute-animation-overview.md

• 系统可动画属性如下:
• 布局属性:位置、大小、内边距、外边距、对齐方式、权重等。
• 仿射变换:平移、旋转、缩放、锚点等。
• 背景:背景颜色、背景模糊等。
• 内容:文字大小、文字颜色，图片对齐方式、模糊等。
• 前景:前景颜色等。
• Overlay:Overlay属性等。
• 外观:透明度、圆角、边框、阴影等。
• 通常,可动画属性的参数数据类型必须具备连续性，即可以通过插值方法来填补数据点之间的空隙，达到视觉上的连续效果。但属性的参数数据类型是否能够进行插值并非决定属性是否可动画的关键因素
• 对于可动画属性，系统不仅提供通用属性，还支持自定义可动画属性
• @AnimatableExtend装饰器用于自定义可动画的属性方法，在这个属性方法中修改组件不可动画的属性。在动画执行过程时，通过逐帧回调函数修改不可动画属性值，让不可动画属性也能实现动画效果

案例一

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