介绍

本示例介绍了文本宽度过宽时,如何实现文本首尾相接循环滚动并显示在可视区,以及每循环滚动一次之后会停滞一段时间后再滚动。

效果图预览

使用说明

1.进入页面,检票口文本处,实现文本首尾相接循环滚动,且在同一可视区,滚动完成之后,停滞一段时间后继续滚动。

实现思路

由于ArkUI中的Marquee组件无法实现文本接替并显示在同一可视区的效果,它只能等文本完全消失在可视区之后,才会再次显示在可视区, 因此需要以下方案实现。

  1. Text组件外层包裹一层Scroll组件,Scroll组件设置一定的百分比宽度值,并获取当前文本内容宽度和Scroll组件宽度,文本宽度大于 Scroll组件宽度时,通过添加判断显示同样的文本,在偏移过程中可实现文本接替并显示在同一显示区的效果。源码参考Marquee.ets
    // TODO:知识点:使用Scroll组件和文本内容组件结合来判断文本宽度过宽时执行文本滚动,否则不执行
Scroll() {
Row() {
Text(this.tripDataItem.ticketEntrance)
.onAreaChange((oldValue, newValue) => {
logger.info(`TextArea oldValue:${JSON.stringify(oldValue)},newValue:${JSON.stringify(newValue)}`);
// 获取当前文本内容宽度
this.ticketCheckTextWidth = Number(newValue.width);
})
// TODO:知识点:文本宽度大于Scroll组件宽度时显示。在偏移过程中可实现文本接替并显示在同一显示区的效果
if (this.ticketCheckTextWidth >= this.ticketCheckScrollWidth) {
Blank()
.width(50)
Text(this.tripDataItem.ticketEntrance)
}
}.offset({ x: this.ticketCheckTextOffset })
}
.width('50%')
.align(Alignment.Start)
.enableScrollInteraction(false)
.flexGrow(1)
.scrollable(ScrollDirection.Horizontal)
.scrollBar(BarState.Off)
.onAreaChange((oldValue, newValue) => {
logger.info(`scrollArea oldValue:${JSON.stringify(oldValue)},newValue:${JSON.stringify(newValue)}`);
// 获取当前Scroll组件宽度
this.ticketCheckScrollWidth = Number(newValue.width);
})
}
.width('46%')
  1. 页面进来执行文本滚动函数scrollAnimation(),在指定的时间内完成文本的偏移,当循环一次之后,通过定时器setTimeout 来实现停滞操作。源码参考Marquee.ets
   // 文本滚动函数
scrollAnimation() {
// 文本宽度小于Scroll组件宽度,不执行滚动操作
if (this.ticketCheckTextWidth < this.ticketCheckScrollWidth) {
return;
}
/**
* 文本向左偏移动画
*
* @param duration:动画总时长
* @param curve:动画曲线
* @param delay:延迟时间
* @param onFinish:完成回调函数
* 性能:播放动画时,系统需要在一个刷新周期内完成动画变化曲线的计算,完成组件布局绘制等操作。建议使用系统提供的动画接口,
* 只需设置曲线类型、终点位置、时长等信息,就能够满足常用的动画功能,减少UI主线程的负载。
* 参考资料:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-attribute-animation-apis-0000001820879805
*/
animateTo({
duration: Constants.ANIMATION_DURATION,
curve: Curve.Linear,
delay: this.delay,
onFinish: () => {
// TODO:知识点:动画完成时,添加定时器,1s之后重新执行动画函数,达到停滞操作。
setTimeout(() => {
// 初始化文本偏移量
this.ticketCheckTextOffset = 0;
this.scrollAnimation();
}, Constants.DELAY_TIME)
}
}, () => {
// 文本偏离量
this.ticketCheckTextOffset = -(this.ticketCheckTextWidth + Constants.BLANK_SPACE)
})
}

高性能知识点

本示例使用了LazyForEach 进行数据懒加载,动态添加行程信息以及显示动画animateTo实现文本偏移。

工程结构&模块类型

marquee                                         // har类型
|---model
| |---Constants.ets // 数据模型层-常量
| |---DataSource.ets // 模型层-懒加载数据源
| |---DataType.ets // 数据模型层-数据类型
| |---MockData.ets // 数据模型层-模拟数据
|---view
| |---Marquee.ets // 视图层-应用主页面

模块依赖

本实例依赖common模块来实现日志的打印、资源 的调用。

参考资料

显示动画animateTo

数据懒加载LazyForEach

