动画逐帧控制：easing与step回调实现复杂运动

超越fadeIn/slideDown，学习使用easing函数和animate的step回调创建自定义物理运动（如弹跳、弹簧效果），并实时反馈数值变化。 · 难度：入门 · +10XP

动画逐帧控制：easing与step回调实现复杂运动

jQuery的animate支持easing（内置linear和swing）以及第三方插件。更强大的功能是step回调，它在动画每一帧都会被调用，并传递当前动画属性的实时值。利用step可以驱动多个相关属性同步变化，比如让一个div的背景色随位置变化而渐变。本教程将教你无插件实现自定义easing函数（如缓入缓出），以及如何用step构建类似重力感应的动画：当元素到达边界时速度反向，模拟碰撞反弹效果。还会讲解如何通过promise确保step内的异步操作完成。

$('.ball').animate({ left: '500px' }, {
  duration: 2000,
  easing: function(x, t, b, c, d) {
    // 自定义弹跳easing
    return b + c * Math.pow(2, -10 * t/d) * Math.sin((t/d - 0.075) * 2 * Math.PI / 0.3);
  },
  step: function(now, fx) {
    // 实时更新阴影或旋转
    $(fx.elem).css('transform', 'rotate(' + now/5 + 'deg)');
  }
});