HarmonyOS 动画实现

可以使用路径动画motionPath实现的功能，参考下面demo：

详细参考链接：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-motion-path-animation-V5

@Entry
@Component
struct Page6255 {
  @State message: string = 'Hello World';

  @State toggle: boolean = true

  build() {
    Column() {
      Button('click me').margin(50)
        // 执行动画：从起点移动到(300,200)，再到(300,500)，再到终点
        .motionPath({ path: 'M 1005 193 C 204 739 37 1614 1040 2142', from: 0.0, to: 1.0, rotatable: true })
        .onClick(() => {
          animateTo({ duration: 400, curve: Curve.Linear }, () => {
            this.toggle = !this.toggle // 通过this.toggle变化组件的位置
          })
        })
    }.width('100%').height('100%').alignItems(this.toggle ? HorizontalAlign.Start : HorizontalAlign.Center)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.