自定义动画与缓动节奏

5.2 自定义动画与缓动节奏

制式动作覆盖不到的样式——位移、宽度、字号——由 animate 接管。上一节的缓动参数在这里从配角变成主角：同样的起止点，节奏不同，观感天差地别。本节把 animate 的参数逐个解剖，划清它能动与不能动的边界，再用一张缓动曲线图把"节奏"这件事讲成看得见的东西。

本节摘要：animate(属性对象[, 时长][, 缓动][, 完成回调]) 只驱动数值型样式，支持相对增减与关键字；颜色、transform、复杂属性动不了，要么上插件要么交给 CSS 过渡；内置缓动只有 swing（默认，两端慢中间快）与 linear（匀速），更多节奏靠插件或原生 cubic-bezier。

animate 的解剖：参数逐个看

$('.item.picked')
  .animate({ paddingLeft: 24, opacity: 0.7 }, 400)          // 基本形态
  .animate({ marginLeft: '+=20' }, 300)                      // 相对当前值增减
  .animate({ width: 'toggle' }, 250);                        // 显隐关键字
​

属性对象是主角：键为目标样式名，值为目标值。三个语法点值得划线。其一，相对值 '+=20'、'-=0.5' 以当前计算值为基准增减，做"再往右挪一点"这类递进动画最顺手，注意值是字符串。其二，'toggle'、'show'、'hide' 可以作为值用于宽度、高度、透明度，把制式动作的语义嫁接进自定义动画。其三，样式名两种写法都认——paddingLeft 与 padding-left 等价，沿用 3.3 节的习惯即可。

后续参数与制式动作同签名：时长（毫秒或 slow、fast）、缓动名、完成回调。回调在每个元素各自完成时触发一次，批量动画里要用"全体完成"语义时得自己数回调次数或改用 Promise 风格（jQuery 的动画对象支持 .done()，本章按队列主线讲，Promise 形态在 6 章的 AJAX 里一并对照）。

能动的与不能动的：数值边界

animate 的引擎是"逐帧改数值样式"，所以判据干脆：目标是数值（或能换算成数值）就能动。宽度、高度、左右位移、透明度、字号都是数值家族；踩线的是三类——

// 动不了的三类，写了也白写
$box.animate({ backgroundColor: '#FDE9E9', duration: 400 });  // 颜色不在核心引擎里
$box.animate({ transform: 'translateX(40px)' }, 400);         // transform 值是函数串
$box.animate({ position: 'absolute' }, 400);                  // 关键字属性无数值可插值
​

颜色的补间需要色值插值，transform 需要矩阵解析，这些能力在 jQuery UI 与第三方缓动插件里，核心库刻意不背。替代路线有两条：颜色类动画改用"切类名 + CSS transition"（3.3 节的分工在这里再次生效）；位移类动画在现代方案里直接用 transform 配合过渡，性能还更好——合成线程接手后不重排布局。

图：两种内置缓动的节奏曲线

缓动节奏：两个字怎么选

核心库只带 swing 与 linear 两个字，选择反而简单。交互反馈（展开、移入、弹出）一律默认 swing——起手与收尾的缓冲来自真实世界的惯性直觉；循环指示（转圈、进度扫描）用 linear——匀速才不会让人误读进度快慢。需要弹跳、回弹这类夸张节奏时，jQuery UI 带来一整套扩展名（easeOutBounce 之类），引入后直接把名字传给 animate 第四参前的缓动位即可。原生对照里，同一件事由 transition-timing-function 的 cubic-bezier 曲线完成，四个数字能捏出任意的加减速形状，表现力远超两个字——这是"复杂节奏交给 CSS"的又一票理由。

完整案例：详情面板的定宽展开

背景：列表条目点击后向右展开一块详情区，宽度与透明度联动，视觉上是"推开一扇门"。操作、结果、解读、变式一次走完：

$('#queue').on('click', '.item', function () {
  var $detail = $(this).find('.detail');

  if ($detail.hasClass('open')) {
    $detail.animate({ width: 0, opacity: 0 }, 250, function () {
      $detail.removeClass('open');
    });
  } else {
    $detail.addClass('open')
      .css({ width: 0, opacity: 0 })                       // 先摆好起手式
      .animate({ width: 220, opacity: 1 }, 350);           // 再推向目标
  }
});
​

结果：点击条目，详情区从零宽淡入推开到两百二十像素；再次点击反向收回。解读：收起方向的回调里才摘类名，保证动画期间样式态一致；展开方向先用 css 摆起手式再 animate，是"从指定值出发"的固定套路——不摆起手式时动画从当前值出发，多数时候也可以，但想让每次展开都从零开始就必须先归零。变式：想再推开的同时条目整体右移，链一个 .animate({ paddingLeft: 16 }, 350) 即可——同一队列自动接力，这正是下一节的主角戏份。

要点复盘

• animate 驱动数值型样式，相对值与显隐关键字让目标值可以"接着现在算"。
• 颜色、transform、关键字属性不在核心引擎里，改走类名加 CSS 过渡或插件。
• 缓动两字分工：交互用默认 swing，循环指示用 linear；夸张节奏找 jQuery UI，精细曲线找 cubic-bezier。
• "起手式 + animate"套路能让每次动画都从指定值出发，结果可预期。
• 完成回调按元素各自触发；把动作串起来的接力机制就是下一节的队列。

单个动作已经精通，下一节面对真正的编排问题：多个动画排队、插队、中断、清场。