用Canvas和JavaScript实现程序化跑步循环动画-平芜编程栈

开发游戏动效或者做 H5 交互动画时，角色跑步动画是绕不开的练习题材。网上跑步动画的资源很多，但大多数是 Gif 或者现成素材，真正从零开始用代码控制“跑步姿势”的教程比较少。这篇文章会从关键帧概念切入，用 HTML5 Canvas 和原生 JavaScript 实现一个完整的程序化跑步循环动画，代码可以直接运行，也能作为后续做骨骼动画、状态机动画的入门练习。

本文适合以下读者：

刚接触 Canvas 动画，想做一个动态角色练习。
做游戏开发，想理解跑步循环的相位控制和关键姿势。
想从“逐帧动画”思维转变成“参数化关节动画”思维的开发者。

读完本文后，你能掌握跑步动画的循环结构、角色关节建模方法、用正弦波控制四肢摆动的基本技巧，以及一套可以调节频率、步幅和抬膝幅度的完整示例代码。

1. 跑步动画的核心概念

1.1 跑步动画要解决什么问题

跑步动画要表现的核心内容是：角色在周期性摆臂迈腿过程中保持稳定、有节奏、有重量的运动感。

如果只是让腿前后摆动，做出来的效果往往会像“滑冰”，因为身体重心、膝盖弯曲、手臂摆动、躯干前倾这些细节没有配合。反之，如果每一帧都手工绘制，工作量大而且难以复用，所以目前游戏和交互动画中更常用的方式是：

逐帧精灵图动画，也就是把一整套跑步姿势拆成若干帧图片连续播放。
程序化动画，通过参数控制关节角度，实时生成跑步姿势。

本文采用第二种方案。程序化动画的好处是只需要控制几个关键参数，就能调节步幅、频率和抬膝高度，而且理解和练习起来比较直观。

1.2 跑步循环中的关键姿势

一个完整的跑步循环，通常是指同一条腿从“落地”到“再次落地”的整个过程。为了方便理解，可以把一个跑步循环拆成四个关键姿势：

姿势	腿部状态	视觉特征
落地	前腿微屈触地，后腿弯曲准备向前	身体重心较低
蹬伸	后腿向后伸直，前腿折叠向前摆动	身体获得向前推力
腾空	两条腿都离地，身体上升	身体重心最高
前摆	摆动腿向前上方抬起，膝盖弯曲明显	为下一次落地做准备

需要注意的是，一个完整循环内两条腿相差半个周期。也就是右腿落地时，左腿正好处于摆动阶段，两者交替进行。

1.3 为什么选择 Canvas + JavaScript

练习跑步动画不一定需要游戏引擎。使用 Canvas + JavaScript 的好处在于：

环境简单，一个浏览器即可运行。
动画逻辑完全由代码控制，方便理解关节角度、时间轴和循环周期。
可以快速调节参数，实时观察动作变化。

如果后续要进入 Unity、Godot 等引擎，本文中的相位和关键帧思路同样适用，只是把数学控制映射到 Animator 状态机或动画曲线中。

2. 环境准备与项目结构

2.1 运行环境

本文示例不需要安装任何第三方库，也不需要构建工具。

环境要求：

任意现代浏览器，推荐 Chrome 或 Edge。
文本编辑器，VS Code 即可。
可选装 Live Server 插件，用于本地预览。

版本不需要特别指定，因为代码只依赖浏览器原生 Canvas API 和 JavaScript 基本语法。

2.2 项目目录

创建一个项目文件夹，结构如下：

run-animation-practice/ └── index.html

将最终代码保存到index.html，用浏览器双击打开，或者通过 Live Server 启动即可。

2.3 动画的帧率处理方式

在现代浏览器中，动画驱动优先使用requestAnimationFrame。它可以根据显示器刷新率自动调用绘制函数，比setInterval更平滑。

