jQuery Academy · 课时

自定义缓动与动画回调

Q: 「自定义缓动与动画回调」这节课中我会学到什么？

实现自定义缓动函数来控制动画速度和流程，并利用回调在动画完成或每一步执行时精准运行代码。 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

实现自定义缓动函数来控制动画速度和流程，并利用回调在动画完成或每一步执行时精准运行代码。

第 2 / 3 课11 个步骤

自定义缓动与动画回调 是 CoddyKit 上的免费 jQuery Academy 课时。这是第 2 节课，共 3 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 jQuery Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 jQuery Academy 课程共包含 3 节课。

超越基础动画速度

动画不仅仅是移动元素，还在于元素移动的方式。缓动控制动画的加速和减速，让动画看起来更加自然或更具戏剧性。

jQuery 提供了两种内置缓动选项：'linear'（恒定速度）和 'swing'（开始缓慢、中段加速、结束时再次减速）。但是，如果您需要更多效果，该怎么办呢？

探索默认缓动

让我们看看 jQuery 的默认缓动选项之间有什么区别：

'linear'：动画从开始到结束都以恒定速度移动。
'swing'：这是默认选项。它开始时速度较慢，中段加速，结束时再次减速。

两者都很简单，但您通常会希望更精确地控制动画的观感。

使用 jQuery UI 自定义缓动

要实现更复杂的缓动效果，我们通常会使用插件。一个热门选择是 jQuery UI Easing 组件。

它为 jQuery 的 $.easing 对象扩展了许多新函数，例如 'easeOutBounce'、'easeInOutQuad' 等。这为您提供了丰富的预定义运动曲线库。

要使用这些功能，通常需要在项目中引入 jQuery UI 库。

代码演示：使用 EaseOutBounce 实现弹跳

让我们尝试使用 jQuery UI 中的自定义缓动函数来制作动画。请注意，方框在结束时会弹跳，而不是突然停止。这种效果是通过 'easeOutBounce' 实现的。

（注意：此示例假设已引入 jQuery UI 的核心库和效果库。）

<!DOCTYPE html>
<html>
<head>
<title>Custom Easing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, 1500, 'easeOutBounce'); // Using a jQuery UI easing
      });
    });
  </script>
</body>
</html>

理解动画回调

动画是异步的，也就是说，动画执行期间，您的代码会继续运行。如果您需要在动画完成后执行某些操作，该怎么办呢？

jQuery 的 .animate() 方法接受一个回调函数。最常用的是 complete 回调。

选定的元素完全完成动画后，complete 回调会执行一次。
它非常适合串联操作，或显示“完成”消息。

代码演示：`complete` 回调

这里，我们会先为一个方框制作动画，然后仅在动画 100% 完成后更改其背景颜色并显示消息。

这样可以确保视觉效果一致，并为后续操作提供恰当的时机。

<!DOCTYPE html>
<html>
<head>
<title>Complete Callback</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #008CBA;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>
  <p id="message"></p>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, 1000, function() { // This is the complete callback
          $(this).css("background-color", "#f44336");
          $("#message").text("Animation complete! Color changed.");
        });
      });
    });
  </script>
</body>
</html>

`step` 回调

有时，您需要在动画执行期间执行操作，而不仅仅是在动画结束时执行。这正是 step 回调的用武之地。

动画的每个步骤中，每个正在动画处理的属性都会触发一次 step 回调。动画运行期间，它会持续被调用。

它会接收一些参数，例如 now（属性的当前值）、fx（包含动画详细信息的对象）以及 tween（用于更高级的控制）。

代码演示：`step` 回调

让我们使用 step 回调，在动画方框移动时显示它的当前位置。

这展示了如何获取实时更新，并根据动画进度做出响应。我们将专门使用 now 参数。

<!DOCTYPE html>
<html>
<head>
<title>Step Callback</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #FFC107;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>
  <p>Current Left Position: <span id="position">0px</span></p>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, {
          duration: 1500,
          step: function(now, fx) { // This is the step callback
            $("#position").text(now.toFixed(0) + "px");
          }
        });
      });
    });
  </script>
</body>
</html>

使用多个回调

您可以在同一个动画中同时使用 step 和 complete 回调。

animate() 方法接受一个选项对象作为第二个参数，您可以在其中定义 duration、easing 以及回调函数。

这样便能实现精确控制：在动画执行期间跟踪进度，并在动画结束之后执行最终操作。

回调检查

在动画运行期间持续更新进度条，最适合使用哪个 jQuery animate() 回调？

在交互式课程中回答

缓动与回调：总结

做得很好！您已经学会了如何增强 jQuery 动画：

自定义缓动：使用 jQuery UI 等插件，应用比“线性”或“摆动”更动态的速度曲线。
complete 回调：在动画完成后精确执行代码。
step 回调：获取实时更新，并在动画进行过程中反复执行操作。

这些工具可以让您更精细地控制网页元素的视觉变化流程和交互时机。

免费开始

用 AI 导师学习 JavaScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 22
课程: 48

免费开始学习查看完整课程

常见问题解答

「自定义缓动与动画回调」课时是免费的吗？

是的 — 「自定义缓动与动画回调」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 3 节课。

「自定义缓动与动画回调」这节课中我会学到什么？

实现自定义缓动函数来控制动画速度和流程，并利用回调在动画完成或每一步执行时精准运行代码。你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 jQuery Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 jQuery Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 3 节。

「自定义缓动与动画回调」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 jQuery Academy 课中编写并运行代码吗？

能。每节 jQuery Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 jQuery Academy