函数柯里化在动画API中用于预设通用参数（如duration、easing），生成语义清晰、可复用的动画构造器，避免重复传参，提升可读性与维护性，并支持链式配置、动态计算及与CSS变量协同。
函数柯里化在动画 API 中主要用于提前固定动画的通用参数（如持续时间、缓动函数），生成可复用的、语义清晰的动画构造器，避免重复传参，提升代码可读性和维护性。
用柯里化预设 duration 和 easing
原生 element.animate() 或第三方库（如 Framer Motion、GSAP）常需反复指定 duration 和 easing。通过柯里化，可把这两个参数“冻结”为默认值，返回一个只接收关键参数（如目标属性、起止值）的新函数。
例如，封装一个常用缓动动画：
const createEasedAnimation = (duration, easing) =>
(target, keyframes, options = {}) =>
target.animate(keyframes, {
duration,
easing,
...options
});
<p>// 预设：300ms + ease-out
const fadeIn = createEasedAnimation(300, 'ease-out');</p><p>// 使用时只需关注内容
fadeIn(myElement, { opacity: [0, 1] });
fadeIn(anotherEl, { transform: ['scale(0.9)', 'scale(1)'] });支持链式配置与部分参数延迟绑定
更灵活的做法是分两层柯里化：第一层定 duration/easing，第二层接受元素和关键帧，第三层甚至可支持运行时动态插值（如根据距离算时长）。
立即学习“Java免费学习笔记（深入）”；
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
示例（带动态 duration 计算）：
const animated = (durationBase = 300, easing = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)') => {
return (target) => {
return (keyframes, opts = {}) => {
const actualDuration = opts.duration ?? durationBase;
return target.animate(keyframes, {
duration: actualDuration,
easing,
fill: 'forwards',
...opts
});
};
};
};
<p>// 用法
const quick = animated(150, 'ease-in');
quick(myBtn)({ backgroundColor: ['#fff', '#007bff'] });</p><p>const smooth = animated(400);
smooth(box)({ left: ['0px', '200px'] }, { iterations: 2 });与 CSS 自定义属性 + requestAnimationFrame 协同
柯里化也适用于自定义动画逻辑（非 animate() API）。比如封装一个基于 requestAnimationFrame 的缓动更新器，预先绑定缓动曲线和总时长，再注入 DOM 更新行为：
const tween = (duration, easingFn) => (from, to, onUpdate) => {
let start;
const update = (t) => {
if (!start) start = t;
const elapsed = t - start;
const progress = Math.min(elapsed / duration, 1);
const eased = easingFn(progress);
const value = from + (to - from) * eased;
onUpdate(value);
if (progress < 1) requestAnimationFrame(update);
};
requestAnimationFrame(update);
};
<p>// 预设缓动：250ms + easeInOutCubic
const slideInX = tween(250, t => t < 0.5 ? 4<em>t</em>t<em>t : (t-1)</em>(2<em>t-2)</em>(2*t-2)+1);</p><p>// 使用
slideInX(0, 100, val => el.style.transform = <code>translateX(${val}px)</code>);配合 CSS 变量实现运行时主题化动画
将柯里化函数与 CSS 自定义属性结合，可在 JS 中统一控制动画节奏，同时允许设计系统在 CSS 中覆盖（如深色模式下减慢动画）：
CSS 中：
:root {
--anim-duration: 300ms;
--anim-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
<p>@media (prefers-reduced-motion: reduce) {
:root {
--anim-duration: 0.01ms;
}
}JS 中读取并柯里化：
const getAnimConfig = () => ({
duration: parseFloat(getComputedStyle(document.documentElement)
.getPropertyValue('--anim-duration')),
easing: getComputedStyle(document.documentElement)
.getPropertyValue('--anim-easing').trim()
});
<p>const themedAnimate = () => {
const { duration, easing } = getAnimConfig();
return (el, frames, opts = {}) =>
el.animate(frames, { duration, easing, ...opts });
};</p><p>// 每次调用都响应当前 CSS 主题
themedAnimate()(myEl, { opacity: [0, 1] }); 
