【画龙迎春】HarmonyOS 鸿蒙Next-纯血会动的中国龙来了

【画龙迎春】HarmonyOS 鸿蒙Next-纯血会动的中国龙来了 【画龙迎春】纯血鸿蒙-会动的中国龙来了，基于HarmonyOS ArkTS语言开发，来实现一条会动的中国龙。

祝大家龙年行大运！

效果图：

核心代码逻辑：

使用ArkTS组件的image组件，加载中国龙的gif图，

然后控制Image，做属性动画，实现从小到大变化，模拟龙慢慢由远及近的感觉。

源码

normalWidth = 200
normalHeight = 100
changeWidth = 500
changeHeight = 300
@State message: string = '中国龙';
@State myWidth: number = this.normalWidth;
@State myHeight: number = this.normalHeight;
@State flag: boolean = false;

aboutToAppear() {
  setTimeout(() => {
    this.change()
  }, 2000)
}

change(){
  this.myWidth += 50
  this.myHeight += 50
  if(this.myWidth > 600){
    this.myWidth = this.normalWidth
    this.myHeight = this.normalHeight
  }
  setTimeout(() => {
    this.change()
  }, 1000)
}

build() {
  Row() {
    Column() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .fontColor($r('app.color.white'))
        .margin({ top: 30 })

      Image($r('app.media.icon_dragon'))
        .width(this.myWidth)
        .height(this.myHeight)
        .margin({ top: 100 })
        .animation({
          duration: 1000,
          curve: Curve.Ease
        })


    }.alignItems(HorizontalAlign.Center)
    .width('100%')
    .height('100%')
  }
  .height('100%')
  .height('100%')
  .backgroundColor($r('app.color.black'))
}