HarmonyOS NEXT应用开发之深色跑马灯案例的更多相关文章

  1. Android 开发笔记___textvieww__跑马灯效果

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  2. ARM开发(1) 基于STM32的LED跑马灯

    一 跑马灯原理:  1.1 本实验实现2个led的跑马灯效果,即2个led交替闪烁.  1.2 实验思路:根据电路图原理,给led相关引脚赋予高低电平,实现电路的导通,使led灯发光.  1.3 开发 ...

  3. Android开发:文本控件详解——TextView(二)文字跑马灯效果实现

    一.需要使用的属性: 1.android:ellipsize 作用:若文字过长,控制该控件如何显示. 对于同样的文字“Android开发:文本控件详解——TextView(二)文字跑马灯效果实现”,不 ...

  4. Android开发:TextView真正可控、不需要焦点的水平滚动--这才是真正的跑马灯

    网上的TextView做跑马灯,大多都是要用到焦点,而且字数要超出滚动区域宽度才能实现滚动,使用起来十分不方便. 这里实现一种真正可控的滚动 (1)不需要焦点 (2)任意字数 (3)滚动从滚动区域右边 ...

  5. TextView的跑马灯效果(AS开发实战第二章学习笔记)

    TextView的跑马灯效果跑马灯用到的属性与方法说明singleLine 指定文本是否单行显示ellipsize 指定文本超出范围后的省略方式focusable 指定是否获得焦点,跑马灯效果要求设置 ...

  6. 提示框,对话框,路由跳转页面,跑马灯,幻灯片及list组件的应用

    目录: 主页面的js业务逻辑层 主页面视图层 主页面css属性设置 跳转页面一的js业务逻辑层 跳转页面一的视图层 跳转页面二的视图层 跳转页面三的js业务逻辑层 跳转页面三的视图层 跳转页面三的cs ...

  7. android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习

    跑马灯效果 1.用过属性的方式实现跑马灯效果 属性:                  android:singleLine="true" 这个属性是设置TextView文本中文字 ...

  8. Android文字跑马灯控件(文本自动滚动控件)

    最近在开发一个应用,需要用到文本的跑马灯效果,图省事,在网上找,但老半天都找不到,后来自己写了一个,很简单,代码如下: import android.content.Context; import a ...

  9. TextView实现跑马灯效果

    网上有很多跑马灯的介绍,有很多跑马灯的代码.或许我的不是最好的,但是应该很容易明白的. 我们先来介绍一个跑马灯的代码 <LinearLayout xmlns:android="http ...

  10. Android:TextView跑马灯-详解

    Android:TextView跑马灯_详解 引言: TextView之所以需要跑马灯,是由于文字太长,或者是吸引眼球. 关键代码如下: android:singleLine="true&q ...

随机推荐

  1. k8s通过help、dry-run、explain提高编写yaml效率

    在Kubernetes(k8s)环境中,help.dry-run和explain命令可以帮助你提高编写YAML文件的效率.这些命令提供了关于资源定义.命令用法和字段说明的信息,从而让你能够更快速.更准 ...

  2. Neural Dynamics on Complex Networks-KDD20

    一.摘要 学习复杂网络上的连续时间动态对于理解.预测和控制科学和工程中的复杂系统至关重要.然而,由于高维系统结构中的组合复杂性.它们难以捉摸的连续时间非线性动力学以及它们的结构-动力学依赖性,使得这项 ...

  3. Java加密技术(四)——非对称加密算法RSA

    Java非对称加密算法rsa     接下来我们介绍典型的非对称加密算法--RSA RSA     这种算法1978年就出现了,它是第一个既能用于数据加密也能用于数字签名的算法.它易于理解和操作,也很 ...

  4. 大年学习linux(第三节---用户管理)

    三.用户管理 用户和用户组操作命令 ld Finger Pwck 检查/etc/passwd配置文件内的信息与实际主文件夹是否存在,还可比较/etc/passwd和/etc/shadow的信息是否一致 ...

  5. FreeRTOS教程6 互斥量

    1.准备材料 正点原子stm32f407探索者开发板V2.4 STM32CubeMX软件(Version 6.10.0) Keil µVision5 IDE(MDK-Arm) 野火DAP仿真器 XCO ...

  6. 从 Linux 内核角度探秘 JDK MappedByteBuffer

    本文涉及到的内核源码版本为: 5.4 ,JVM 源码为:OpenJDK17,RocketMQ 源码版本为:5.1.1 在之前的文章<一步一图带你深入剖析 JDK NIO ByteBuffer 在 ...

  7. 聊聊ShareGPT格式的微调数据集

    转载请注明住处:https://www.cnblogs.com/zhiyong-ITNote 概述 ShareGPT格式的数据集中,一般是如下格式: [ { "conversations&q ...

  8. KingbaseES 最老事务阻止vacuum freeze

    前言 最近生产环境发生几次由于长事务导致表.库年龄没法回收的情况.我们要规避这种情况的发生,不要等发生了再去强制中断会话连接.当数据库中存在最老事务版本xmin,那么早于他的快照可以被标记为froze ...

  9. KingbaseES运维案例之---服务进程(backend process)终止

    ​ 案例说明: 如下图所示:KingbaseES服务进程结构 KingbaseES使用客户端/服务器的模型. 对于每个客户端的连接,KingbaseES主进程接收到客户端连接后,会为其创建一个新的服务 ...

  10. 初学STM32 CAN通信(二)

    初学STM32 CAN通信(二) 1. STM32的CAN外设 ​ STM32的芯片中具有bxCAN控制器 (Basic Extended CAN),它支持CAN协议2.0A和2.0B标准. ​ 该C ...