显式动画

2024-01-22 18:17 更新

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

说明

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

animateTo(value: AnimateParam, event: () => void): void

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

参数

类型

是否必填

描述

value

AnimateParam

设置动画效果相关参数。

event

() => void

指定显示动效的闭包函数,在闭包函数中导致的状态变化系统会自动插入过渡动画。

AnimateParam对象说明

名称

类型

描述

duration

number

动画持续时间,单位为毫秒。

默认值:1000

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

说明:

- 在ArkTS卡片上最大动画持续时间为1000毫秒,若超出则固定为1000毫秒。

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

tempo

number

动画的播放速度,值越大动画播放越快,值越小播放越慢,为0时无动画效果。

默认值:1.0

curve

Curve | ICurve | string

动画曲线。

默认值:Curve.EaseInOut

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

delay

number

单位为ms(毫秒),默认不延时播放。

默认值:0

说明:

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

iterations

number

默认播放一次,设置为-1时表示无限次播放。

默认值:1

playMode

PlayMode

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

默认值:PlayMode.Normal

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

相关使用约束请参考PlayMode说明。

onFinish

() => void

动效播放完成回调。

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

说明
  • PlayMode推荐使用PlayMode.Normal和PlayMode.Alternate,此场景下动画的第一轮是正向播放的。如使用PlayMode.Reverse和PlayMode.AlternateReverse,则动画的第一轮是逆向播放的,在动画刚开始时会跳变到终止状态,然后逆向播放动画。
  • 使用PlayMode.Alternate或PlayMode.AlternateReverse时,开发者应保证动画最终状态和状态变量的取值一致,即应保证动画的最后一轮是正向播放的。使用PlayMode.Alternate时,iterations应为奇数。使用PlayMode.AlternateReverse时,iterations应为偶数。
  • 不推荐使用PlayMode.Reverse,此场景下不仅会导致动画刚开始就跳变到终止状态,也会导致动画最终状态和状态变量的取值不同。

示例

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

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

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号