卡片使用動效能力

2024-01-25 12:19 更新

ArkTS卡片開放了使用動畫效果的能力,支持顯式動畫、屬性動畫、組件內轉場能力。需要注意的是,ArkTS卡片使用動畫效果時具有以下限制:

表1 動效參數限制

名稱

參數說明

限制描述

duration

動畫播放時長

限制最長的動效播放時長為1秒,當設置大于1秒的時間時,動效時長仍為1秒。

tempo

動畫播放速度

卡片中禁止設置此參數,使用默認值1。

delay

動畫延遲執(zhí)行的時長

卡片中禁止設置此參數,使用默認值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

公眾號
微信公眾號

編程獅公眾號