## 前言大家好，我是大华。今天给大家分享一个酷炫的**蛇形时间轴动画组件**！在日常开发中，我们经常需要展示时间线信息。比如： * 公司发展历程 * 产品迭代历史 * 项目里程碑 * 个人成长轨迹传统的静态时间轴就是一条直线加几个点，视觉上非常单调，用户很容易走神。而今天分享的这个**蛇形时间轴组件**，具备以下三大优势： **视觉冲击力强**：波浪形布局 + 自动播放动画\ **交互体验好**：悬停显示详情，点击触发事件\ **高度可定制**：支持亮暗主题、多种配置选项 **效果图：** 波浪幅度的调节 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2b04f66e3bc54e678657885b92eb33fc~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5aSn5Y2O:q75.awebp?rk3s=f64ab15b&x-expires=1772415852&x-signature=5fLrlev7Jh1TOILsMD%2FLg6y46EY%3D) 主题色的切换 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ed9a440f013b4b5d9cc2bdf035c5481f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5aSn5Y2O:q75.awebp?rk3s=f64ab15b&x-expires=1772415852&x-signature=bZDYwfKKxNomgclKxSOipi6MBBY%3D) 数字和图标的切换 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/545822854ef94b9f8d03682c6752fbf7~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5aSn5Y2O:q75.awebp?rk3s=f64ab15b&x-expires=1772415852&x-signature=djI9%2BytnCh%2FNWI9va9nOApbBFvs%3D) *** ## 一、技术架构解析先来看看整体的组件结构： ```html ``` ### 五大模块分工明确： | 模块 | 功能说明 | | ----------------- | ------------------- | | `canvas` | 负责绘制时间轴图形（节点、连线、动画） | | `tooltip` | 鼠标悬停时展示节点详细信息 | | `control-panel` | 提供播放/暂停、快进等控制按钮 | | `config-panel` | 调整参数，实时预览效果 | | `loading-overlay` | 加载状态提示，提升用户体验 | *** ## 二、核心技术实现 ### 1. 双缓冲绘图优化性能如果直接在主`canvas`上频繁重绘性能开销会比较大。所以我们采用**双缓冲技术**提升渲染效率。 ```javascript // 初始化离屏 canvas offScreenCanvas.value = document.createElement('canvas'); offScreenCanvas.value.width = width; offScreenCanvas.value.height = height; offScreenCtx.value = offScreenCanvas.value.getContext('2d'); ``` #### 绘制流程： 1. **静态内容**（如背景、固定节点）绘制到离屏 canvas 2. **动态内容**（如进度动画、高亮效果）在主 canvas 上叠加 3. 每帧只重绘动态部分，大幅减少计算量 > 优势：避免重复绘制静态内容，显著提升帧率（可达 60fps） *** ### 2. 波浪形布局算法时间轴不再是笔直的线，而是优雅的**正弦波浪形**。 ```javascript const y = height / 2 + Math.sin(index * amplitude / 100) * amplitude; ``` #### 关键参数说明： | 参数 | 含义 | | ----------- | -------------- | | `amplitude` | 波浪幅度，控制上下波动的强度 | | `index` | 当前节点的序号 | | `height/2` | 基准线位置（居中） | > 效果：节点沿波浪线分布，形成“蛇形”视觉动效 *** ### 3. 动画进度控制使用时间驱动实现**无缝循环动画**。 ```javascript const now = Date.now() * speed; const activeIndex = Math.floor((now % 8000) / 8000 * nodes.length); ``` #### 技巧点解析： * `Date.now()`获取当前时间戳 * `speed`控制动画播放速度（可配置） * `8000`表示完整动画周期为 8 秒 * `%`实现循环播放，无缝衔接 > 用户看到的是一个自动“游动”的高亮节点，沿着时间轴前进 *** ### 4. 贝塞尔曲线连接节点之间使用**三次贝塞尔曲线**连接，比直线更柔和自然。 ```javascript ctx.bezierCurveTo( cpX1, cpY1, // 控制点1 cpX2, cpY2, // 控制点2 nextNode.x, nextNode.y // 终点 ); ``` > 效果：线条流畅，富有动感，增强整体视觉美感 *** ## 三、深入技术细节 ### 1. 响应式设计适配不同屏幕尺寸，使用 `ResizeObserver` 监听容器变化： ```javascript resizeObserver.value = new ResizeObserver(entries => { initCanvas(); // 尺寸变化时重新初始化画布 }); ``` #### 移动端特别优化： ```css @media (max-width: 768px) { .snake-timeline-container { height: 400px; } } ``` > 📱 保证在手机端也能清晰展示，交互友好 *** ### 2. 主题切换支持**亮色 / 暗色双主题**，通过计算属性动态切换： ```javascript const theme = computed(() => isDarkMode.value ? darkTheme : lightTheme ); ``` 所有颜色、描边、字体等均基于`theme`计算，切换主题只需修改`isDarkMode`状态。 > 适用于 PPT 演示、夜间模式等场景 *** ### 3. 性能优化技巧确保动画流畅运行在 60fps，关键优化手段： 1. 静态内容缓存到离屏 canvas 2. 使用 `requestAnimationFrame` 控制帧率 3. 减少不必要的重绘区域 4. 利用 CSS 硬件加速（如 `transform: translateZ(0)`） *** ### 4. 精准交互检测鼠标悬停检测使用**距离计算法**： ```javascript const distance = Math.sqrt( Math.pow(canvasX - node.x, 2) + Math.pow(canvasY - node.y, 2) ); node.isHovered = distance <= node.radius * hoverScale; ``` > 实现节点悬停识别，避免误触 *** ## 四、配置项详解组件提供丰富可配置参数，支持实时调整： ```javascript const config = ref({ nodeRadius: 14, // 节点半径 lineWidth: 4, // 连线宽度 animationSpeed: 0.8, // 动画速度（倍率） waveAmplitude: 120, // 波浪幅度 hoverScale: 1.3, // 悬停放大比例 showProgressDots: true // 是否显示进度点 }); ``` ### 实时调节面板示例： ```html

