鸿蒙开发：平移动画时间为啥没了？

前言

本文基于Api13

这两天在搞有关动画相关的，有一个很简单的平移动画，却卡了我一段时间，由于事情曲折，各位友友听我娓娓道来；说的是，有一个组件，设置了translate属性，让其从左到右平移，为了能够平缓的平移，需要加上平移时间，代码如下：

@Entry
@Component
struct Index {
  @State translateX: number = 0

  build() {
    Column() {

      Text("动画" )
        .width(50)
        .height(50)
        .backgroundColor(Color.Pink)
        .textAlign(TextAlign.Center)
        .margin({ top: 10 })
        .fontColor(Color.White)
        .translate({ x: this.translateX })
        .animation({ duration: 500 })

      Button("点击")
        .margin({ top: 10 })
        .onClick(() => {
          this.translateX = 200
        })
    }
  }
}

以上呢，就是一段很简单的代码，点击按钮之后，让组件由左向右平移200，持续动画时间为500毫秒。

我们看下实际的运行效果：

可以看到，上述的代码，一切都没问题的，都按照正常的功能执行，但是，我不是移动一个组件，而是多个组件，于是，我又创建了一个组件。

Column() {

      Text("动画1")
        .width(50)
        .height(50)
        .backgroundColor(Color.Pink)
        .textAlign(TextAlign.Center)
        .margin({ top: 10 })
        .fontColor(Color.White)
        .translate({ x: this.translateX })
        .animation({ duration: 500 })

      Text("动画2")
        .width(50)
        .height(50)
        .backgroundColor(Color.Pink)
        .textAlign(TextAlign.Center)
        .margin({ top: 10 })
        .fontColor(Color.White)
        .translate({ x: this.translateX })
        .animation({ duration: 500 })

      Button("点击")
        .margin({ top: 10 })
        .onClick(() => {
          this.translateX = 200
        })
    }

以上的代码运行之后，也是没有问题，如果有N个组件呢，一个一个复制也不是办法，于是，我就使用ForEach来遍历，这样直接控制数据源就行了，代码又改为了如下：

Column() {

      ForEach([1, 2], (item: number, index: number) => {
        Text("动画"+index)
          .width(50)
          .height(50)
          .backgroundColor(Color.Pink)
          .textAlign(TextAlign.Center)
          .margin({ top: 10 })
          .fontColor(Color.White)
          .translate({ x: this.translateX })
          .animation({ duration: 500 })
      })

      Button("点击")
        .margin({ top: 10 })
        .onClick(() => {
          this.translateX = 200
        })
    }

效果和之前的一样，点击按钮之后，两个组件也能同步的进行平移，有的友友就说了，你的问题在哪？tell me why?looking my eyes!

各位友友稍安勿躁，问题马上来了。

因为牵扯的不仅仅是多组件移动的问题，后续的功能，还有每个组件的移动距离是不一样的，于是，我又重新定义的数据源，而移动距离则从数据源中获取：

ForEach(this.translateArray, (item: number,index:number) => {
        Text("动画"+index)
          .width(50)
          .height(50)
          .backgroundColor(Color.Pink)
          .textAlign(TextAlign.Center)
          .margin({ top: 10 })
          .fontColor(Color.White)
          .translate({ x: item })
          .animation({ duration: 500 })
      })

以上的代码，就能实现每个组件的平移距离动态设置，想让那个组件移动，就让哪个组件移动，只需要控制数据源即可，貌似代码非常完美，当时我也是这么觉得，于是就运行了程序。

让第一个组件平移200，让第二个组件平移300。

Button("点击")
        .margin({ top: 10 })
        .onClick(() => {
          this.translateArray[0] = 200
          this.translateArray[1] = 300
        })

运行之后看下效果：

移动过去了吗？哎，确实移动过去了，但是，平移动画的时间没了！只是很生硬的一下平移过去了，一个ForEach把动画时间干没了，此时的我，大脑早已一串问号。

