LocalTools离线浏览器工具合集

分类: 开发工具

三次贝塞尔生成器

站方自主规划没找到想要的工具？

设计自定义的 CSS 缓动曲线

拖动两个控制点来调整 cubic-bezier() 时间函数，实时查看曲线和运动预览的变化，并复制生成的 animation-timing-function 声明。曲线计算在你的浏览器中完成。

预设

动画进行到 50% 时的进度: 0.802

输出
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

本页的所有处理都在浏览器中完成，不会上传任何内容。

这个工具能做什么

CSS 过渡或动画的缓动效果，本质上是一条从 (0,0) 到 (1,1) 的三次贝塞尔曲线：中间的两个控制点决定了运动是先慢后快、有回弹，还是别的效果。常见的关键字（ease、ease-in-out 等）只是这个曲线空间里五个固定的点。这个工具会根据你设置的两个控制点绘出曲线，展示一个按该时间函数运动的方块，并给出运动进行到一半时缓动后的实际进度——这是仅凭曲线本身最难判断出来的数字。

使用方法

  1. 从一个预设开始，或直接设置两个控制点。
  2. 观察曲线和运动预览的实时变化。
  3. 把 cubic-bezier() 声明复制到你的过渡或动画中。

隐私说明

本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。

常见问题

有内容是在服务器上计算的吗？
不会。曲线、运动预览和进度数值全部由页面中运行的 JavaScript 计算完成。
为什么两个控制点的 X 值被限制在 0 到 1 之间？
X 代表经过的时间，CSS 规范要求它必须从 0 向前推进到 1，曲线才能构成一个合法的时间函数。Y 代表缓动后的进度，允许小于 0 或大于 1，这正是实现回弹或过冲效果的方式。
运动进行到一半时的进度数值是什么意思？
它表示动画时长正好过去一半时，缓动后（而不是线性）的实际进度。如果这个值大于 50%，说明在中点时运动已经领先于匀速节奏。

返回全部工具