在前端开发中，动画效果是非常重要的一部分。而 jQuery Easing 是一个广受欢迎的动画函数库，提供了各种各样的缓动函数，使得我们可以轻松地实现各种复杂的动画效果。本文将介绍如何使用 npm 包 jquery-easing 以及如何将其应用于常见的动画场景。
安装
在使用 jquery-easing 之前，需要先安装它。可以通过 npm 来安装：
npm install jquery-easing
安装完成后，在需要使用的文件中引入它：
import 'jquery-easing';
或者在 HTML 文件中直接引入：
<script src="node_modules/jquery-easing/jquery.easing.min.js"></script>
基本用法
jQuery Easing 提供了大量的缓动函数，这些函数都可以作为参数传递给 jQuery 的动画方法（如 animate()、fadeIn()、fadeOut() 等）。例如，可以使用 easeInOutBack 函数来实现一个元素从左边飞进来的效果：
$('div').animate({
left: '+=200'
}, {
duration: 1000,
easing: 'easeInOutBack'
});除了把缓动函数作为字符串传递给 easing 参数之外，还可以直接传递函数名或自定义的缓动函数。例如，下面的代码中定义了一个名为 myEasing 的自定义缓动函数，然后将它作为参数传递给 animate() 方法：
-- -------------------- ---- ------- ----------------- - ----------- -- -- -- -- - ------ ------- - --- - ------------------------------- -- ------------------ ----- ------- -- - --------- ----- ------- ---------- ---
实际应用
下面是一些 jquery-easing 在实际应用中的示例。
滚动到顶部
在网页中通常会有一个“返回到顶部”的按钮，点击它可以使页面平滑地滚动到顶部。这时就可以使用 easeOutQuart 函数来实现一个平滑滚动效果：
$('#back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, {
duration: 1000,
easing: 'easeOutQuart'
});
});跳跃式动画
有时候我们需要实现一些跳跃式的动画效果，例如一个元素离开屏幕前先跳几下。这时可以使用 elasticOut 函数来实现：
-- -------------------- ---- -------
------------------
---- -------
-- -
--------- ----
------- -------------
--------- ---------- -
-----------------
---- --------
-------- -
-- -
--------- ----
------- ---------------
---
-
---缓慢出现
有时候我们需要实现一个元素从不透明度为 0 的状态缓慢地淡入到屏幕中。这时可以使用 easeOutCirc 函数来实现：
$('div').css('opacity', 0).animate({
opacity: 1
}, {
duration: 1000,
easing: 'easeOutCirc'
});结语
jQuery Easing 提供了大量的缓动函数，使得我们可以轻松地实现各种复杂的动画效果。本文介绍了如何使用 jquery-easing npm 包以及如何将其应用于常见的动画场景。希望对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35819