【HarmonyOS 鸿蒙Next 画龙迎春】游龙戏珠，祝君如龙舞九天

【HarmonyOS 鸿蒙Next 画龙迎春】游龙戏珠，祝君如龙舞九天 👋 大家新年好，龙年快乐，如龙腾飞🐲🧧

新一年学习HarmonyOS应用开发，我也来画一条中国龙，拖动屏幕，龙会跟随游走。

代码实现讲解：

一条龙，可以通过数组列表结构绘制龙的各个部件（龙珠，龙头，龙爪，龙身），他们有共同的结构属性：（长，宽，位置，旋转角度）

[@Observed](/user/Observed)
class LoongItem{
  public index:number;
  public width:number;
  public height:number;
  public x:number;
  public y:number;
  public angle:number;

  constructor(index:number, width:number, height:number, x:number, y:number, angle:number){
    this.index = index;
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    this.angle = angle;
  }
}

再定义龙通用的组件类，

里面通过Image组件绘制（通过index值判断绘制不同的图片，补充添加龙珠旋转动画效果）

@Component
struct LoongBody {
  num: number = 0;
  index: number = 0;
  [@ObjectLink](/user/ObjectLink) item: LoongItem;

  @State angle:number = 0

  aboutToAppear() {
    // 龙珠旋转
    if(this.index === this.num - 1) {
      animateTo({
        duration: 2000,
        iterations: -1,
        curve: Curve.Linear
      }, () => {
        this.angle = 360
      })
    }
  }

  build() {
    Column() {
      if(this.index === this.num - 1) {
        // 龙珠
        Image($r('app.media.loongball'))
          // .size({ width: '50%', height: '50%' })
          .offset({ y: '50%' })
          .rotate({
            x: 0,
            y: 0,
            z: 1,
            angle: this.item.angle,
            centerX: '50%',
            centerY: '50%',
          })
      } else if(this.index === this.num - 2 ) {
        // 龙头
        Image($r('app.media.loonghead'))
      } else if((this.index === this.num - 10) || (this.index === 20) ) {
        // 龙爪
        Image($r('app.media.loongclaw'))
      } else {
        // 龙身
        Image($r('app.media.loongbody'))
      }
    }
    .width(this.item.width)
    .height(this.item.height)
    .position({x: this.item.x - this.item.width, y: this.item.y - this.item.height})
    .zIndex(this.index)
    .id('loong' + this.index)
  }
}

页面组件内容，

通过层叠布局（StackLayout）使得龙各部件层叠，具有位置定位能力，（类似Web中绝对定位的效果）

然后定义龙各部件列表，

绑定触屏移动事件，

获取触屏像素位置信息，

滑动触屏移动，将最后一个元素位置设置触屏位置，其他元素位置是其下一个元素的位置，循环遍历依此类推。

@Entry
@Component
struct Index {
  private num: number = 50
  @State title: string = '游龙戏珠🐉'
  // 龙各个部件列表
  @State loongList: LoongItem[] = Array.from({length: this.num}, (v, i:number) => {
    return new LoongItem(i, i * 4, i * 4, 100, i * 8, 0)
  });
  @State ballTimer: number = 0
  onPageShow(){
    this.ballTimer = setInterval(() => {
      this.loongList[this.num - 1].angle += 10
    }, 100)
  }
  onPageHide() {
    clearInterval(this.ballTimer)
  }

  build() {
    Column() {
      Stack({ alignContent: Alignment.Top }) {
        ForEach(this.loongList, (item, index) => {
          LoongBody({ item: this.loongList[index], index: index, num: this.num })
        }, (item) => item)
      }
    }
    .width('100%').height('100%').backgroundColor('#ddf8fe')
    .onTouch((event: TouchEvent) => {
      if(event.touches?.length) {
        const position = event.touches[0]
        for (let i = 0; i < this.loongList.length - 1; i++) {
          const currentParticle = this.loongList[i];
          const nextParticle = this.loongList[i + 1];
          currentParticle.x = nextParticle.x
          currentParticle.y = nextParticle.y
          this.loongList[i] = currentParticle
        }

        if (this.loongList.length > 0) {
          const lastParticle = this.loongList[this.num-1]
          lastParticle.x = position.x
          lastParticle.y = position.y
          this.loongList[this.num-1] = lastParticle
        }
      }
    })
  }
}

涉及知识重点：

对于数组对象深度监听变更，需要通过使用@Observed装饰器和@ObjectLink装饰器解决多层嵌套数据观察不到的情况

🐲祝大家新的一年如龙飞天！