动动小手学鸿蒙 HarmonyOS APP（02）手持弹幕实现

前言

---

本篇通过2种方法实现一个手持弹幕的小功能。

第一种通过改变Text组件的offset属性，使用定时器来不断改变Text组件在x方向的位置使其进行移动。

第二种方法则是直接使用系统提供的Marquee组件，该组件为跑马灯组件，可以很方便的实现手持弹幕功能。

本demo的首页中加入了内容输入，速度调节功能。大家可以动动手试一下增加字体颜色，大小，背景色等参数的设置，动动小手进行学习。

一.效果展示

二.知识点分解

首页使用到的组件有

Text, TextInput, Slider, Button

都是系统组件，使用方法可以在官方文档中查看

2个Button分别跳转到2种不同方法实现的手持弹幕功能页面

在弹幕展示页面通过接收首页传入的内容文本和速度值来控制展示。

第一种方法使用 setInterval 方法进行定时更新，每过10ms进行一次对x方向偏移量的更新。将Text组件的offset属性进行更新，使得Text按照设定的速度进行向左移动。

第二种方法使用Marquee组件实现，通过start属性开始移动，通过setp来控制移动速度。

三.具体实现

首页进度条

Row() {
  Slider({
    value: this.speedValue,
    step: 1,
    max: 10,
    min: 1,
    style: SliderStyle.InSet
  })
    .blockColor('#191970')
    .trackColor('#ADD8E6')
    .selectedColor('#4169E1')
    .showSteps(true)
    .onChange((value: number, mode: SliderChangeMode) => {
      this.speedValue = value
    })
  Text(this.speedValue.toFixed(0)).fontSize(12)
}

文本内容和速度传递和接收

router.pushUrl({
  url: 'pages/Show',
  params: {
    message: this.message,
    speed: this.speedValue
  }
})

aboutToAppear() {
  const params = router.getParams(); // 获取传递过来的参数对象
  this.message = params['message']; // 获取message属性的值
  this.speed = params['speed']; // 获取speed属性的值
}

定时器实现方式

aboutToAppear() {
  const params = router.getParams(); // 获取传递过来的参数对象
  this.message = params['message']; // 获取message属性的值
  this.speed = params['speed']; // 获取speed属性的值

  this.intervalId = setInterval(() => {
    if (this.speed < 1) {
      this.speed = 1;
    } else if (this.speed > 10) {
      this.speed = 10;
    }
    this.offSetValue = this.offSetValue + this.speed;

    if (this.offSetValue > vp2px(240)) {
      this.offSetValue = vp2px(-240);
    }
  }, 10);
}

aboutToDisappear() {
  clearInterval(this.intervalId);
}

build() {
    Row() {
      Text(this.message)
        .fontSize('120fp')
        .fontWeight(FontWeight.Bold)
        .fontColor(this.fontColor)
        .offset({ x: -1 * this.offSetValue})
        .height('140vp')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(this.bgColor)
    .alignItems(VerticalAlign.Center)
}

Marquee跑马灯组件实现方式

build() {
  Flex({
    direction: FlexDirection.Column,
    alignItems: ItemAlign.Center,
    justifyContent: FlexAlign.Center }) {
    Marquee({
      start: this.start,
      step: this.speed * 20,
      loop: -1,
      fromStart: true,
      src: this.message
    })
      .width('100%')
      .height('140vp')
      .fontColor(this.fontColor)
      .fontSize('120fp')
      .fontWeight(FontWeight.Bold)
      .backgroundColor(this.bgColor)
      .margin({ bottom: 40 })
  }
  .width('100%')
  .height('100%')
  .backgroundColor(this.bgColor)
}

四.总结

本例中的Marquee方式实现显然更方便快速，代码也更简单明了。通过2种方式，我们可以发现实现同一种功能往往有多种方式，但最方便快捷的显然是使用现成组件。这就要求我们在平时多了解鸿蒙系统提供的基础组件，同时使用第三方开源组件也是很好的选择。

在使用Marquee实现过程中，刚开始的时候弹幕没有如预期的滚动起来。反复检查代码后发现写得并没有问题，在尝试重启模拟器后可以正常滚动了。

Demo地址： github.com/kainbro/dan...