鸿蒙app开发：每天一个小bug:明明添加了animation,动画效果却没有_鸿蒙开发 无明确加载动画

按照了animation的三大要求为文本组件设置简单的动画，但还是无法实现动画效果。

animation动画的三大要求

1. animation的属性设置位置：要求设置在变化属性的后面，比如想要实现简单的位移动画效果，那么animation的位置就应该在position属性的后面。
2. 动画效果的产生需要相关属性值的变化，否则无法实现动画效果，即位移大小需要变化。
3. 实现动画效果的属性只包含以下几种：width、height、backgroundColor、opacity、scale、rotate、translate等

动画效果的实现

按照这些要求简单编写了一段代码：

@Entry
@Component
struct dome_animation {
  @State x: number = 100
  @State y: number = 100

  build() {
    Column() {
      Row() {
        Text('我可是会动画呀')
          .fontColor('#36D')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .margin(30)
          .position({ x: this.x, y: this.y })
          .animation({
            duration: 2000,
            curve: Curve.EaseOut,
            iterations: 1,
            playMode: PlayMode.Normal
          })
      }

      Button('点击开始动画演示')
        .margin(10)
        .onClick(() => {
          this.x += 50
          this.y += 10
        })

    }
    .backgroundColor('#ece7d9')
    .height('100%')
    .width('100%')
  }
}
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

代码运行效果

发现没有动画效果。
但是这也是按照3大要求来实现的呀！ 这是什么问题呢？
经过比对案例代码发现了出现问题的原因：需要设置width和height的属性。
具体什么原理也不太懂可能宽高很重要吧，路过的大佬可以解答一下。

补充后的代码

...
        Text('我可是会动画呀')
          .fontColor('#36D')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .margin(30)
          .width('200')
          .height('100')
          .position({ x: this.x, y: this.y })
          .animation({
            duration: 2000,
            curve: Curve.EaseOut,
            iterations: 1,
            playMode: PlayMode.Normal
          })
      }
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

运行效果

简单完成，又是粗心的一天！