#星计划# 鸿蒙 HarmonyOS ArkTS ArkUI 动画中心旋转、空翻、旋转缩放原创

特创码农

发布于 2024-1-21 15:40

6080浏览

0收藏

#星计划# 鸿蒙 HarmonyOS ArkTS ArkUI 动画中心旋转、空翻、旋转缩放-鸿蒙开发者社区

    @Entry
    @Component
    struct Index {
      @State widthA: number = 200
      @State heightA: number= 200
      @State angleA:number = 0
      onPageShow():void{
        animateTo ( {
          duration: 2000,
          iterations: -1,
          curve:Curve.Linear
        }, () => {
          this.widthA = 0
          this.heightA = 0
          this.angleA = 360
        } )
      }
      build() {
          Column() {

            // 中心旋转
            Column(){}
            .width(200)
            .height(200)
            .backgroundColor('#ffc44f4f')
            .rotate({
              x: 0,
              y: 0,
              z: 1,
              angle: this.angleA,
              centerX:100,
              centerY:100,
            })
            Text('中心旋转')
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
              .margin({bottom:10,top:10})



            // 空翻
            Column(){}
            .width(200)
            .height(200)
            .backgroundColor('#ffc44f4f')

            .rotate({
              x: 1,
              y: 0,
              z: 0,
              angle: this.angleA,
              centerX:100,
              centerY:0,
            })
            Text('空翻')
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
              .margin({bottom:10,top:10})

            // 旋转缩放
            Column(){}
            .width(this.widthA)
            .height(this.heightA)
            .backgroundColor('#ffc44f4f')
            .rotate({
              x: 0,
              y: 0,
              z: 1,
              angle: this.angleA,
              centerX:100,
              centerY:100,
            })
            Text('旋转缩放')
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
              .margin({bottom:10,top:10})
          }
          .width('100%')
          .margin({top:40})


      }
    }



1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.