JavaScript 中函数柯里化怎么在动画 API 中预设持续时间和缓冲曲线-js教程-PHP中文网

函数柯里化在动画api中用于预设通用参数（如duration、easing），生成语义清晰、可复用的动画构造器，避免重复传参，提升可读性与维护性，并支持链式配置、动态计算及与css变量协同。

javascript 中函数柯里化怎么在动画 api 中预设持续时间和缓冲曲线

函数柯里化在动画 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)'] });</p>

支持链式配置与部分参数延迟绑定

更灵活的做法是分两层柯里化：第一层定 duration/easing，第二层接受元素和关键帧，第三层甚至可支持运行时动态插值（如根据距离算时长）。

示例（带动态 duration 计算）：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

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 });</p>

与 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 // 预设缓动：250ms + easeInOutCubic
const slideInX = tween(250, t => t tt<em>t : (t-1)</em>(2<em>t-2)</em>(2*t-2)+1);<p>// 使用
slideInX(0, 100, val => el.style.transform = <code>translateX(${val}px)</code>);</p>

配合 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;
}
}</p>

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] });</p>