关于在ArkTS中添加动画没有效果这件事

先来看看错的

@Entry
@Component
struct an {

  @State a : number = 0;
  @State ang : number = 0;


  build() {
    Row(){
      Text('^_^')
        .fontSize(90)
        .position({
          x : 0,
          y : this.a
        })
        .rotate({
          angle : this.ang,
          centerX : '50%',
          centerY : '50%'
        })
        .onClick(() => {
          this.a += 100;
        })
        .animation({
          duration : 500
        })

    }
    .height('100%')
    .width('100%')
  }
}

我添加了动画，可是效果呢？

很显然没有任何动画效果

首先排除电脑本身的问题（其实很有可能，作者的电脑配置很低）

那到底是哪里出错了呢？

在我的反复尝试下，我发现只要给Text加上宽和高就行了，注意是都要加，一个都不能少

再来看看对的

@Entry
@Component
struct an {

  @State a : number = 0;
  @State ang : number = 0;


  build() {
    Row(){
      Text('^_^')
        .height(100)
        .width(200)
        .fontSize(90)
        .position({
          x : 0,
          y : this.a
        })
        .rotate({
          angle : this.ang,
          centerX : '50%',
          centerY : '50%'
        })
        .onClick(() => {
          this.a += 100;
        })
        .animation({
          duration : 500
        })

    }
    .height('100%')
    .width('100%')
  }
}

看看效果如何

哈哈，成功出现了

还有就是要注意外面套一个容器，具体原因不是很清楚，但是可能是这个动画需要这个东西在一个容器里面进行吧，并且需要获取它的固定大小，如果不定义的话会随时发生变化，不能控制？不是很懂，欢迎指正