卡片使用动效能力

2024-01-25 12:19 更新

ArkTS卡片开放了使用动画效果的能力,支持显式动画、属性动画、组件内转场能力。需要注意的是,ArkTS卡片使用动画效果时具有以下限制:

表1 动效参数限制

名称

参数说明

限制描述

duration

动画播放时长

限制最长的动效播放时长为1秒,当设置大于1秒的时间时,动效时长仍为1秒。

tempo

动画播放速度

卡片中禁止设置此参数,使用默认值1。

delay

动画延迟执行的时长

卡片中禁止设置此参数,使用默认值0。

iterations

动画播放次数

卡片中禁止设置此参数,使用默认值1。

以下示例代码实现了按钮旋转的动画效果:

  1. @Entry
  2. @Component
  3. struct AttrAnimationExample {
  4. @State rotateAngle: number = 0;
  5. build() {
  6. Column() {
  7. Button('change rotate angle')
  8. .onClick(() => {
  9. this.rotateAngle = 90;
  10. })
  11. .margin(50)
  12. .rotate({ angle: this.rotateAngle })
  13. .animation({
  14. curve: Curve.EaseOut,
  15. playMode: PlayMode.AlternateReverse
  16. })
  17. }.width('100%').margin({ top: 20 })
  18. }
  19. }
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号