【HarmonyOS】动画旋转方式比较

学习笔记 比较animation动画三种rotate旋转方式的不同

import { curves } from '@kit.ArkUI'

@Entry
@Component
struct Page030 {
  @State rotateValue_1: number = 0
  @State rotateValue_2: number = 0

  build() {
    Column({ space: 10 }) {

      Image($r("app.media.app_icon"))
        .width('100lpx')
        .height('100lpx')
        .rotate({ angle: this.rotateValue_1 })
        .animation({
          duration: 2000,
          curve: curves.springMotion(),
          playMode: PlayMode.Normal,

        })

      Button('切换旋转 (往返)').onClick(() => {
        //先正向转，再转回来
        this.rotateValue_1 = this.rotateValue_1 == 360 ? 0 : 360
      })
      Button('持续加速旋转').onClick(() => {
        //持续正转，动画未执行完成就继续加速旋转
        this.rotateValue_1 += 360
      })
      Image($r("app.media.app_icon"))
        .width('100lpx')
        .height('100lpx')
        .rotate({ angle: this.rotateValue_2 })
        .animation(this.rotateValue_2 != 0 ? {
          duration: 2000,
          curve: curves.springMotion(),
          playMode: PlayMode.Normal,
          onFinish: (() => {
            console.info('----onFinish this.rotateValue', this.rotateValue_2)
            if (this.rotateValue_2 == 360) {
              this.rotateValue_2 = 0
            }
          })
        } : undefined)
      Button('条件旋转 (一次性)').onClick(() => {
        //持续正转，动画未执行完成点击无效
        this.rotateValue_2 = 360
      })
    }
    .width('100%')
    .height('100%')
  }
}

1. 切换旋转 (往返):

• 这种方式允许图像在用户点击时进行一个完整的360度旋转，然后回到初始位置。它适用于需要展示一个“完整循环”动画效果的场景。

2. 持续加速旋转:

• 在这种方式下，每次用户点击按钮时，图像都会额外旋转360度。这模拟了一种连续加速的效果，适合于创建动态的、无限旋转的视觉效果。

3.条件旋转 (一次性):

• 这种方式只有在图像没有正在执行动画时才响应用户的点击，从而进行一次360度旋转。它防止了动画的叠加，确保每个动画周期都是独立的，适用于需要精确控制动画触发的情况。