追寻问题

从前言中，可以看到，一开始使用ForEach，只是数据源固定的，使用共同的平移属性，那时的代码运行之后，还一切正常，直到数据源切换为了动态的数据源，此时的动画时间就不生效了；针对这个问题，我们再次做下验证，让数据源和改变的平移数据区分开来，我们再次看下实际的效果。

@Entry
@Component
struct Index {
  @State dataArray: number[] = [0, 0]
  @State translateArray: number[] = [0, 0]

  build() {
    Column() {

      ForEach(this.dataArray, (_: number,index:number) => {
        Text("动画"+index)
          .width(50)
          .height(50)
          .backgroundColor(Color.Pink)
          .textAlign(TextAlign.Center)
          .margin({ top: 10 })
          .fontColor(Color.White)
          .translate({ x: this.translateArray[index] })
          .animation({ duration: 500 })
      })

      Button("点击")
        .margin({ top: 10 })
        .onClick(() => {
          this.translateArray[0] = 200
          this.translateArray[1] = 300
        })
    }
  }
}

代码还是无比的简单，定义了两个数据源，一个用于数据加载，一个用于平移距离设置，运行之后，我们看下效果：

我们可以发现，动画时间又生效了，基本上，我们就可以暂时得出结论了，在ForEach中的属性动画，如果数据源发生改变，那么动画时间是不生效的。

这是为什么呢？

数据源发生变化，和动画时间有什么关系？这简直就是风牛马不相及，于是，我就查看了官网的ForEach介绍，看到了这样的一段话：

似乎恍然大悟，ForEach中当键值变化时，ArkUI框架将视为该数组元素已被替换或修改，并会基于新的键值创建一个新的组件。

查看了之前的代码，由于没有设置，都是统一的使用的默认的键值，也就是(item: Object, index: number) => { return index + '__' + JSON.stringify(item); }，打印了一下日志，确实发生了变化。

不过有一事，仍然不明，你组件创建创建呗，和我动画时间有毛关系，接着又查看了官方对animation的相关介绍。

如果内部组件还未创建，动画时机过早，动画属性没有初值无法对组件产生动画。

通过以上，我们就能很直观的明白了问题的原因，第一个，由于键值发生了变化，造成了组件重新创建，第二个，由于组件重新创建，动画时机过早，造成属性未生效。

相关总结

这是一个由属性动画造成的一系列问题，折射出了ForEach的键值知识点，所以啊，友友们，遇到问题，莫慌，还是要以官方为主，不过此问题，还是给自己上了一课，基础知识不牢，是最大的痛点！

有的友友说了，虽然，采用两个数据源，解决了以上的问题，可我就想使用一个呢，这个，在实际的开发中，可以使用对象数组的形式，更改需要变化的属性即可，避免重新创建新的组件。

具体案例如下：

@Observed
class TranslateBean {
  name?: string
  translate?: number

  constructor(name: string, translate: number) {
    this.name = name
    this.translate = translate
  }
}

@Component
struct TextView {
  @ObjectLink item: TranslateBean

  build() {
    Text(this.item.name)
      .width(50)
      .height(50)
      .backgroundColor(Color.Pink)
      .textAlign(TextAlign.Center)
      .margin({ top: 10 })
      .fontColor(Color.White)
      .translate({ x: this.item.translate })
      .animation({ duration: 500 })
  }
}


@Entry
@Component
struct Index {
  @State dataArray: TranslateBean[] = [new TranslateBean("动画一", 0), new TranslateBean("动画二", 0)]
  @State translateArray: number[] = [200, 200]

  build() {
    Column() {

      ForEach(this.dataArray, (item: TranslateBean, index: number) => {
        TextView({ item: item })
      })

      Button("点击")
        .margin({ top: 10 })
        .onClick(() => {
          this.dataArray[0].translate = 200
          this.dataArray[1].translate = 300
        })
    }
  }
}