核心是数据变化驱动动画启动，需用watch监听并配合nextTick确保DOM更新后执行；HarmonyOS中应结合onMounted和节点存在判断；推荐CountUp.js或animateTo实现逐位翻滚效果，并加入stagger延迟与防抖节流。
核心在于“数据变化驱动动画启动”，不是手动调用，而是监听状态变更后自动触发滚动逻辑。关键不在动画库本身，而在监听时机与 DOM 更新节奏的配合。
监听数据变化用 watch，但要等 DOM 渲染完成
直接在 watch 回调里启动动画，容易因 DOM 还未更新而找不到目标元素或读取到旧值。必须包裹在 nextTick 中：
- Vue 项目中：用
watch(() => props.data, () => { nextTick(() => startAnimation()) }) - HarmonyOS NEXT 中：用
@Watch('isRefresh') onDataRefresh() { if (!this.isRefresh) { this.refreshData(); } }，并在refreshData内部确保数字节点已就绪再调用animateTo - 避免在 watch 初次执行时立即动画——此时组件可能还未挂载，应加节点存在判断或使用 onMounted 后再开启监听
选对动画库，按需配置参数
CountUp.js 轻量、可控，适合多数业务场景；HarmonyOS 原生推荐用 animateTo 配合 Y 轴偏移模拟滚动感。两者都需关注三个参数：
- duration：建议 1.5–2.5 秒，太短显突兀，太长拖节奏
- decimalPlaces：根据业务精度设，如销售额保留 1 位小数，增长率保留 2 位
-
useGrouping：国内习惯不加千分位（如 10000 → 10000），设为
false更符合阅读直觉
滚动效果要“真滚动”，别只做数字渐变
单纯数字从 0→100 的 opacity 或 scale 动画属于“数值增长”，不算滚动。真正滚动效果需模拟物理翻牌或数字轮盘：
- CountUp 默认是线性数值过渡，可配合 CSS
background: linear-gradient+background-position滚动实现“数字条”滑动视觉 - HarmonyOS NEXT 推荐每个数字位拆成独立
Text组件，用translateY控制其上下位移，通过animateTo让每个数字从顶部滑入、旧数字滑出，形成逐位翻滚感 - 避免所有数字同时滚动——加入 stagger 延迟（如每位差 80ms），增强真实机械感
防抖+节流，避免高频刷新卡顿
数据源若来自实时接口（如每秒推送的成交额），连续触发 watch 会导致动画堆叠、界面卡死：
- 在数据接收层加防抖，例如 300ms 内只取最后一次值
- 动画启动前检查上一次动画是否结束（CountUp 实例有
reset()和update()方法可复用） - HarmonyOS 中可结合
isAnimating标志位，animateTo的 onComplete 回调里置为 false，防止重复触发
