前言
在现代化的Web开发中，很多页面或者组件的设计都需要动画效果的支持，这些动画效果都需要我们根据不同的条件来触发，从而给用户带来更好的用户体验。在这里，我们将介绍一个非常有效的npm包，用于实现可滚动视图中元素动画的效果——scrollnimation。
scrollnimation作为一个轻量级的动画库，可以用于任何Web开发项目中，该库使用JavaScript来解析文档，可以根据包括元素上的“trigger”属性所触发的滚动事件，在元素进入和离开视图时对其应用动画效果。对于前端开发者，使用该库的成本非常低，并且非常容易上手，下面我们将具体讲解如何使用该库。
安装
在使用scrollnimation之前，首先需要在你的项目中安装该包，你可以直接使用npm安装：
npm install scrollnimation --save
当然，也可以手动从GitHub上下载最新版本的源代码，引入到你的项目中。
使用
基本用法
scrollnimation的基本用法非常简单，只需要按照以下三个步骤即可：
引入scrollnimation库
import scrollnimation from 'scrollnimation';
定义需要进行动画的元素，添加“trigger”属性
<div class="my-element" trigger> ... </div>
初始化scrollnimation
scrollnimation.init();
这时候，当用户滚动页面，具有“trigger”属性的元素将会出现在视图中，并且触发其对应的动画效果。
配置
除了基本用法之外，scrollnimation也提供了非常多的配置参数，用户可以根据自己的需求，自定义动画效果的触发方式、事件处理等。例如：
-- -------------------- ---- -------
---------------------
------- ----
----- -----
-------------- -----
-------- ------------ -
-------------- - - ----------
--
-------- ------------ -
-------------- - - -------
-
---如上述代码所示，我们可以通过修改scrollnimation.init()的参数来实现不同的配置。其中本例中设置的offset表示可以滚动的视图高度与元素之间的百分比差异，once表示该效果是否只会执行一次，disableMobile表示该效果是否会在移动端设备上被禁用。onEnter和onLeave是两个回调函数，可以在元素进入和离开视图时自定义处理和操作。
示例
这里提供一个简单的示例代码，加深大家对scrollnimation的理解和使用。
-- -------------------- ---- -------
---- ---- ---
---- -----------------------
---- --------------- --------
-----------------------
---- ------ ------------ --------- -----------
------
---- --------------- --------
---- -------------------------------------- -------
------
---- --------------- --------
---- -------------
------
------
-- ---
--------------- -
------- -------
-------- -----
---------------- -------
------------ -------
-
-------- -
-------- -----
---------------- -------
------------ -------
------- ------
------ -----
-
--- -- --- -
-------- --
----------- --- -- ---------
-
---------- --------- ---------- -
-------- --
---------- --------------
-
-- ----------
------ -------------- ---- -----------------
---------------------
----- -----
------- ----
-------- ---- -- -
---------------------------
-
---在本例中，我们定义了一个包含三个trigger元素的容器，每个元素都有不同的内容。使用scrollnimation初始化后，我们可以在配置中自定义滚动差异，元素的出现时间，元素动画的触发方式等等。本例中设置的offset表示只有当元素距离视图的距离小于视图自身高度的20%时才触发动画效果。
结论
scrollnimation是一个非常值得使用的npm包，作为一个轻量级但功能齐全的动画库，它提供了非常多的定制参数和API，可以满足不同的前端开发场景，对于那些需要为项目添加滚动动画效果的开发者来说，学习使用scrollnimation是一个值得投入时间的投资。希望这篇教程能够帮助大家更好地掌握scrollnimation的使用方法，为Web开发中的动画设计提供更好的支持。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fd081e8991b448dd594