属性动画

2024-01-22 18:17 更新

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

说明

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

animation(value: {duration?: number, tempo?: number, curve?: string | Curve | ICurve, delay?:number, iterations: number, playMode?: PlayMode, onFinish?: () => void})

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数:

名称

参数类型

必填

描述

duration

number

设置动画时长。

默认值:1000

单位:毫秒

从API version 9开始,该接口支持在ArkTS卡片中使用。

说明:

- 在ArkTS卡片上最大动画持续时间为1000毫秒。

- 设置浮点型类型的值时,向下取整;设置值为1.2,按照1处理。

tempo

number

动画播放速度。数值越大,动画播放速度越快,数值越小,播放速度越慢。值为0时,表示不存在动画。

默认值:1

curve

string | Curve | ICurve9+

设置动画曲线。

默认值:Curve.EaseInOut

从API version 9开始,该接口支持在ArkTS卡片中使用。

delay

number

设置动画延迟执行的时长。

默认值:0,不延迟播放。

单位:毫秒

取值范围:[0, +∞)

说明:

设置浮点型类型的值时,向下取整。例如,设置值为1.2,按照1处理。

iterations

number

设置播放次数。

默认值:1

取值范围:[-1, +∞)

说明:

设置为-1时表示无限次播放。设置为0时表示无动画效果。

playMode

PlayMode

设置动画播放模式,默认播放完成后重头开始播放。

默认值:PlayMode.Normal

从API version 9开始,该接口支持在ArkTS卡片中使用。

onFinish

() => void

状态回调,动画播放完成时触发。

从API version 9开始,该接口支持在ArkTS卡片中使用。

说明:

当iterations设置为-1时,动画效果无限循环不会停止,所以不会触发此回调。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct AttrAnimationExample {
  5. @State widthSize: number = 250
  6. @State heightSize: number = 100
  7. @State rotateAngle: number = 0
  8. @State flag: boolean = true
  9. build() {
  10. Column() {
  11. Button('change size')
  12. .onClick(() => {
  13. if (this.flag) {
  14. this.widthSize = 150
  15. this.heightSize = 60
  16. } else {
  17. this.widthSize = 250
  18. this.heightSize = 100
  19. }
  20. this.flag = !this.flag
  21. })
  22. .margin(30)
  23. .width(this.widthSize)
  24. .height(this.heightSize)
  25. .animation({
  26. duration: 2000,
  27. curve: Curve.EaseOut,
  28. iterations: 3,
  29. playMode: PlayMode.Normal
  30. })
  31. Button('change rotate angle')
  32. .onClick(() => {
  33. this.rotateAngle = 90
  34. })
  35. .margin(50)
  36. .rotate({ angle: this.rotateAngle })
  37. .animation({
  38. duration: 1200,
  39. curve: Curve.Friction,
  40. delay: 500,
  41. iterations: -1, // 设置-1表示动画无限循环
  42. playMode: PlayMode.Alternate
  43. })
  44. }.width('100%').margin({ top: 20 })
  45. }
  46. }

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号