HarmonyOS 组合动画如何实现？

Question

如让Image出现一组合动画，先让透明度发生变化，再缩放，再让透明度变化，然后再缩放

Answer 1

参考以下两种动画，demo1：

import { UIContext } from '@ohos.arkui.UIContext';

@Entry
@Component
struct SH_issue05_02 {
  @State myScale: number = 1.0;
  @State myOpacity: number = 1.0
  uiContext: UIContext | undefined = undefined;

  aboutToAppear() {
    this.uiContext = this.getUIContext?.();
  }

  build() {
    Column() {
      Circle()
        .width(100)
        .height(100)
        .fill("#46B1E3")
        .margin(100)
        .scale({
          x: this.myScale,
          y: this.myScale
        })//设置x轴/y轴的缩放
        .opacity(this.myOpacity)
        .onClick(() => {
          if (!this.uiContext) {
            console.info("no uiContext, keyframe failed");
            return;
          }
          this.myScale =
            1;
          // 设置关键帧动画整体播放3次
          this.uiContext.keyframeAnimateTo({ iterations: -1 }, [
            {
              // 第一段关键帧动画时长为500ms，opacity属性做从1到0.5的动画
              duration: 500, event: () => {
              this.myOpacity = 0.5
            }
            },
            {
              // 第二段关键帧动画时长为500ms，scale属性做从1到1.5的动画
              duration: 500, event: () => {
              this.myScale = 1.5;
            }
            },
            {
              // 第三段关键帧动画时长为500ms，opacity属性做从0.5到1的动画
              duration: 500, event: () => {
              this.myOpacity = 1
            }
            },
            {
              // 第四段关键帧动画时长为500ms，scale属性做从1.5到1的动画
              duration: 500, event: () => {
              this.myScale = 1;
            }
            }
          ]);
        })
    }.width('100%')
    .margin({ top: 5 })
  }
}

demo2：

@Entry
@Component
struct Index {
  @State myScale: number = 1.0;
  @State myOpacity: number = 1.0

  build() {
    Column() {
      Button('change size')
        .width(200)
        .height(200)
        .scale({
          x: this.myScale,
          y: this.myScale
        })//设置x轴/y轴的缩放
        .opacity(this.myOpacity)
        .margin(30).onClick(() => {
        //动画1
        animateTo({
          duration: 3000,
          curve: Curve.EaseInOut,
          iterations: -1, // 设置-1表示动画无限循环
          playMode: PlayMode.Normal,
          onFinish: () => {
            console.info('play end')
          }
        },
          () => {
            console.info('play1>>>>')
            this.myOpacity = 0.5
          })
        //动画2 可以用线程延迟0.5秒
        animateTo({
          duration: 3500,
          curve: Curve.EaseInOut,
          delay: 500,
          iterations: -1, // 设置-1表示动画无限循环
          playMode: PlayMode.Normal,
          onFinish: () => {
            console.info('play end2222')},
        },
          () => {
            console.info('play2>>>>')
            this.myScale = 0.5;
          })
        //动画3 可以用线程延迟0.5秒
        animateTo({
          duration: 6500,
          curve: Curve.EaseInOut,
          delay: 500,
          iterations: -1, // 设置-1表示动画无限循环
          playMode: PlayMode.Normal,
          onFinish: () => {
            console.info('play end3333')},
        },
          () => {
            console.info('play3>>>>')
            this.myOpacity = 1;
          })
        //动画4 可以用线程延迟0.5秒
        animateTo({
          duration: 7000,
          curve: Curve.EaseInOut,
          delay: 500,
          iterations: -1, // 设置-1表示动画无限循环
          playMode: PlayMode.Normal,
          onFinish: () => {
            console.info('play end4444')},
        },
          () => {
            console.info('play4>>>>')
            this.myScale = 1;
          })
      })
    }
  }
}