HarmonyOS NEXT应用开发之深色跑马灯案例
介绍
本示例介绍了文本宽度过宽时,如何实现文本首尾相接循环滚动并显示在可视区,以及每循环滚动一次之后会停滞一段时间后再滚动。
效果图预览
使用说明:
1.进入页面,检票口文本处,实现文本首尾相接循环滚动,且在同一可视区,滚动完成之后,停滞一段时间后继续滚动。
实现思路
由于ArkUI中的Marquee组件无法实现文本接替并显示在同一可视区的效果,它只能等文本完全消失在可视区之后,才会再次显示在可视区, 因此需要以下方案实现。
- 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%')
- 页面进来执行文本滚动函数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 // 视图层-应用主页面
模块依赖
参考资料
HarmonyOS NEXT应用开发之深色跑马灯案例的更多相关文章
- Android 开发笔记___textvieww__跑马灯效果
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- ARM开发(1) 基于STM32的LED跑马灯
一 跑马灯原理: 1.1 本实验实现2个led的跑马灯效果,即2个led交替闪烁. 1.2 实验思路:根据电路图原理,给led相关引脚赋予高低电平,实现电路的导通,使led灯发光. 1.3 开发 ...
- Android开发:文本控件详解——TextView(二)文字跑马灯效果实现
一.需要使用的属性: 1.android:ellipsize 作用:若文字过长,控制该控件如何显示. 对于同样的文字“Android开发:文本控件详解——TextView(二)文字跑马灯效果实现”,不 ...
- Android开发:TextView真正可控、不需要焦点的水平滚动--这才是真正的跑马灯
网上的TextView做跑马灯,大多都是要用到焦点,而且字数要超出滚动区域宽度才能实现滚动,使用起来十分不方便. 这里实现一种真正可控的滚动 (1)不需要焦点 (2)任意字数 (3)滚动从滚动区域右边 ...
- TextView的跑马灯效果(AS开发实战第二章学习笔记)
TextView的跑马灯效果跑马灯用到的属性与方法说明singleLine 指定文本是否单行显示ellipsize 指定文本超出范围后的省略方式focusable 指定是否获得焦点,跑马灯效果要求设置 ...
- 提示框,对话框,路由跳转页面,跑马灯,幻灯片及list组件的应用
目录: 主页面的js业务逻辑层 主页面视图层 主页面css属性设置 跳转页面一的js业务逻辑层 跳转页面一的视图层 跳转页面二的视图层 跳转页面三的js业务逻辑层 跳转页面三的视图层 跳转页面三的cs ...
- android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习
跑马灯效果 1.用过属性的方式实现跑马灯效果 属性: android:singleLine="true" 这个属性是设置TextView文本中文字 ...
- Android文字跑马灯控件(文本自动滚动控件)
最近在开发一个应用,需要用到文本的跑马灯效果,图省事,在网上找,但老半天都找不到,后来自己写了一个,很简单,代码如下: import android.content.Context; import a ...
- TextView实现跑马灯效果
网上有很多跑马灯的介绍,有很多跑马灯的代码.或许我的不是最好的,但是应该很容易明白的. 我们先来介绍一个跑马灯的代码 <LinearLayout xmlns:android="http ...
- Android:TextView跑马灯-详解
Android:TextView跑马灯_详解 引言: TextView之所以需要跑马灯,是由于文字太长,或者是吸引眼球. 关键代码如下: android:singleLine="true&q ...
随机推荐
- Git | Git Server 搭建,在自己的服务器上进行 git server 搭建
系列文章目录 目录 系列文章目录 前言 操作 1. 创建 git 用户 2. 创建 .ssh 目录 3. 自定义仓库的根目录 4. 在服务器上创建个裸仓库 5. 手动配置一个公钥 6. 在本地测试一下 ...
- 智慧公安!3DCAT实时云渲染助力某公安机关打造数字孪生可视化系统
近年来,随着大数据.数字孪生.云计算.人工智能等技术的飞速发展,数字化浪潮席卷全国各地公安系统.2022年全国公安工作会议中也提到,数字化改革是推动公安工作创新发展的大引擎.培育战斗力生成新的增长点. ...
- 记录--服务端推送到Web前端有哪几种方式?
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 这个问题? 这个问题一般会出现在面试题里面,然后回答一些诸如轮询.WebSocket之类的答案.当然,实际开发中,也会遇到类似别人给你赞了 ...
- 常用命令--htpasswd--(网站加密)
常用命令htpasswd(网站加密) 常用选项 htpasswd 是一个用于创建和管理HTTP基本认证密码文件的命令行工具,通常与Apache Web服务器一起使用.以下是 htpasswd 常用选项 ...
- Python 汇总列数据到行
Python汇总Excel列数据到行(方法一) import pandas as pd # 读取Excel文件 df = pd.read_excel('C:\\Users\\liuchunlin2\\ ...
- 性能测试系列:高可用测试linux常用命令
一 linux常用 df –h 看磁盘 du –h –max-depth=1 查看当前目录下,各个文件夹大小 ls –lht 查看当前目录下,各个文件大小 top –H –p pid 看进程下线程的资 ...
- KingbaseES V8R6集群运维案例---数据块故障自动修复(auto_bmr)
案例说明: 在Oracle11.2版本之后,DataGuard 若搭建实时应用日志的物理备库,那么在主库数据文件少 量坏块的情况下,可以利用ABCR技术快速修复坏块. Starting in Orac ...
- STAR法则是什么(如何把一件事表达清楚)
STAR法则,即为Situation Task Action Result的缩写,具体含义是: Situation: 事情是在什么情况下发生 Task: 你是如何明确你的任务的 Action: 针对这 ...
- Scala 模式匹配拓展
1 package chapter08 2 3 object Test03_MatchTupleExtend { 4 def main(args: Array[String]): Unit = { 5 ...
- MySQL数据过滤和搜索
操作符 AND操作符 mysql> SELECT prod_id,prod_price,prod_name FROM products WHERE vend_id=1003 AND prod_p ...