传送带动画是前端动效里一个很经典的命题。不管是设备官网首屏、产线监控大屏，还是游戏里的资源运输场景，传送带都是“工业感”和“运动感”的最直接表达。我最早接触这个需求，是给某设备展示页做场景动态效果，那时候甲方就一句“让皮带动起来”，但实际动起来之后，问题接踵而至：动画不连贯、物料和皮带速度对不上、CPU占用还高得离谱。后来我逐渐把CSS、SVG、Canvas三条技术路线都走了一遍，才算把“传送带动画”这件事彻底看透。

这篇文章我会把三条技术路线的实现原理、核心细节、踩坑经验完整拆开讲，重点是解释每个关键参数为什么这样定、为什么有的方案只适合特定场景。无论你是刚入行的前端，还是想给可视化项目添加动效的开发者，应该都能从中找到可以直接复用的思路。

1. 先想清楚：传送带动画的核心不是“动”，而是“循环”

很多第一次写传送带动画的人，容易被“动画”两个字带偏，上来就直接给元素加一个位移动画，结果要么动画结束瞬间跳回原点，要么皮带纹理和辊轮运动完全脱节。这里的关键是：传送带本质上是一个周期性运动，视觉上必须做到无缝循环，观众才看不出破绽。

1.1 拆解传送带的视觉结构

一条看起来合格的传送带，至少包含三层视觉元素：

• 皮带本体：通常是深色带状区域，上面有一道道横向纹路，用来表现皮带表面的粗糙感。纹路是判断传送带是否在运动的关键参照物。
• 辊轮：皮带两端或中间的圆形滚筒，皮带绕在辊轮上，辊轮旋转方向要和皮带移动方向匹配。
• 物料：放在传送带上的箱子、原料、产品等。物料移动速度必须和皮带表面速度一致，否则看起来就像“漂移”。

这三层里，最容易被忽略的是“纹路周期”。纹路是重复排列的，动画每一帧移动的距离如果不是纹路周期的整数倍，循环切换时就会产生一次肉眼可见的跳跃。这一点在后续三种实现方案里都是同一个底层逻辑。

1.2 两条技术路线：平移纹理与绘制纹理

实现传送带动画，本质上只有两条思路。

第一条是“移图”：把传送带纹路做成一张平铺的背景图或者一个渐变图案，然后按固定方向循环移动它。用CSS的background-position、SVG的stroke-dashoffset、Canvas里的translate平移纹理，都属于这种思路。优点是性能好、实现简单，适合规则直线传送带。

第二条是“画图”：每一帧重新绘制传送带的纹理和物料，通过Canvas的requestAnimationFrame逐步更新坐标。优点是灵活，可以处理不规则路径、随机物料、碰撞检测，缺点是代码量和性能开销相对高。

两条路线并不冲突，很多成熟项目里甚至组合使用：底层皮带纹理用移图，上层物料用画图。理解了这一点，后面所有实现细节就都围绕“怎么让移动的距离匹配纹理周期”展开了。

2. CSS方案：一条无限循环传送带的完整实现

如果传送带是横向直线，且场景里没有复杂交互，CSS是目前性价比最高的方案。不需要引入任何库，一个元素加两个关键帧就能跑起来，而且浏览器对CSS动画有专门优化，不会占用主线程。

2.1 用 background-position 让纹路匀速移动

先看最基础的版本。假设传送带区域是一个div，宽度任意，高度是120px，纹路用repeating-linear-gradient画出来：

