介绍

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

效果图预览

使用说明

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. Git | Git Server 搭建,在自己的服务器上进行 git server 搭建

    系列文章目录 目录 系列文章目录 前言 操作 1. 创建 git 用户 2. 创建 .ssh 目录 3. 自定义仓库的根目录 4. 在服务器上创建个裸仓库 5. 手动配置一个公钥 6. 在本地测试一下 ...

  2. 智慧公安!3DCAT实时云渲染助力某公安机关打造数字孪生可视化系统

    近年来,随着大数据.数字孪生.云计算.人工智能等技术的飞速发展,数字化浪潮席卷全国各地公安系统.2022年全国公安工作会议中也提到,数字化改革是推动公安工作创新发展的大引擎.培育战斗力生成新的增长点. ...

  3. 记录--服务端推送到Web前端有哪几种方式?

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 这个问题? 这个问题一般会出现在面试题里面,然后回答一些诸如轮询.WebSocket之类的答案.当然,实际开发中,也会遇到类似别人给你赞了 ...

  4. 常用命令--htpasswd--(网站加密)

    常用命令htpasswd(网站加密) 常用选项 htpasswd 是一个用于创建和管理HTTP基本认证密码文件的命令行工具,通常与Apache Web服务器一起使用.以下是 htpasswd 常用选项 ...

  5. Python 汇总列数据到行

    Python汇总Excel列数据到行(方法一) import pandas as pd # 读取Excel文件 df = pd.read_excel('C:\\Users\\liuchunlin2\\ ...

  6. 性能测试系列:高可用测试linux常用命令

    一 linux常用 df –h 看磁盘 du –h –max-depth=1 查看当前目录下,各个文件夹大小 ls –lht 查看当前目录下,各个文件大小 top –H –p pid 看进程下线程的资 ...

  7. KingbaseES V8R6集群运维案例---数据块故障自动修复(auto_bmr)

    案例说明: 在Oracle11.2版本之后,DataGuard 若搭建实时应用日志的物理备库,那么在主库数据文件少 量坏块的情况下,可以利用ABCR技术快速修复坏块. Starting in Orac ...

  8. STAR法则是什么(如何把一件事表达清楚)

    STAR法则,即为Situation Task Action Result的缩写,具体含义是: Situation: 事情是在什么情况下发生 Task: 你是如何明确你的任务的 Action: 针对这 ...

  9. Scala 模式匹配拓展

    1 package chapter08 2 3 object Test03_MatchTupleExtend { 4 def main(args: Array[String]): Unit = { 5 ...

  10. MySQL数据过滤和搜索

    操作符 AND操作符 mysql> SELECT prod_id,prod_price,prod_name FROM products WHERE vend_id=1003 AND prod_p ...