缓动曲线实验室：拖动贝塞尔手柄，动画手感当场调

动画「生硬」和「丝滑」的差距，往往只在一条缓动曲线。这个工具给你一个可拖拽的三次贝塞尔编辑器，两个控制手柄随便拉，旁边小球立刻按这条曲线来回跑；曲线形状、cubic-bezier 取值和动画效果同一屏对齐，内置 linear / ease / ease-in / ease-out / ease-in-out 预设，还能一键复制 CSS。先看成品，再讲这个网页怎么用一段提示词做成单文件应用并部署上线。

这个工具做什么

它把「缓动曲线实验室」做成一个零依赖的单页应用：

• 拖动贝塞尔手柄：两个控制手柄直接拖，cubic-bezier(x1,y1,x2,y2) 实时更新。
• 小球实时演示：动画用你调的曲线驱动，速度快慢、回弹感当场能看出来。
• 缓动函数曲线同屏显示：曲线上有个游标跟着小球走，输入时间和输出值一目了然。
• 5 个常用预设：linear、ease、ease-in、ease-out、ease-in-out 一键切换。
• 时长可调：0.5s / 1s / 2s / 3s，循环播放，方便观察不同速度下的手感。
• 复制 CSS：生成 transition-timing-function 代码，一键复制。

准备环境：进入码道CodeArts

本文用 CodeArts 的 WebUI 版来演示。先进入 CodeArts 并开通体验版，不需要装任何软件，浏览器就能用：

进入 CodeArts：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。

进入 AI 开发者空间

1. 浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_source=opcsfsq&utm_medium=wbwz
2. 弹窗「请选择要进入的版本」→ 点击 体验版
3. 首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
4. 弹窗「临时凭据自动配置」→ 点击 同意，沙箱自动创建

进入 AI 开发者空间主界面后，先等左侧菜单加载出来，再找到 CodeArts，点击它右侧的浏览器图标，打开码道 WebUI 对话窗口：

打开后码道 WebUI 会先和你打招呼，下方就是需求输入框：

小贴士：体验版沙箱 3 小时后自动重置，生成完记得把 index.html 下载保存。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送：

开发一个「缓动曲线实验室」网页应用：用户拖动三次贝塞尔曲线的两个控制手柄，实时观察一个小球沿该曲线运动的动画效果，同时显示缓动函数曲线与对应的 cubic-bezier 取值；内置 ease、ease-in、ease-out、linear 等预设，可切换动画时长并复制 CSS 代码；界面简洁美观，单个网页即跑即玩。完成后部署成可访问的网页应用，并告诉我访问地址。

这轮码道具体做了什么

不是复述通用 AI 能力，而是它在这个项目里的实际动作：

• 在 /workspace/easing-lab 下创建单文件 index.html，把贝塞尔曲线数学、牛顿求解、SVG 拖拽、动画循环和复制逻辑都放进一个文件，无第三方依赖。
• 写入后做 JS 语法检查，纠偏后再启动服务。
• 探测空闲端口、用 python3 -m http.server 启动并自检 HTTP 200，给出预览地址。

代码亮点

以下是 index.html 里值得关注的设计思路和实现细节。

1. cubic-bezier 是「x 求 y」的隐函数

CSS 的 cubic-bezier(x1,y1,x2,y2) 中，x 是输入时间、y 是输出进度，但曲线给的是参数方程，不能直接 y = f(x)。代码先写贝塞尔多项式 bx / by 和 x 分量导数：

function bx(t, x1, x2) { var it = 1-t; return 3*it*it*t*x1 + 3*it*t*t*x2 + t*t*t; }
function by(t, y1, y2) { var it = 1-t; return 3*it*it*t*y1 + 3*it*t*t*y2 + t*t*t; }
function bxDeriv(t, x1, x2) { var it = 1-t; return 3*it*it*x1 + 6*it*t*(x2-x1) + 3*t*t*(1-x2); }

2. 牛顿迭代解出给定 x 对应的 t

真正驱动动画时，拿到的是时间 x（线性进度），要反推出参数 t，再代入 by 得到缓动后的进度。easing 用牛顿法迭代，误差小于 1e-6 就停：

function easing(x) {
  if (x <= 0) return 0;
  if (x >= 1) return 1;
  var t = x;
  for (var i = 0; i < 10; i++) {
    var err = bx(t, state.x1, state.x2) - x;
    if (Math.abs(err) < 1e-6) break;
    var d = bxDeriv(t, state.x1, state.x2);
    if (Math.abs(d) < 1e-6) break;
    t -= err / d;
    if (t < 0) t = 0; else if (t > 1) t = 1;
  }
  return by(t, state.y1, state.y2);
}

这样任意控制点都能得到精确的缓动效果，而不只是那几个内置 ease。

3. 预设就是一组坐标

linear、ease、ease-in 这些「名字」在代码里其实只是不同的 [x1,y1,x2,y2]：

var PRESETS = {
  'linear':      [0.00, 0.00, 1.00, 1.00],
  'ease':        [0.25, 0.10, 0.25, 1.00],
  'ease-in':     [0.42, 0.00, 1.00, 1.00],
  'ease-out':    [0.00, 0.00, 0.58, 1.00],
  'ease-in-out': [0.42, 0.00, 0.58, 1.00]
};

点预设按钮就是把这组坐标写回 state，再重新渲染曲线和小球演示。

4. 动画循环用同一个 easing 函数驱动

小球不是用固定缓动写死，而是每一帧用线性时间 progress 调 easing(progress)，得到真正的进度值：

function animate(ts) {
  if (!state.playing) { requestAnimationFrame(animate); return; }
  if (animStart === null) animStart = ts;
  var elapsed = ts - animStart;
  var progress = (elapsed % state.duration) / state.duration;
  var eased = easing(progress);

  ball.style.left = (trackLeft + eased * trackWidth) + 'px';
  progressFill.style.width = (progress * 100) + '%';
  // 曲线图上的游标也跟着 progress / eased 移动
  requestAnimationFrame(animate);
}

进度条显示的是线性 time，小球用的是缓动后的 value，两者同时看，就能直观理解「时间过了多少」和「实际走了多少」的差别。

直接下载试玩

本次生成的项目就是单文件 index.html，没有第三方依赖，把文件保存到本地后双击用浏览器打开即可运行。源码同步到公开 Demo Park 仓库：

• Demo Park 仓库：https://atomgit.com/deli007/demo_park
• 本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-easing-curve-lab

总结

缓动曲线实验室把「动画手感」翻译成可计算的四个数字：贝塞尔控制点坐标、牛顿迭代、预设表和动画循环。关键点在于 cubic-bezier 不是显式函数，得先反解参数 t 再求输出 y。后面做过渡动效，先在这个工具里拖两下手柄，再复制 CSS，比凭感觉改 ease 可靠得多。后续可以继续加「自定义保存」「多对象对比」「曲线临界点提示」，或者把预设扩充到更多动画风格。