如何实现图片透明度渐变动画
=============

#### 问题现象

如何在Image组件切换时，形成透明度由高到低的动画效果？

#### 背景知识

*   [关键帧动画 (keyframeAnimateTo)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-keyframeanimateto)：在UIContext中提供keyframeAnimateTo接口来指定若干个关键帧状态，实现分段的动画。
*   [opacity](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-opacity#opacity)：设置组件的不透明度，取值范围为0到1，1表示不透明，0表示完全透明。

#### 解决方案

可以利用if条件语句来控制Image的展示，配合关键帧动画修改图片的透明度，从而达成透明度渐变动画，示例代码参考如下：

@Entry
@Component
struct ImageOpacityAnimate {
  @State showOpacity: number = 1;
  @State showIndex: number = 0;
  data: ResourceStr\[\] = \[\];

  aboutToAppear() {
   _ // 图片资源需自行替换_
    this.data.push($r('app.media.img1'));
    this.data.push($r('app.media.img2'));
    this.data.push($r('app.media.startIcon'));
  }

  build() {
    Column({ space: 5 }) {
      Column() {
        ForEach(this.data, (item: ResourceStr, index: number) => {
          if (this.showIndex === index) {
            Image(item)
              .width(200)
              .height(200)
              .opacity(this.showOpacity);
          }
        });
      };

      Button('click').onClick(() => {
        this.show();
      });
    }
    .width('100%');
  }

  show() {
    this.getUIContext().keyframeAnimateTo({
      iterations: 1,
      onFinish: () => {
      _  // 递归调用_
        this.show();
      }
    },
      \[
        {
          duration: 1000,
          event: () => {
          _  // 第一段动画把图片透明度从1变成0_
            this.showOpacity = 0;
          }
        },
        {
          duration: 500,
          event: () => {
          _  // 第二段动画完成图片切换_
            this.showIndex = (this.showIndex + 1) % this.data.length;
          }
        },
        {
          duration: 1000,
          event: () => {
         _   // 第三段动画把图片透明度从0变成1_
            this.showOpacity = 1;
          }
        }
      \]);
  }
}