由于不同设备刷新率不同，常见做法是记录相邻两帧的时间差dt，用它累加动画时间，避免“在高刷屏上跑得快、在普通屏上跑得慢”的问题。

let lastTime = 0; let animTime = 0; function loop(timestamp) { if (!lastTime) { lastTime = timestamp; } const dt = Math.min((timestamp - lastTime) / 1000, 0.05); lastTime = timestamp; // 动画时间累加，后续用它驱动跑步循环 animTime += dt; requestAnimationFrame(loop); } requestAnimationFrame(loop);

其中Math.min(..., 0.05)是为了防止切换浏览器标签页后，dt过大导致动画瞬间跳跃。

3. 角色身体模型设计

3.1 关节与父子关系

为了让角色像真正的人，我们需要用一个简化的身体模型。这个模型由若干“骨骼段”组成，每一段由起点坐标、方向和长度决定。

本文使用侧视图角色，面朝右，简化模型如下：

● 头部 | 肩部——● 躯干 | 髋部——● 髋关节 / \ / \ 大腿 大腿 | | 小腿 小腿

部件关系：

躯干从髋部出发，方向向上。
头部在躯干末端继续延伸。
手臂从肩部出发。
腿部从髋部出发。

这种模型本质上是一个“简化骨骼”，对初学者非常友好。

3.2 角度约定

在 Canvas 中，y 轴方向朝下，所以先约定角度含义，后面代码才不会混乱：

angle = 0时，方向朝右。
angle = Math.PI / 2时，方向朝下。
angle = Math.PI时，方向朝左。
angle = -Math.PI / 2时，方向朝上。

腿部自然下垂时，角度为Math.PI / 2。大腿向前摆动时，角度应该小于Math.PI / 2；向后蹬地时，角度大于Math.PI / 2。

3.3 身体比例参数

所有身体比例统一放在代码顶部，方便调节：

const TORSO_LENGTH = 80; const LEG_UPPER = 65; const LEG_LOWER = 65; const ARM_UPPER = 45; const ARM_LOWER = 42; const HEAD_RADIUS = 16;

这些比例并不需要完全符合人体结构，重点是让角色看起来协调。想要更修长，可以调大腿和小腿的长度；想要更卡通，可以把头调大。

4. 跑步循环的数学控制

跑步循环的核心是“相位”，也就是在一个循环中处于什么位置。我们可以用一个0到1之间的变量表示相位：0表示循环开始，1表示循环结束。

4.1 频率与相位

动画时间animTime累加后，取小数部分就是当前相位：

const cycle = ((animTime * speed) % 1 + 1) % 1;

这里的speed表示每秒完成的跑步循环次数，比如2.4表示每秒跑完 2.4 个完整循环。

4.2 腿部相位与膝盖弯曲

大腿摆动可以使用正弦波控制：

const hip = Math.sin(TWO_PI * cycle) * stride;

当stride越大，腿部前后摆动幅度越大，也就是步幅更大。

膝盖弯曲不能一直保持同一个幅度。跑步时通常表现为：

大腿前摆时，膝盖弯曲明显，小腿向后折叠。
大腿后蹬时，膝盖接近伸直。

因此膝盖弯曲幅度可以用下面方式近似：

const swing = Math.max(0, Math.sin(TWO_PI * cycle)); const knee = swing * kneeMax + 0.06;

这里的kneeMax是抬膝参数，值越大，摆动腿的小腿折叠越明显。

4.3 手臂与身体的配合

手臂摆动的相位和腿部相反，这样才会自然。腿部前摆时，同侧手臂应该向后摆。

const shoulder = Math.sin(TWO_PI * cycle + Math.PI) * stride * 0.8;

肘部弯曲也类似，前摆时弯曲更多。

4.4 身体垂直起伏

跑步时身体会有明显的上下起伏。腾空时身体升高，支撑时身体下降。用正弦波模拟：

const bob = Math.sin(TWO_PI * cycle) * BOB_HEIGHT;

这里的BOB_HEIGHT控制起伏幅度。起伏太小时，角色像是“平移”；起伏太大时，又像在跳跃，需要根据实际效果调整。

完整姿态计算函数可以这样组织：

function getPose(cycle, stride, kneeMax) { const bob = Math.sin(TWO_PI * cycle) * BOB_HEIGHT; const hipY = GROUND_Y - LEG_UPPER - LEG_LOWER + bob; const rightLeg = legPose(cycle, stride, kneeMax); const leftLeg = legPose(cycle + 0.5, stride, kneeMax); const rightArm = armPose(cycle, stride); const leftArm = armPose(cycle + 0.5, stride); return { cycle, hipX: HIP_X, hipY, bob, rightLeg, leftLeg, rightArm, leftArm, torsoAngle: -Math.PI / 2 + TORSO_LEAN }; }

两条腿之间相差0.5个相位，正好符合左右腿交替跑步的规律。

5. 完整代码实现

下面给出完整示例代码。代码包含背景滚动、地面刻度线、角色绘制和可调参数滑块。

5.1 完整 index.html

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>跑步动画练习</title> <style> * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: #1e293b; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; } canvas { background: #0f172a; border-radius: 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); } .tips { color: #94a3b8; font-size: 14px; margin-top: 12px; } .controls { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; color: #e2e8f0; font-size: 14px; } </style> </head> <body> <canvas id="runCanvas" width="800" height="400"></canvas> <div class="tips">远端部件、近端部件：浅色为远端，深色为近端</div> <div class="controls"> <label>频率：<input type="range" id="speedRange" min="0.5" max="4" step="0.1" value="2.4" /></label> <label>步幅：<input type="range" id="strideRange" min="0.2" max="1.4" step="0.05" value="0.9" /></label> <label>抬膝：<input type="range" id="kneeRange" min="0.2" max="1.8" step="0.05" value="1.2" /></label> </div> <script> const canvas = document.getElementById('runCanvas'); const ctx = canvas.getContext('2d'); const W = canvas.width; const H = canvas.height; const speedRange = document.getElementById('speedRange'); const strideRange = document.getElementById('strideRange'); const kneeRange = document.getElementById('kneeRange'); // ---------- 场景常量 ---------- const GROUND_Y = 320; const HIP_X = 400; const TWO_PI = Math.PI * 2; // ---------- 角色比例 ---------- const BOB_HEIGHT = 8; const TORSO_LEAN = 0.2; const TORSO_LENGTH = 80; const LEG_UPPER = 65; const LEG_LOWER = 65; const ARM_UPPER = 45; const ARM_LOWER = 42; const HEAD_RADIUS = 16; // ---------- 配色 ---------- const FAR_COLOR = '#64748b'; const NEAR_COLOR = '#1e293b'; const TORSO_COLOR = '#3b82f6'; const SKIN_COLOR = '#fbbf24'; // ---------- 工具函数 ---------- function wrapPhase(p) { return ((p % 1) + 1) % 1; } function segmentEnd(x, y, angle, length) { return { x: x + Math.cos(angle) * length, y: y + Math.sin(angle) * length }; } function drawSegment(x, y, angle, length, color, width, jointR) { const end = segmentEnd(x, y, angle, length); ctx.strokeStyle = color; ctx.lineWidth = width; ctx.lineCap = 'round'; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(end.x, end.y); ctx.stroke(); if (jointR) { ctx.fillStyle = color; ctx.beginPath(); ctx.arc(x, y, jointR, 0, TWO_PI); ctx.fill(); } return end; } // ---------- 姿态计算 ---------- function legPose(cycle, stride, kneeMax) { const hip = Math.sin(TWO_PI * cycle) * stride; const swing = Math.max(0, Math.sin(TWO_PI * cycle)); const knee = swing * kneeMax + 0.06; return { thighAngle: Math.PI / 2 - hip, kneeBend: knee }; } function armPose(cycle, stride) { const shoulder = Math.sin(TWO_PI * cycle + Math.PI) * stride * 0.8; const elbowBend = 0.9 + Math.max(0, Math.sin(TWO_PI * cycle + Math.PI)) * 0.5; return { upperAngle: Math.PI / 2 - shoulder, elbowBend: elbowBend }; } function getPose(cycle, stride, kneeMax) { const bob = Math.sin(TWO_PI * cycle) * BOB_HEIGHT; const hipY = GROUND_Y - LEG_UPPER - LEG_LOWER + bob; const rightLeg = legPose(cycle, stride, kneeMax); const leftLeg = legPose(cycle + 0.5, stride, kneeMax); const rightArm = armPose(cycle, stride); const leftArm = armPose(cycle + 0.5, stride); return { cycle, hipX: HIP_X, hipY, bob, rightLeg, leftLeg, rightArm, leftArm, torsoAngle: -Math.PI / 2 + TORSO_LEAN }; } // ---------- 绘制函数 ---------- function drawBackground(t) { const grad = ctx.createLinearGradient(0, 0, 0, H); grad.addColorStop(0, '#0f172a'); grad.addColorStop(1, '#1e3a8a'); ctx.fillStyle = grad; ctx.fillRect(0, 0, W, H); // 路灯背景，随角色前进向左滚动 const scrollSpeed = t * 60; const spacing = 160; const offset = scrollSpeed % spacing; ctx.fillStyle = '#1e293b'; for (let i = -1; i < W / spacing + 1; i++) { const x = i * spacing - offset; ctx.fillRect(x, GROUND_Y - 60, 6, 60); ctx.fillStyle = '#f59e0b'; ctx.beginPath(); ctx.arc(x + 3, GROUND_Y - 64, 6, 0, TWO_PI); ctx.fill(); ctx.fillStyle = '#1e293b'; } // 地面线 ctx.strokeStyle = '#334155'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(0, GROUND_Y); ctx.lineTo(W, GROUND_Y); ctx.stroke(); // 地面刻度线 const markSpacing = 80; const markOffset = scrollSpeed % markSpacing; ctx.strokeStyle = '#334155'; ctx.lineWidth = 1; ctx.beginPath(); for (let i = 0; i <= W / markSpacing + 1; i++) { const x = i * markSpacing - markOffset; ctx.moveTo(x, GROUND_Y); ctx.lineTo(x, GROUND_Y + 12); } ctx.stroke(); } function drawShadow() { ctx.save(); ctx.globalAlpha = 0.35; ctx.fillStyle = '#0f172a'; ctx.beginPath(); ctx.ellipse(HIP_X, GROUND_Y - 3, 48, 7, 0, 0, TWO_PI); ctx.fill(); ctx.restore(); } function drawHead(x, y) { ctx.fillStyle = SKIN_COLOR; ctx.strokeStyle = TORSO_COLOR; ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(x, y, HEAD_RADIUS, 0, TWO_PI); ctx.fill(); ctx.stroke(); // 眼睛方向，表示面朝右侧 ctx.fillStyle = '#0f172a'; ctx.beginPath(); ctx.arc(x + HEAD_RADIUS * 0.55, y - 2, 3, 0, TWO_PI); ctx.fill(); } function drawCharacter(cycle, stride, kneeMax) { const pose = getPose(cycle, stride, kneeMax); drawShadow(); // 躯干 const shoulderPos = drawSegment( pose.hipX, pose.hipY, pose.torsoAngle, TORSO_LENGTH, TORSO_COLOR, 14, 5 ); // 头部 const neck = segmentEnd(shoulderPos.x, shoulderPos.y, pose.torsoAngle, HEAD_RADIUS + 6); drawHead(neck.x, neck.y); // 远端左腿 const leftThigh = drawSegment( pose.hipX, pose.hipY, pose.leftLeg.thighAngle, LEG_UPPER, FAR_COLOR, 10, 4 ); drawSegment( leftThigh.x, leftThigh.y, pose.leftLeg.thighAngle + pose.leftLeg.kneeBend, LEG_LOWER, FAR_COLOR, 8, 3 ); // 远端左臂 const leftUpper = drawSegment( shoulderPos.x, shoulderPos.y, pose.leftArm.upperAngle, ARM_UPPER, FAR_COLOR, 8, 4 ); drawSegment( leftUpper.x, leftUpper.y, pose.leftArm.upperAngle - pose.leftArm.elbowBend, ARM_LOWER, FAR_COLOR, 7, 3 ); // 近端右腿 const rightThigh = drawSegment( pose.hipX, pose.hipY, pose.rightLeg.thighAngle, LEG_UPPER, NEAR_COLOR, 12, 5 ); drawSegment( rightThigh.x, rightThigh.y, pose.rightLeg.thighAngle + pose.rightLeg.kneeBend, LEG_LOWER, NEAR_COLOR, 10, 4 ); // 近端右臂 const rightUpper = drawSegment( shoulderPos.x, shoulderPos.y, pose.rightArm.upperAngle, ARM_UPPER, NEAR_COLOR, 9, 4 ); drawSegment( rightUpper.x, rightUpper.y, pose.rightArm.upperAngle - pose.rightArm.elbowBend, ARM_LOWER, NEAR_COLOR, 8, 3 ); } // ---------- 主循环 ---------- let lastTime = 0; let animTime = 0; function loop(timestamp) { if (!lastTime) { lastTime = timestamp; } const dt = Math.min((timestamp - lastTime) / 1000, 0.05); lastTime = timestamp; const speed = parseFloat(speedRange.value); const stride = parseFloat(strideRange.value); const kneeMax = parseFloat(kneeRange.value); animTime += dt * speed; const cycle = wrapPhase(animTime); drawBackground(animTime); drawCharacter(cycle, stride, kneeMax); requestAnimationFrame(loop); } requestAnimationFrame(loop); </script> </body> </html>

5.2 代码结构说明

主循环负责三件事：

计算当前动画时间。
按照speed累加相位。
依次绘制背景和角色。

绘制角色时，先画影子，再画躯干和头，然后画远端（左侧）的腿和手臂，最后画近端（右侧）的腿和手臂。这样近端部件会覆盖远端部件，形成前后层次。

5.3 运行效果

打开页面后，可以看到：

角色在当前场景中持续原地跑步。
背景路灯和地面刻度线向左移动，模拟角色向右前进。
调整“频率”滑杆，跑步节奏变化。
调整“步幅”滑杆，大腿摆动幅度变化。
调整“抬膝”滑杆，摆动腿膝盖弯曲程度变化。

这套代码的优点在于，所有关键参数都集中在代码顶部和滑杆上，读者可以边运行边调参，直观地理解每个参数对跑步姿态的影响。

6. 关键参数调节指南

6.1 频率

跑步频率直接影响节奏感。频率过低时，角色像在做慢动作；频率过高时，角色会显得非常仓促。

在代码中，频率通过speed控制，它表示每秒完成的跑步循环数量：

animTime += dt * speed;

在实际项目中，跑步速度往往和游戏角色移动速度绑定。角色速度越快，跑步频率和步幅都应该相应增加，而不是只改其中一个。

6.2 步幅

步幅由参数stride控制，对应大腿摆动幅度。

调大步幅，会让人觉得角色跑得“更有力”；调小步幅，则更像是慢跑或小碎步。

注意，步幅增大后，身体上下的起伏也应当适当增大，否则腿动得很开、身体却很平稳，会显得不真实。

6.3 抬膝与膝盖弯曲

kneeMax控制的是摆动腿的膝盖弯曲程度。

跑步时膝盖前抬是重要特征，尤其是大步跑或者高抬腿跑。过小的kneeMax会让角色看起来像拖着腿跑，过大的值则接近“高抬腿”表演跑。

建议在调试时固定其他参数，只调节一个参数，观察角色姿态变化。

7. 常见问题与排查

7.1 动画卡顿或者掉帧

问题现象	常见原因	解决思路
动画一卡一卡	没有使用 requestAnimationFrame	改用 requestAnimationFrame 驱动动画
切换标签页后回到页面，角色跳到很远位置	帧间隔过大，累计时间被迅速补上	限制单帧`dt`，例如`Math.min(dt, 0.05)`
不同屏幕速度不一样	直接按帧数累加速度	按真实时间差`dt`累加

7.2 动作不自然

问题现象	常见原因	解决思路
角色像滑冰	腿部摆动幅度大，身体起伏不足	增大`BOB_HEIGHT`
动作僵硬	膝盖弯曲幅度过小	增大`kneeMax`
摆臂看起来别扭	手臂相位与腿部不一致	检查`armPose`中`Math.PI`的相位差
角色倾斜过度	躯干前倾参数不对	减小`TORSO_LEAN`

7.3 出现穿模

如果腿与地面、手臂与躯干穿插，通常是身体比例或者关节角度过大的原因。优先检查：

腿长是否大于等于地面到髋部的距离。
膝盖弯曲方向是否和身体朝向一致。
手臂肘关节角度是否超出合理范围。

穿模问题在复杂骨骼动画中也存在，正式的解决方案是给每根骨骼增加碰撞约束，不过在练习阶段先调节参数即可。

8. 从练习到工程落地

8.1 从程序化跑步到骨骼动画

本文的关节模型是一种简化的骨骼动画。真实项目里，角色模型通常由美术工具制作，骨骼数量更多，动画通过关键帧记录旋转信息。

常见的 2D 骨骼动画方案有：

Spine
DragonBones

常见 3D 引擎动画方案有：

Unity Animator
Godot AnimationPlayer
Unreal Engine 动画蓝图

虽然引擎不同，但“跑步循环”的基本设计思路是相通的：准备落地、支撑蹬伸、腾空摆动，然后左右腿相位交替。理解了本文的相位控制，再看引擎里的 Blend Tree 或动画曲线，会更容易上手。

8.2 从原地跑到场景移动

本文演示的是原地跑步加背景滚动。如果想真正控制角色在地图上移动，可以记录角色坐标，并通过脚部锚点判断是否产生滑动。

更进阶的做法是利用反向动力学，让支撑腿的脚掌始终保持在地面上，这样可以彻底避免“滑冰感”。反向动力学可以作为下一个练习方向。

8.3 工程化建议

把参数集中在配置对象中，不要散落在函数里。
将“姿态计算”和“绘制”分离，姿态函数只负责输出数据，绘制函数只负责渲染。
角度单位统一使用弧度，并在注释中说明角度约定。
动画时间统一基于毫秒或秒，不要混用。
角色比例、颜色、速度等参数要支持外部配置，方便后续交给策划或美术调整。

8.4 推荐练习路线

如果你想把“跑步动画练习”继续做深，可以按以下顺序尝试：

增加走路动画，用同样的角色模型切换不同步态。
增加跑步加速和减速的过渡。
增加跳跃动画，并处理落地后的状态切换。
使用离屏 Canvas 预渲染人物帧，再批量绘制多个角色。
尝试使用 Unity 的 Animator State Machine 实现跑步状态机。

跑步动画虽然看起来基础，但它是理解“节奏、相位、姿态过渡”的最佳切入点。能把一个跑步循环调顺畅，再去做走路、跳跃、攻击等动画，会顺手很多。建议把文章里的代码复制下来，改改滑块，再试试替换成自己的参数，跑起来之后，你对动画数据模型的理解会提升一个大台阶。