介绍
本示例主要介绍了数字滚动动效的实现方案。 该方案多用于数字刷新,例如页面刷新抢票数量等场景。
效果图预览
使用说明:
- 下拉页面刷新,数字进行刷新。
实现思路
- 通过双重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)
})
}
如下图所示:
- 通过
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; // 更新当前数据
- 使用显示动画 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轴偏移量
})
})
如下图所示:
- 设置数字所在容器属性
.clip(true)
,将多余的数字裁剪。
高性能知识点
无
工程结构&模块类型
digitalscrollanimation // har
|---pages
| |---DigitalScrollDetail.ets // 数字滚动组件
| |---DigitalScrollExample.ets // 功能页面
|---model
| |---ConstData.ets // 常量数据
写在最后
如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
- 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
- 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
- 想要获取更多完整鸿蒙最新学习知识点,请移步前往小编:
https://gitcode.com/HarmonyOS_MN