.conveyor-belt { width: 100%; height: 120px; background-color: #2a2a2a; background-image: repeating-linear-gradient( 90deg, #3a3a3a 0px, #3a3a3a 20px, #2a2a2a 20px, #2a2a2a 40px ); background-size: 40px 100%; animation: beltMove 1s linear infinite; } @keyframes beltMove { from { background-position: 0 0; } to { background-position: -40px 0; } }

这里的核心参数就是40px。background-size设置为纹路一个周期的宽度，动画终点位移也是-40px，这样动画从from到to结束的瞬间，纹路位置正好回到起点处，实现无缝循环。时间设置成1s，代表纹路移动速度是40px/s。如果希望更快或更慢，同时调整周期和位移即可，但一定要保持“位移 = 纹路周期 × 整数”。

2.2 无缝循环的关键：动画位移必须等于纹路周期

很多人写背景平移动画时，会习惯性地写成：

@keyframes beltMove { from { background-position: 0 0; } to { background-position: -100% 0; } }

如果background-size和background-repeat没配合好，这个写法在动画结束后会出现闪烁或跳变。原因很简单：-100%并不是一个和纹路周期严格对齐的值，浏览器在计算百分比背景位置时，会受容器尺寸影响。一旦容器宽度不是纹路周期的整数倍，终点和起点就不在同一个视觉位置。

正确的做法是固定一个像素位移量，并且让这个位移量等于背景纹理中一个完整重复单元的宽度。此前用repeating-linear-gradient时，一个纹理单元是40px，位移-40px。如果是外部的图片纹理，需要保证图片本身是横向无缝平铺的，并且把background-size设成周期宽度 100%。

2.3 辊轮旋转与皮带速度的联动逻辑

很多CSS传送带动画里，皮带动起来了，但两端的辊轮要么不动，要么随便转个方向，看起来非常假。实现辊轮与皮带联动，不需要写JavaScript，只要算好旋转速度和皮带线速度的关系。

辊轮的视觉本质是一个圆形。辊轮边缘上某一点的线速度，必须等于皮带的移动速度，否则会有“打滑”感。设皮带移动速度为v（单位px/s），辊轮直径为D（单位px），那么辊轮表面线速度也是v，对应的角速度是v / (D/2)，即每秒弧度2v/D。

如果CSS动画的皮带移动位移是d，动画时长是t，那么皮带速度v = d/t。辊轮在一整个动画周期内需要转过的角度是：

[ \theta = \frac{2d}{D} ]

举个例子：皮带一个周期位移d = 40px，辊轮直径D = 80px，那么一个周期内辊轮应旋转2*40/80 = 1弧度，约等于57.3度。所以辊轮的CSS可以写成：

.roller-left { width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, #555, #222); animation: rollerRotate 1s linear infinite; } @keyframes rollerRotate { from { transform: rotate(0deg); } to { transform: rotate(57.3deg); } }

注意这里动画时长同样是1s，皮带移动40px，辊轮旋转57.3度，两者视觉速度才匹配。如果要更直观，也可以让辊轮旋转360度并把时长按比例调整，但计算起来不如直接算角度省事。

2.4 悬停暂停与速度切换是必备细节

真实项目里，传送带动画很少只是一直在那里转。常见需求是鼠标悬停时暂停，方便用户看清物料细节；或者通过滑块控制速度。CSS实现暂停非常直接：

.conveyor-wrap:hover .conveyor-belt, .conveyor-wrap:hover .roller-left, .conveyor-wrap:hover .roller-right { animation-play-state: paused; }

速度切换则需要用到CSS自定义属性。把动画位移和时长都改成变量：

.conveyor-belt { background-position: 0 0; animation: beltMove var(--move-duration, 1s) linear infinite; }

然后在JavaScript里给容器修改--move-duration的值。但要注意：修改动画时长后，动画不是从当前帧平滑续接，而是按新的周期重新开始。如果要丝滑变速，更稳妥的方案是改用Canvas，或者在CSS里同时修改animation-delay做补偿。这一点我在项目里试过，CSS变速适合“分段档位切换”，不适合连续调速。

3. SVG方案：直线之外的曲线传送带

CSS方案在处理横向直线传送带时很顺手，但一旦传送带需要转弯、走弧形，或者物料需要沿着皮带路径精确移动，CSS就非常吃力了。这种场景我建议直接换成SVG，因为SVG天然支持路径，stroke相关属性可以模拟皮带纹路，animateMotion可以让物料跟着路径走。

3.1 为什么说CSS做不了曲线传送带

CSS的background-position只能沿x轴或y轴平移，没法让纹理沿着一条弧形路径运动。虽然可以用多个分段拼接，但曲线两侧的透视关系、纹路走向都会出问题，维护成本也高。SVG则不同，它的核心是<path>，传送带无论多复杂，本质上就是一条宽路径，天然适合做轨迹动画。

一个简单的曲线传送带可以用两条平行路径组成“皮带两边”，中间用粗的stroke填充色，再叠加一层虚线或短横线纹理来表示皮带纹路。

3.2 stroke-dasharray 和 stroke-dashoffset 实现纹路流动

SVG里一个很有用的技巧，是用stroke-dasharray把路径变成虚线，然后通过修改stroke-dashoffset让虚线在路径上流动。这本质上也是“移图”，只是移动的不再是像素，而是路径上的虚线偏移量。

核心代码可以这样写：

<svg width="600" height="300" viewBox="0 0 600 300"> <path id="conveyorPath" d="M 50 150 C 200 50, 400 250, 550 150" fill="none" stroke="#444" stroke-width="30" stroke-linecap="round"/> <use href="#conveyorPath" stroke="#666" stroke-width="30" stroke-dasharray="12 18" fill="none"> <animate attributeName="stroke-dashoffset" from="0" to="-30" dur="0.5s" repeatCount="indefinite"/> </use> </svg>

这里stroke-dasharray="12 18"表示一段实线12px、一段空白18px，加起来是30px的周期。stroke-dashoffset从0变为-30，正好移动了一个完整周期，所以动画无缝循环。这个原理和CSS的background-position完全一样，只是把“位移动画”变成了“虚线偏移动画”。

3.3 用 animateMotion 让物料沿传送带移动

皮带纹路流动解决了，接下来就是让物料跟着曲线路径走。SVG的<animateMotion>可以直接让一个图形沿着指定路径运动：

<g> <rect x="-15" y="-10" width="30" height="20" fill="#f59e0b" rx="3"/> <animateMotion dur="3s" repeatCount="indefinite"> <mpath href="#conveyorPath"/> </animateMotion> </g>

需要注意的是，<animateMotion>有它的局限性：它只能匀速沿路径走，不能定义“到达路径终点后等待一段时间再重新开始”，也不支持路径中途的变速。如果物料需要在传送带末端停一下再进入下一道工序，就得在路径设计上做文章，比如把等待段也画进路径里，或者用keyTimes和keyPoints控制在指定区间暂停。

3.4 曲线路径上的纹理重复问题

使用stroke-dasharray做的纹理，在弧形路径上可能出现一个不太明显的“鼓包”现象：因为虚线是按路径长度计算的，曲线外侧的视觉密度会比内侧稀疏。对于传送带这种宽度固定的带状物体，这个现象通常不影响观感，但如果皮带很宽，就会发现边缘纹路明显不齐。

我当时处理这个问题的思路是：不追求纹理在边缘完全对齐，而是把stroke-width控制在较小范围，比如4px以内，让虚线看起来像皮带上的横向刻痕而不是一条粗纹理。另一个更精细的方案，是把皮带的纹路直接用多个短线段手动放置在路径法线方向上，但工作量较大，除非项目对视觉效果要求特别高，否则没必要。

4. Canvas方案：当传送带需要承载数据与交互

CSS和SVG适合做“展示型”传送带，但如果你要做的是产线可视化大屏、数字孪生看板，或者需要实时显示每个物料的状态、数量、合格率，那么Canvas几乎是唯一选择。Canvas的传送带不是一个样式效果，而是一个“运行中的模拟系统”。

4.1 什么场景应该选Canvas而不是CSS和SVG

我这里有一个很简单的判断标准：如果传送带上的物料数量是固定的、样式是写死的，用CSS/SVG完全够；如果物料数量是动态的，或者每个物料都有自己的ID、状态、颜色、文本标签，就一定要用Canvas。

举个例子，模拟产线上有几十箱货物，每箱货物分别标着A、B、C三种状态，并且鼠标点击时可以查看当前箱子的详细信息。这个需求如果用DOM去做，要创建几十个元素、处理点击事件、还要和传送带纹理同步，性能和复杂度都不划算。Canvas只需要维护一个物料数组，渲染和点击检测都在同一个坐标系里完成。

4.2 绘制一个可复用的传送带函数

Canvas绘制传送带的基本思路是：先画底带，再画纹路，最后画物料。纹路部分每一帧都根据一个全局偏移量重新绘制。为避免每一帧重复计算静态纹理，可以先把皮带本体和纹路绘制到一个离屏Canvas上，然后每帧只需drawImage把这个离屏画布画到当前位置，同时改变源坐标位置，实现无缝滚动。

一个最小实现的骨架如下：

const canvas = document.getElementById('conveyor'); const ctx = canvas.getContext('2d'); const beltWidth = canvas.width; const beltHeight = 120; const patternPeriod = 40; let offset = 0; let lastTime = 0; // 离屏Canvas缓存皮带纹理 const offscreen = document.createElement('canvas'); offscreen.width = beltWidth + patternPeriod; // 多画一个周期，避免抽帧时露底 offscreen.height = beltHeight; const offCtx = offscreen.getContext('2d'); for (let x = 0; x < offscreen.width; x += patternPeriod) { offCtx.fillStyle = x % (patternPeriod * 2) === 0 ? '#3a3a3a' : '#2a2a2a'; offCtx.fillRect(x, 0, patternPeriod, beltHeight); } function render(timestamp) { const dt = (timestamp - lastTime) / 1000; lastTime = timestamp; const speed = 100; // px/s offset = (offset + speed * dt) % patternPeriod; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage( offscreen, -offset, 0, offscreen.width, beltHeight, 0, 0, canvas.width, beltHeight ); // 这里继续绘制物料 requestAnimationFrame(render); } requestAnimationFrame(render);

关键在于用dt计算每帧位移，这样动画速度不会因为显示器刷新率不同而变化。如果直接用固定值累加，在144Hz和60Hz屏幕上跑出来的速度会差很多。

4.3 物料随机生成与碰撞检测

物料在Canvas里其实就是一个包含坐标、大小、速度的对象数组。每一帧更新坐标，然后绘制即可。但有两个细节稍不注意就会很假：一是物料间距要随机，不要所有箱子间隔相等；二是物料之间不应该重叠。

间距随机可以在生成时给每个物料设置不同的初始间隔，但更新时仍要保持移动速度一致。碰撞检测则更简单：如果新物料和上一个物料之间的距离小于预设最小值，就等待一个时间再生成。对于大多数传送带模拟来说，不需要做物理碰撞，因为传送带上的物料之间本身不会互相超越，速度相同的情况下，只要初始间距合理，就不会重叠。

4.4 性能优化：离屏Canvas、像素比与requestAnimationFrame

Canvas传送带动画在物料数量超过100个时，很容易出现卡顿。优化的优先级我一般这样排：

• 能把静态部分缓存到离屏Canvas的，坚决不要每帧重画。皮带纹理就是最好的缓存对象。
• 画面清晰度不够时，先检查canvas.width和height是否乘了devicePixelRatio，不要只改CSS宽度。
• 如果物料是简单的矩形或者圆形，直接fillRect和arc绘制，不要用drawImage加载一堆图片。
• requestAnimationFrame是必须的，不要用setInterval。前者会根据显示器刷新率自动对齐，而且页面不可见时会自动暂停，省下无谓的CPU消耗。

我曾经在一个大屏项目里同时挂了4条Canvas传送带，每条带上30个物料，一帧绘制量并不大，但因为每帧都在创建路径对象、渐变对象，导致帧率直接掉到20。后来把所有渐变和路径都提到循环外创建，帧率才稳定在60。Canvas性能优化的核心就是“别在渲染循环里做对象分配”。

5. 实测中的坑：动画卡顿、锯齿和单位换算

传送带动画虽然看起来不大，但实际落地时坑非常多。这里集中说几个我反复踩过的，同时也是代码审查时最容易忽视的细节。

5.1 非整数位移带来的周期跳变

如果纹路周期是40px，但每次位移量写成0.4px，那么经过100帧后累计位移是40px没错，但某些浏览器在处理半像素渲染时会出现纹路边缘发虚、甚至周期跳变。尤其是使用background-position时，动画终点如果写成-100.5px，循环切换瞬间就会看到明显抖动。

解决方案很简单：位移量尽量使用能整除的数值，比如-40px。如果是Canvas，逻辑上的offset可以是小数，但绘制时最好Math.floor到整数像素，必要时用imageSmoothingEnabled关闭平滑。纹路的边缘够清晰，观感反而更好。

5.2 硬件加速导致的白色闪屏

CSS动画中，给传送带元素加上transform: translate3d(0, 0, 0)或者will-change: background-position可以提升性能，但在部分GPU驱动下会触发合成层重绘，出现白色闪屏。这个坑很难复现，我排查了很久才定位到是will-change引发的问题。

核心原则是：能用transform做位移动画的，就不要用background-position。但传送带纹路的background-position动画本质上是背景位置变化，没法直接用transform。如果遇到闪屏，可以尝试把纹路改成一个独立元素，用transform: translateX()做位移，这样更容易走GPU加速。

5.3 后台标签页的时间差问题

CSS动画在浏览器标签页切到后台时会自动暂停，这没有问题。但Canvas方案如果用了requestAnimationFrame，切回页面时第一帧的timestamp可能和上一帧相差很大，如果直接用这个差值去推进物理位置，传送带会突然跳一大段。

正确做法是给时间差设置上限：

const dt = Math.min((timestamp - lastTime) / 1000, 0.1);

当切回页面时，最多只允许推进0.1秒的位移，避免肉眼可见的瞬移。这个小技巧在我做监控大屏时非常重要，否则演示时切换页面再回来，物料位置全乱了。

5.4 单位换算是“速度匹配”的重灾区

在CSS方案里，皮带纹路移动速度可以用px/s表示；在SVG方案里，路径速度是长度/s；在Canvas方案里，又是坐标位移/s。同一个需求，三个方案中速度参数完全不相通。如果项目中既有CSS传送带，又有Canvas物料层，两者速度必须对齐。

我通常在项目里约定一个统一速度常量，比如beltSpeed = 120，所有方案都基于这个值换算：

• CSS位移周期：patternPeriod = 40，动画时长 =patternPeriod / beltSpeed= 0.333s；
• Canvas每帧位移：beltSpeed * dt；
• SVG虚线偏移：dashPatternLength / beltSpeed的周期时长。

这样即使混合使用，也不会出现皮带速度比物料快或者慢的违和感。

6. 真实项目心得：传送带动画如何融入整体动效系统

最后这部分不是教程，而是我几次完整项目过后的一些体会。传送带动画单独看是一个小功能，但放进整个页面时，它很容易成为视觉噪音。很多开发者把动画做得非常炫，结果用户注意力全被传送带吸走了，核心内容反而没人看。

6.1 视觉层级：皮带永远是背景，不是主角

传送带在大多数页面里应该是“氛围层”，它不是用户操作的核心对象。所以颜色饱和度不要太高，纹理对比度适中，动画速度也不要太快。一般来说，传送带的运动速度控制在60~120px/s之间比较舒服，低于这个范围显得像静止，高于这个范围容易让人眼花。

如果页面需要强调某个物料或产品，可以让传送带速度不变，但让该物料的背景加一圈发光效果，而不是让传送带停下来。我见过有人为了让用户注意某个箱子，直接把传送带动画暂停，结果整体页面突然“死掉”，观感很生硬。

6.2 和滚动、悬停交互结合的几种做法

传送带动画最自然的结合方式有三种。

第一种是滚动驱动：页面滚动时，传送带根据滚动进度前进或后退。这种效果在品牌展示页里很出彩，实现也简单——监听scroll事件，把滚动距离映射到传送带偏移量。

第二种是悬停加速：鼠标移入传送带区域时，速度从当前的慢速平滑提升到正常速度。这个用CSS做变速不完美，可以用Canvas实现。用两个速度值做插值，每帧逐渐递增，效果比瞬时切换柔和得多。

第三种是点击投放：点击页面某个按钮，一个物料从传送带一端进入，然后按预定路径移动。这个几乎只能在Canvas里完成，因为需要响应式地创建新的物料对象。

这三种做法都不会改变传送带的基础运动逻辑，只是在外部叠加了交互控制层。

6.3 从2D到2.5D：伪立体传送带的扩展方向

如果做腻了纯平面传送带，可以试试2.5D效果。方法并不复杂：先用CSS透视变换transform: perspective(...) rotateX(...)把传送带压成倾斜平面，再叠加阴影和顶部高光，模拟从斜上方看产线的角度。纹路位移和辊轮动画的逻辑不变，只是坐标系变了。

另一种做法是分层：近处的大辊轮和远处的小辊轮同时存在，近处运动快、远处运动慢，配合景深模糊，立刻有了纵深感。实测表明这样做的视觉冲击力远大于纯平面效果，而且性能开销增加不大。我最后再分享一个小技巧：做伪3D传送带时，纹路的移动方向不要和屏幕边缘平行，稍微倾斜一点，立体感会强很多。

传送带动画说到底是一个循环运动的基本功。把它背后的“周期对齐”想清楚，CSS、SVG、Canvas三个方案就都是同一套原理的不同表达。你从哪个方案入手都可以，只要先记住：无缝比炫技更重要。