什么是 drip
Drip 是一个可以用于前端、后端和移动端开发的缓慢执行库。它通过定义一个函数，让函数在一段时间内缓慢执行，而不是一下子执行完毕。使用它可以解决一些 UI 动画上的问题，比如让 SVG 路径动画缓慢执行，以及其他一些需要缓慢执行的场景。
安装
你可以通过 npm 来安装 Drip：
--- ------- ----
基础使用
Drip 的基本使用方式是通过定义一个函数来使用。这个函数会在指定的时间内按照指定的速度执行，而不是一下子执行完毕。
下面是一个例子：
------ ---- ---- ------- ------- -- - -- -- --------- -- ----- ----
上面这个例子的意思是，在 1000 毫秒内，以每秒 10 次的速度执行函数。也就是说，这个函数会被执行 10 次，每次之间会有一段时间的等待。
这里需要注意的是，函数会在执行的期间占用一些时间，而在等待的期间则不会占用 CPU 时间，因此使用 drip 定义的函数不会阻塞主线程，可以在不影响页面性能的情况下进行动画等操作。
参数详解
drip 函数有三个参数：执行函数、持续时间和速度
- 执行函数：要执行的函数
- 持续时间：执行函数的时间（单位毫秒）
- 速度：执行函数的速度，即每秒执行的次数
高级使用
Drip 还可以通过链式调用方式实现更加高级的功能。
暂停和继续执行
在执行函数的周期中，可以通过 pause() 函数来暂停执行，通过 resume() 函数来继续执行。
------ ---- ---- ------- ----- ------- - ------- -- - -- -- --------- -- ----- ---- ---------------- -----------------
可取消的执行
有时候，在执行过程中可能需要取消执行，可以使用 cancel() 函数来取消执行。
------ ---- ---- ------- ----- ------- - ------- -- - -- -- --------- -- ----- ---- -----------------
实现动画效果
Drip 可以很好地实现动画效果，比如让 SVG 路径或其他元素的属性动起来。下面是一个例子：
------ ---- ---- ------- ----- ---- - -------------------------------- ----- ---------- - ---------------------- ----- ------- - -------- -- - -------------------------- - -------------- ---- - -- - ------------- -- ----- ---- ----------------
这个例子的意思是，让路径从一开始只显示一小段，到最后显示整个路径。这样的话，就可以很好地实现路径动画效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/77457