touch-ripple 是一个用于产生触摸波浪效果的 npm 包，可以快速为网页添加触摸特效。本文将介绍 touch-ripple 的安装和使用方法，以及如何定制波浪效果。
安装
使用 npm 可以快速安装 touch-ripple：
npm install touch-ripple --save
安装完成后，在代码中引入 touch-ripple：
import TouchRipple from 'touch-ripple';
使用方法
touch-ripple 可以应用于任何元素，包括按钮、卡片等等。首先，创建一个包含 touch-ripple 的元素：
<button id="my-button">Click me</button>
然后，初始化 TouchRipple 并调用 apply 方法：
const ripple = new TouchRipple('#my-button');
ripple.apply();现在，当用户点击按钮时，会出现一个波浪效果。
定制波浪效果
touch-ripple 有很多参数可以定制，下面是一些常用的选项：
- color：波浪的颜色，默认值为 rgba(255, 255, 255, .3)
- radius：波浪的半径，默认值为 'auto'，根据元素的大小自动计算
- speed：波浪的扩散速度，默认值为 1.5
- duration：波浪的持续时间，默认值为 700 毫秒
在初始化 TouchRipple 时，可以传递一个选项对象：
const ripple = new TouchRipple('#my-button', {
color: 'rgba(255, 255, 255, .5)',
radius: '50%',
speed: 2,
duration: 1000
});可以通过调用 setOption 方法修改选项：
ripple.setOption({
color: 'rgba(255, 255, 255, .7)'
});示例代码
下面是一个完整的示例代码，可以在浏览器中运行：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ ------ ------------
-------
------- -
-------- ---- -----
----------- --------
------ -----
------- -----
-------------- ----
------- --------
----------- ---------- ----
-
------------- -
----------- --------
-
--------
-------
------
------- -------------- -------------------- -----------
------- --------------
------ ----------- ---- --------------------------------------------------
----- ------ - -------------------------------------
----- ------ - --- ------------------- -
------ ---------- ---- ---- -----
------- ------
------ --
--------- ----
---
---------------
-------------------------------- -- -- -
------------------- ----------
---
---------
-------
-------在这个例子中，我们首先定义了一个样式为 .button 的按钮，然后在 JavaScript 中引入 touch-ripple，并初始化一个包含波浪效果的按钮。当按钮被点击时，会在控制台输出一条消息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005579f81e8991b448d4a0f