波浪幅度: {{ config.waveAmplitude }}

``` > 🛠️ 开发者或运营人员可自由调整样式，无需修改代码 *** ## 五、完整源代码 ```html ``` ## 六、扩展与优化方向 ### 1. 功能扩展 * 支持**垂直布局**（竖向时间轴） * 添加**缩放功能**（手势/滚轮控制） * 集成**图表联动**（点击节点联动数据图表） ### 2. 性能优化 * 使用 **WebGL** 替代 Canvas，提升复杂动画性能 * **虚拟列表**优化：仅渲染可视区域节点 * **离屏渲染**进一步拆分图层，减少重绘 ### 3. 设计优化 * 支持**自定义节点图标/图片** * 更多动画效果：如“蛇头游动”、“光效扫描” * 响应式布局增强，适配平板、折叠屏设备 *** ## 总结 1. **视觉效果突出**：波浪布局 + 流畅动画，吸引用户注意力 2. **交互体验流畅**：悬停、点击、控制面板响应及时 3. **高度可定制**：主题、动画速度、波浪幅度等均可配置如果你也需要展示时间线信息，不妨试试这个方案！代码已结构化，可直接集成或二次开发。 > 公众号：程序员刘大华，专注分享前后端开发的实战笔记。关注我，少走弯路，一起进步！ #### 📌往期精彩 [《工作 5 年没碰过分布式锁，是我太菜还是公司太稳？网友：太真实了！》](https://mp.weixin.qq.com/s/PIwQ3eSl5oIrtTMlDwpIxA) [《90%的人不知道！Spring官方早已不推荐@Autowired？这3种注入方式你用对了吗？》](https://mp.weixin.qq.com/s/IidHbuqgJE4iz6ZikOglkg) [《写给小公司前端的 UI 规范：别让页面丑得自己都看不下去》](https://mp.weixin.qq.com/s/T_7FNwO8FtwaYxzN9-5Btg) [《终于找到 Axios 最优雅的封装方式了，再也不用写重复代码了》](https://mp.weixin.qq.com/s/9RigwsjA5ShHXAD7Zdvhzw)

{{ activeTooltip.event }}