粒子时钟通过将时间字符转为点阵坐标生成粒子，用缓动函数模拟加速-惯性-减速运动，并添加随机偏移、旋转及冒号闪烁实现科技感动态效果。
把时间转成粒子坐标
先获取当前时间（new Date()），格式化为 "HH:MM:SS" 字符串；再逐字符处理：每个数字或冒号对应一个“字符区域”，比如数字 "8" 可映射到预设的点阵模板（7×10 像素格），把所有“亮起”的像素位置转为粒子初始坐标。这样，每个数字就变成几十个带位置信息的粒子对象。
关键细节：
- 粒子不直接画文字，而是按点阵规则生成；点阵越密，显示越清晰，但性能开销越大
- 冒号用两个小圆点实现，单独作为一组粒子，支持闪烁逻辑（每秒 toggle 透明度）
- 所有粒子初始状态设为“未就位”，后续靠动画驱动它们飞向目标位置
设计粒子运动行为
粒子不是匀速飞过去，而是要有“抵达感”：开始加速、中途惯性、临近减速。可用缓动函数如 easeOutQuad 控制位移比例。同时加入微扰动，避免所有粒子路径雷同：
- 给每个粒子加一个随机偏移量（±3px），再叠加轻微旋转或缩放变化
- 设置“就位容差”，当粒子距离目标
- 秒数变化时，旧数字的粒子向外发散消失（速度随机+透明度归零），新数字粒子从中心迸发汇聚
实时刷新与性能优化
不能每秒重绘全部粒子——那样会卡顿。正确做法是：
- 用
requestAnimationFrame驱动主循环，帧率稳定在 60fps - 只在秒数变化时（
seconds !== lastSeconds）重建目标坐标，其余帧只更新粒子状态和绘制 - Canvas 清屏不用
clearRect全清，改用半透明黑色覆盖（ctx.fillStyle = 'rgba(0,0,0,0.1)'; ctx.fillRect(0,0,w,h)），保留残影增强动感 - 粒子数量控制在 300–600 个之间，超出则自动降级点阵精度
增强视觉表现力
纯色粒子容易单调，可叠加几层效果提升质感：
- 粒子边缘加 1px 模糊光晕（用两次
shadowBlur+ 不同颜色模拟） - 鼠标靠近时，附近粒子轻微放大并提高亮度（监听
mousemove计算距离衰减） - 每分钟整点，所有粒子短暂悬浮后重新排列，形成一次轻量“重置动画”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
