做加密货币银行应用时,我遇到了一个界面难题:价格每秒都在变,数字直接跳变显得廉价。我想要那种机械里程表的质感——数字像老虎机一样逐个滚过,而不是生硬地切换。
搜了一圈现有的 Compose 动画库,发现热门方案都用 AnimatedContent 让旧数字淡出、新数字滑入。效果不差,但中间值全被跳过了。我要的是 2→3→4→5,每一帧都看得见。
![]()
翻遍论坛、用谷歌翻译查各国帖子,没找到完全匹配的。于是我开始动手造轮子,结果叫 compose-rolling-text。过程踩了不少坑。
![]()
第一版思路很直接:每个数位渲染一个竖直的 Column,里面塞 0 到 9,然后滚动。像 iOS 的选择器。能跑,但问题一堆:六个数位就是 60 个子项,每帧都触发繁重布局;滚动时基线微颤,数字像在半像素跳动;低端设备直接掉帧。
第二版换了策略:放弃给每个数字单独建组件,改用一根超长的多行字符串。比如从 2 滚到 5,就拼出:
5
4
3
2
![]()
塞进一个固定高度的 Box,clipToBounds 裁切,动画控制纵向偏移。一个 Text 组件、一次动画、不跟布局系统纠缠。
关键突破是 Modifier.graphicsLayer。最初用 offset 或 padding 做位移,每帧都触发重测,父容器对齐还会漂移。graphicsLayer 把位移放到 GPU 的绘制阶段,布局系统以为文本没动,只有像素在滑。丝滑,且居中稳如磐石。
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.