Rekapi 缓动函数完全指南：20+ 缓动曲线让关键帧动画更自然的秘诀
Rekapi 缓动函数完全指南：20+ 缓动曲线让关键帧动画更自然的秘诀
【免费下载链接】rekapiA keyframe animation library for JavaScript项目地址: https://gitcode.com/gh_mirrors/re/rekapi
如果你正在用 JavaScript 制作网页动画，一定会发现：真正让动画"活"起来的，往往不是关键帧本身，而是关键帧之间的缓动函数（Easing）。Rekapi 是一款轻量级的 JavaScript 关键帧动画库，它内置了 20 多种缓动曲线，从线性匀速到弹性回弹一应俱全。本指南将带你彻底掌握 Rekapi 缓动函数：它们分别适合什么场景、如何给单个属性单独指定缓动曲线，以及怎样用贝塞尔曲线自定义专属缓动，让你的动画告别僵硬、充满生命力。
什么是缓动函数？为什么它如此重要？
简单来说，缓动函数决定了动画从 A 点到 B 点"怎么走"。没有缓动的动画（linear 线性运动）全程匀速，看起来像机器人一样生硬；而加上缓动后，动画会模拟真实世界的物理规律——物体不会瞬间启动或骤停，而是有一个加速、减速的过程。
linear： ▁▂▃▄▅▆▇█ （匀速，机械感） easeOut： ▅▃▁▁▃▅▇█ （快速启动，优雅刹车） easeIn： ▁▃▅▇▇▅▃▅ （慢启动，冲刺结束） easeInOut： ▁▃▅▇▅▃▁▃ （两头慢，中间快）在 Rekapi 中，缓动函数是作用于关键帧之间的：每一段补间（tween）的缓动曲线取自它"到达"的那个关键帧，而不是起始帧。这一点在排列多个关键帧时尤其重要。
Rekapi 内置的 20+ 缓动曲线速查表
Rekapi 完整继承了 Shifty 的缓动函数库，全部缓动名称都是字符串，使用时直接作为keyframe()方法的第三个参数传入即可。它们按曲线形态分为四大类：
| 类别 | 缓动函数名 |
|---|---|
| 线性（匀速） | linear |
| 缓入（加速） | easeInQuad、easeInCubic、easeInQuart、easeInQuint、easeInSine、easeInExpo、easeInCirc |
| 缓出（减速） | easeOutQuad、easeOutCubic、easeOutQuart、easeOutQuint、easeOutSine、easeOutExpo、easeOutCirc |
| 缓入缓出（先加速后减速） | easeInOutQuad、easeInOutCubic、easeInOutQuart、easeInOutQuint、easeInOutSine、easeInOutExpo、easeInOutCirc |
后缀从Quad到Quint表示曲线阶数越来越高，"冲劲"越来越强；Expo是指数级缓动，冲击力最强；Circ则是圆形轨迹缓动。Rekapi 把这些贝塞尔曲线数值定义在 dom.js 的BEZIERS表中，你也可以看到每个名字对应的具体控制点。
最常用的几种缓动曲线及适用场景
面对 20 多个名字，新手最常问的就是"该用哪个"。这里给你一份实战选型清单：
- UI 元素淡入淡出：推荐
easeOutSine或easeInOutSine，柔和细腻，不会抢内容的风头； - 卡片滑入、弹窗出现：
easeOutCubic是最稳妥的选择，快速到位又带一点自然的减速； - 页面横幅、首屏大元素：
easeOutExpo先快后慢，出场极具冲击力； - 弹簧感、俏皮的交互反馈：
easeOutBack或easeInOutBack会越过终点再回弹，趣味十足（DOM 渲染器还支持elastic等扩展缓动）； - 倒计时、进度条填充：
easeInQuad逐渐加速，让人产生"越来越快"的紧迫感。
一个实用小技巧：大多数 Web 场景选easeOut*类就对了。心理学研究表明，人类对"快速启动、缓慢结束"的动画感知最舒适，因为大脑需要时间来处理运动结束后的画面变化。
一键应用：给关键帧设置缓动曲线
在 Rekapi 中为关键帧添加缓动，只需在keyframe()方法中传入缓动名称字符串，这是最常用的"一键应用"方式：
import { Rekapi, Actor } from 'rekapi'; const rekapi = new Rekapi(); const actor = rekapi.addActor(); actor.keyframe(0, { x: 50, y: 50 }) .keyframe(1000, { x: 300, y: 100 }, 'easeOutExpo');这样从 0ms 到 1000ms 的这一段补间，就会应用easeOutExpo曲线，小球仿佛被弹射出去又稳稳停住。想要循环播放时，别忘了用rekapi.play()启动动画。
注意：每个关键帧（KeyframeProperty）默认的缓动是linear，这个默认值定义在 keyframe-property.js。也就是说，不传缓动参数时动画是匀速的，这也是很多人觉得动画"生硬"的常见原因。
进阶技巧：为不同属性指定不同缓动曲线
一个关键帧往往包含多个属性（比如x、y、opacity）。如果希望它们各自拥有不同的运动节奏，可以把第三个参数从字符串换成对象，按属性名逐一指定：
actor.keyframe(1000, { x: 300, y: 100, opacity: 0 }, { x: 'easeOutExpo', // x 走强缓出 y: 'easeInSine', // y 走柔缓入 opacity: 'linear' // 透明度匀速淡出 });这段逻辑在 actor.js 的keyframe()方法中实现：当传入的是对象时，Rekapi 会读取easing[name]为每个属性分配对应的缓动曲线，未指定的属性则自动回退到linear。这个技巧非常适合做"分层动画"——比如元素平移时用强缓出、颜色变化时用柔缓入，层次感立刻提升。
自定义缓动：用贝塞尔曲线创造独有节奏
内置的 20+ 曲线还不够用？Rekapi 允许你传入四元数组[x1, y1, x2, y2]，直接定义一个三次贝塞尔曲线（cubic-bezier）作为缓动函数：
// 一个先轻微回退、再强力冲出的自定义曲线 actor.keyframe(1000, { x: 300 }, [0.68, -0.55, 0.27, 1.55]);数组中的四个数字分别对应贝塞尔曲线的两个控制点，你可以借助常见的 cubic-bezier 可视化工具先调好手感，再填进代码里。这种写法同样支持上面提到的"按属性分配"——数组与字符串在 Rekapi 的easingOption类型中是等价的（参见 main.js 的类型定义）。
常见问题与避坑指南
- 为什么我的动画看起来是匀速的？请检查是否给目标关键帧（动画"到达"的那一帧）传了缓动参数——缓动取自目标关键帧，而非起始帧；
- 缓动不生效？确认缓动名称拼写是否正确，Rekapi 对缓动名区分大小写，如
easeOutExpo而非easeoutexpo； - 多个属性一起动很乱？优先使用"按属性指定缓动"的对象写法，让位移、缩放、透明度各司其职；
- 想实现弹性、反弹效果？DOM 渲染器内置了
elastic、back等扩展缓动（见 dom.js 的文档示例），可以直接拿来用。
总结：让动画自然的三个核心秘诀
- 告别默认 linear：90% 的动画都值得配一个缓动函数，哪怕是最简单的
easeOutQuad； - 按场景选曲线：柔和用
Sine、稳重用Cubic、冲击用Expo，先跑通再微调； - 善用分层缓动：用对象语法为每个属性分配独立缓动，动画质感立刻上一个台阶。
Rekapi 把这 20+ 缓动曲线打包成一行字符串就能调用的简单 API，配合关键的贝塞尔自定义能力，你完全可以在不写一行补间逻辑的情况下，做出媲美专业动效库的 JavaScript 动画。现在，挑一条曲线，让你的关键帧动画"动"起来吧！🚀
【免费下载链接】rekapiA keyframe animation library for JavaScript项目地址: https://gitcode.com/gh_mirrors/re/rekapi
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考