HarmonyOS 想实现从左侧滑出一张运营广告位的动画，10秒后消失？

Question

想实现从左侧滑出一张运营广告位的动画，10秒后消失，效果如下图

Answer 1

参考下demo

// xxx.ets
@Entry
@Component
struct Index {
  @State xOffset: number = -100

  onPageShow(): void {
    setTimeout(()=>{
      animateTo({
        duration: 2000,
        curve: Curve.EaseOut,
        playMode: PlayMode.Normal,
        onFinish: () => {
          console.info('play end')
        }
      }, () => {
        this.xOffset = 0
      })
    },1000)
    setTimeout(()=>{
      animateTo({
        duration: 2000,
        curve: Curve.EaseOut,
        playMode: PlayMode.Normal,
        onFinish: () => {
          console.info('play end')
        }
      }, () => {
        this.xOffset = -100
      })
    },10000)
  }

  build() {
    Column({ space: 20 }) {
      Flex({ direction: FlexDirection.Row }) {
        Image($r('app.media.ic_banner01'))
          .width(100)
          .height(70)
          .offset({ x:this.xOffset })
      }
    }
    .backgroundColor(Color.Yellow)
    .width('100%')
    .height('100%')
  }
}