前言
本篇通过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...