ArkTS-属性动画和显式动画

在这里插入图片描述

属性动画

组件的某些通用属性变化时,可以通过属性动画实现渐变过渡效果,提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。

名称参数类型必填描述
durationnumber设置动画时长。默认值:1000单位:毫秒从API version 9开始,该接口支持在ArkTS卡片中使用。说明:- 在ArkTS卡片上最大动画持续时间为1000毫秒。- 设置浮点型类型的值时,向下取整;设置值为1.2,按照1处理。
temponumber动画播放速度。数值越大,动画播放速度越快,数值越小,播放速度越慢。值为0时,表示不存在动画。默认值:1
curvestring /Curve / ICurve9+设置动画曲线。默认值:Curve.EaseInOut从API version 9开始,该接口支持在ArkTS卡片中使用。
delaynumber设置动画延迟执行的时长。默认值:0,不延迟播放。单位:毫秒取值范围:[0, +∞)说明:设置浮点型类型的值时,向下取整。例如,设置值为1.2,按照1处理。
iterationsnumber设置播放次数。默认值:1,取值范围:[-1, +∞) 说明:设置为-1时表示无限次播放。设置为0时表示无动画效果。
playModePlayMode设置动画播放模式,默认播放完成后重头开始播放。默认值:PlayMode.Normal 从API version 9开始,该接口支持在ArkTS卡片中使用。
onFinish() => void状态回调,动画播放完成时触发。从API version 9开始,该接口支持在ArkTS卡片中使用。说明:当iterations设置为-1时,动画效果无限循环不会停止,所以不会触发此回调。

显式动画

提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。

上代码

属性动画按钮 动画播放3次,(缩小算一次,放大也算一次,所以最终样式奇数次点击和偶数次点击不一样)
显式动画按钮,动画播放无限次

@Entry
@Component
struct AttrAnimationExample {
  @State widthSize: number = 200
  @State heightSize: number = 100
  @State flag: boolean = true
  @State widthSize2: number = 200
  @State heightSize2: number = 100
  @State flag2: boolean = true

  build() {
    Column() {
      Button('属性动画')
        .onClick(() => {
          if (this.flag) {
            this.widthSize = 150
            this.heightSize = 60
          } else {
            this.widthSize = 200
            this.heightSize = 100
          }
          this.flag = !this.flag
        })
        .margin(30)
        .width(this.widthSize)
        .height(this.heightSize)
        .animation({
          duration: 2000,
          curve: Curve.EaseOut,
          iterations: 3,
          playMode: PlayMode.Normal
        })

      Button('显式动画')
        .onClick(() => {
          if (this.flag2) {
            animateTo({
              duration: 2000,
              curve: Curve.EaseOut,
              iterations: -1,
              playMode: PlayMode.Normal,
              onFinish: () => {
                console.info('play end')
              }
            }, () => {
              this.widthSize2 = 150
              this.heightSize2 = 60
            })
          } else {
            animateTo({}, () => {
              this.widthSize2 = 250
              this.heightSize2 = 100
            })
          }
          this.flag2 = !this.flag2
        })
        .margin(30)
        .width(this.widthSize2)
        .height(this.heightSize2)
    }
    .width('100%')
  }
}
  • 8
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
object literals cannot be used as type declarations (arkts-no-obj-literals-a) 是指在 TypeScript 中,不能将对象字面量用作类型声明。 在 TypeScript 中,我们可以使用类型声明来定义变量、参数和函数的类型。类型声明允许我们指定变量的类型,以便在编译时进行类型检查,并提供更好的代码提示和静态分析。 然而,当我们尝试使用对象字面量作为类型声明时,TypeScript 会出现错误消息 "object literals cannot be used as type declarations (arkts-no-obj-literals-a)"。这是因为对象字面量通常用于创建对象而不是定义类型。 例如,下面的代码尝试使用对象字面量作为类型声明: ```typescript const user: { name: string, age: number } = { name: "Alice", age: 25 }; ``` 上述代码会导致错误,因为对象字面量不能被用作类型声明。为了解决这个问题,我们可以使用 interface 或 type 关键字来定义类型: ```typescript interface User { name: string, age: number } const user: User = { name: "Alice", age: 25 }; ``` 在上述代码中,我们使用 interface 关键字定义了一个名为 User 的接口,它包含了 name 和 age 两个属性。接着,我们使用 User 接口作为类型声明,来定义 user 变量的类型。 总结来说,"object literals cannot be used as type declarations (arkts-no-obj-literals-a)" 是 TypeScript 中的错误消息,意味着不能直接使用对象字面量作为类型声明,而应该使用接口或类型声明来定义对象的类型。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值