动动小手学鸿蒙 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来控制移动速度。

三.具体实现

首页进度条

ts 复制代码
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)
}

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

ts 复制代码
router.pushUrl({
  url: 'pages/Show',
  params: {
    message: this.message,
    speed: this.speedValue
  }
})
ts 复制代码
aboutToAppear() {
  const params = router.getParams(); // 获取传递过来的参数对象
  this.message = params['message']; // 获取message属性的值
  this.speed = params['speed']; // 获取speed属性的值
}

定时器实现方式

ts 复制代码
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跑马灯组件实现方式

ts 复制代码
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...

相关推荐
SRC_BLUE_171 小时前
SQLI LABS | Less-39 GET-Stacked Query Injection-Intiger Based
android·网络安全·adb·less
无尽的大道4 小时前
Android打包流程图
android
镭封6 小时前
android studio 配置过程
android·ide·android studio
夜雨星辰4876 小时前
Android Studio 学习——整体框架和概念
android·学习·android studio
邹阿涛涛涛涛涛涛6 小时前
月之暗面招 Android 开发,大家快来投简历呀
android·人工智能·aigc
IAM四十二6 小时前
Jetpack Compose State 你用对了吗?
android·android jetpack·composer
奶茶喵喵叫7 小时前
Android开发中的隐藏控件技巧
android
Winston Wood9 小时前
Android中Activity启动的模式
android
众乐认证9 小时前
Android Auto 不再用于旧手机
android·google·智能手机·android auto
三杯温开水9 小时前
新的服务器Centos7.6 安卓基础的环境配置(新服务器可直接粘贴使用配置)
android·运维·服务器