纯血鸿蒙APP实战开发——数字滚动动效实现

介绍

本示例主要介绍了数字滚动动效的实现方案。 该方案多用于数字刷新,例如页面刷新抢票数量等场景。

效果图预览

使用说明

  1. 下拉页面刷新,数字进行刷新。

实现思路

  1. 通过双重ForEach循环分别横向、纵向渲染数字。
Row() {ForEach(this.currentData, (item: number, index: number) => { // 横向渲染数字Column() {Column() {ForEach(this.dataItem, (subItem: number) => { // 纵向渲染数字Text(subItem.toString()) // 数字文本})}.translate({ x: 0, y: this.scrollYList[index] }) // 每个数字Y轴位移}.height(STYLE_CONFIG.ITEM_HEIGHT)})
}

如下图所示:

  1. 通过Math.random()生成随机数,并更新到currentData数组中。
let tempArr: number[] = [];
for (let i = 0; i < DATA_CONFIG.NUMBER_LEN; i++) {tempArr.push(Math.floor(Math.random() * 10)); // 向数组添加随机数
}
this.currentData = tempArr; // 更新当前数据
  1. 使用显示动画animateTo,对currentData数组中的每个数字执行不同的滚动动效。
this.currentData.forEach((item: number, index: number) => {animateTo({// 每个数字与上一次数字对比,数字差值越大,执行动画时长越长。duration: Math.abs(item - this.preData[index]) * DATA_CONFIG.DURATION_TIME,curve: Curve.LinearOutSlowIn, // 减速曲线onFinish: () => {this.preData = this.currentData; // 动画执行结束后,更新上一次数据值this.isRefresh = false; // 刷新完毕}},() => {this.scrollYList[index] = -item * STYLE_CONFIG.ITEM_HEIGHT; // 更新每个数字Y轴偏移量})
})

如下图所示:

  1. 设置数字所在容器属性.clip(true),将多余的数字裁剪。

高性能知识点

工程结构&模块类型

digitalscrollanimation                                // har
|---pages
|   |---DigitalScrollDetail.ets                       // 数字滚动组件 
|   |---DigitalScrollExample.ets                      // 功能页面 
|---model
|   |---ConstData.ets                                 // 常量数据 

模块依赖

当前场景依赖以下模块

  1. 动态路由模块,主要用于注册模块路由。

参考资料

animateTo

鸿蒙全栈开发全新学习指南

也为了积极培养鸿蒙生态人才,让大家都能学习到鸿蒙开发最新的技术,针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群,整理了一套纯血版鸿蒙(HarmonyOS Next)全栈开发技术的学习路线【包含了大厂APP实战项目开发】

本路线共分为四个阶段:

第一阶段:鸿蒙初中级开发必备技能

第二阶段:鸿蒙南北双向高工技能基础:gitee.com/MNxiaona/733GH

第三阶段:应用开发中高级就业技术

第四阶段:全网首发-工业级南向设备开发就业技术:https://gitee.com/MNxiaona/733GH

《鸿蒙 (Harmony OS)开发学习手册》(共计892页)

如何快速入门?

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识:gitee.com/MNxiaona/733GH

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙开发面试真题(含参考答案):gitee.com/MNxiaona/733GH

鸿蒙入门教学视频:

美团APP实战开发教学:gitee.com/MNxiaona/733GH

写在最后

  • 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
  • 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
  • 想要获取更多完整鸿蒙最新学习资源,请移步前往小编:gitee.com/MNxiaona/733GH

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/9849.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL数据库——23.元数据

MySQL 元数据 是关于数据库和表结构的数据&#xff0c;它包含了数据库中的各种信息&#xff0c;例如表的结构、索引、触发器、存储过程等。元数据存储在系统数据库中&#xff0c;主要包括以下几个系统表&#xff1a; information_schema: 这个数据库包含了 MySQL 数据库服务器…

Rancher简介

Rancher是一个容器管理平台&#xff0c;它提供了一套工具和功能来帮助用户轻松部署和管理容器化应用。 以下是Rancher的主要特点和功能&#xff1a; 多集群管理&#xff1a;Rancher能够集中管理多个Kubernetes集群&#xff0c;无论这些集群位于云上还是本地数据中心。认证与权…

Day 29 MySQL的主从复制集群

一&#xff1a;主从复制 1.主从复制概念 什么是主从复制&#xff1a; ​ 主从复制&#xff0c;是用来建立一个和主数据库完全一样的数据库环境&#xff0c;称为从数据库&#xff1b;主数据库一般是准实时的业务数据库 主从复制的作用&#xff1a; ​ 做数据的热备&#xf…

GPU云渲染平台选择应该看什么?瑞云渲染带你了解

在选择GPU云渲染平台时&#xff0c;关键的考量因素包括渲染速度、支持的软件兼容性、价格性价比以及用户服务质量。了解这些指标将帮助用户在众多选项中做出明智的选择&#xff0c;以优化渲染效率和成本效益。 一、GPU与渲染有什么关系 GPU与渲染有着密切的关系&#xff0c;在…

springboot增删改查

我的记录 RestController RequestMapping("/user") public class UserController {Autowiredprivate UserService userService;GetMapping("/list")public List<User> list(){return userService.list();}//新增PostMapping("/save")publi…

AS-VJ900实时视频拼接系统产品介绍:两画面视频拼接方法和操作

目录 一、实时视频拼接系统介绍 &#xff08;一&#xff09;实时视频拼接的定义 &#xff08;二&#xff09;无缝拼接 &#xff08;三&#xff09;AS-VJ900功能介绍 1、功能 2、拼接界面介绍 二、拼接前的准备 &#xff08;一&#xff09;摄像机选择 &#xff08;二&a…

Linux脚本 -- 监控用户态程序的内存分布

程序内存监控脚本使用说明 本文档旨在详细介绍如何使用特定的Shell脚本来监控Linux环境下一个应用程序的内存使用情况&#xff0c;并记录其变化。 脚本概述 脚本通过不断检测特定应用程序的内存映射&#xff0c;并对比连续两次的结果&#xff0c;如果发现有变化&#xff0c;…

高精度数据采集模块8路16位模拟量输入

M160E以太网远程I/O无线数据采集模块是一款工业级、隔离设计、高可靠性、高稳定性和高精度数据采集模块&#xff0c;嵌入式32位高性能微处理器MCU&#xff0c;集成2路工业10/100M自适应以太网模块里面。提供多种I/O&#xff0c;支持标准Modbus TCP&#xff0c;可集成到SCADA、O…

学习的体会,献给刚刚接触编程的你(7)

距离我上次更新博客时间有一年多了&#xff0c;中间我总是挣扎与颓废&#xff0c;博客一直没有更新。每天的工作占据了自己大量的时间&#xff0c;感觉自己没有生活感&#xff0c;自己就如同一个不能停止的机器一样,内耗严重&#xff0c;同时也没有获得任何成就感。 也许你现在…

基于FPGA实现的HDMI TO MIPI扩展显示器方案

FPGA方案&#xff0c;HDMI IN接收原始HDMI 信号&#xff0c;输出显示到LCD 屏上 客户应用&#xff1a;扩展显示器 主要特性&#xff1a; 1.支持2K以下任意分辨率显示 2.支持OSD 叠加多个图层 3.支持MIPI/EDP/LVDS/RGB屏 4.支持放大缩小匹配屏分辨率 5.零延时&#xff0c;输…

[力扣题解]77. 组合问题

题目&#xff1a;77. 组合 思路 回溯法 调试用代码 // 调试用 // 理解不了减枝那个值怎么设置的 class Solution { private:int order 0;vector<vector<int>> result; // 存放符合条件结果的集合vector<int> path; // 用来存放符合条件结果void backtra…

算法训练营day52,204. 计数质数

204. 计数质数 给定整数 n &#xff0c;返回 所有小于非负整数 n 的质数的数量 。 示例 1&#xff1a; 输入&#xff1a;n 10 输出&#xff1a;4 解释&#xff1a;小于 10 的质数一共有 4 个, 它们是 2, 3, 5, 7 。示例 2&#xff1a; 输入&#xff1a;n 0 输出&#xff1…

《ESP8266通信指南》15-MQTT连接、订阅MQTT主题并打印消息(基于Lua|适合新手|非常简单)

往期 《ESP8266通信指南》14-连接WIFI&#xff08;基于Lua&#xff09;-CSDN博客 《ESP8266通信指南》13-Lua 简单入门&#xff08;打印数据&#xff09;-CSDN博客 《ESP8266通信指南》12-Lua 固件烧录-CSDN博客 《ESP8266通信指南》11-Lua开发环境配置-CSDN博客 《ESP826…

Java面试题:什么是栈内存?它在Java中扮演什么角色?

在计算机科学中&#xff0c;栈内存&#xff08;Stack Memory&#xff09;是一种特殊的内存区域&#xff0c;用于存储程序运行时的局部变量、函数参数以及返回地址等信息。栈内存与堆内存&#xff08;Heap Memory&#xff09;相对&#xff0c;后者主要用于存储程序中动态分配的对…

【前端基础】CSS样式+Vue中绘制时间轴

深度选择器 在 Vue.js 中&#xff0c;/deep/、>>>、:deep 和 ::v-deep 这些都是深度选择器&#xff0c;用于修改子组件的样式。它们主要用于解决作用域样式和组件样式之间的冲突问题。 1. /deep/ 或 >>> /deep/ 和 >>> 是相同的选择器&#xff0c;…

2024OD机试卷-机器人搬砖 (java\python\c++)

题目:机器人搬砖 题目描述 机器人 搬砖,一共有 N 堆砖存放在 N 个不同的仓库中,第 i 堆砖中有 bricks[i] 块砖头,要求在 8 小时内搬完。 机器人每小时能搬砖的数量取决于有多少能量格,机器人一个小时中只能在一个仓库中搬砖,机器人的能量格只在这一个小时有效,为使得机…

【智能算法】正切搜索算法(TSA)原理及实现

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献5.代码获取 1.背景 2022年&#xff0c;A Layeb受到正切函数启发&#xff0c;提出了正切搜索算法&#xff08;Tangent Search Algorithm, TSA&#xff09;。 2.算法原理 2.1算法思想 TSAT基于正切函数的数学…

vue3对象数组格式的动态表单校验

如你有一个表单&#xff0c;表单内容是对象&#xff0c;但是对象内还有可动态循环的数组进行动态表单校验。 效果如图&#xff1a;查看源码 页面内容&#xff1a; <div class"arrForm-Box"><el-form :model"state.formData" :rules"rule…

mysql数据库调优篇章1--日志篇

目录 1.认识数据库中日志的作用2.增加mysql数据库中my.ini 基本配置3.增加my.ini中参数配置4.查看已经执行过的sql语句过去执行时间5.找出慢查询的sql6.常用参数查询命令7.认识慢查询日志记录8.认识通用日志记录&#xff08;记录增删改查操作&#xff09;9.认识二进制文件binlo…

一文了解spring事务特性

推荐工具 objectlog 对于重要的一些数据&#xff0c;我们需要记录一条记录的所有版本变化过程&#xff0c;做到持续追踪&#xff0c;为后续问题追踪提供思路。objectlog工具是一个记录单个对象属性变化的日志工具,工具采用spring切面和mybatis拦截器相关技术编写了api依赖包&a…