什么是 @pixi/filter-shockwave？
@pixi/filter-shockwave 是一个基于 PIXI.js 的滤镜包，可以实现 shockwave 效果。它有以下特点：
- 基于 PIXI.js，所以可以很方便地使用 PIXI.js 构建应用；
- 可以调整参数，达到不同的效果；
- 可以根据时间变化来做动画；
- 支持 TypeScript。
如何使用 @pixi/filter-shockwave？
安装
使用 npm 安装：
npm install @pixi/filter-shockwave --save
引用
@pixi/filter-shockwave 是一个 PIXI.js 的滤镜包，所以需要先引用 PIXI.js：
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>
然后在需要使用的地方，可以这样引用 @pixi/filter-shockwave：
import shockwaveFilter from '@pixi/filter-shockwave';
创建滤镜
创建滤镜的方式非常简单，只需要使用以下代码：
const filter = new shockwaveFilter({
amplitude: 50,
wavelength: 180,
speed: 600,
brightness: 0.7,
center: [window.innerWidth / 2, window.innerHeight / 2]
});参数解释：
amplitude：振幅，值越大震动范围越大，默认值为 50；wavelength：波长，值越大波的周期越长，默认值为 180；speed：速度，值越大波速越快，默认值为 600；brightness：亮度，值越大越亮，默认值为 0.7；center：中心点坐标，数组类型，如[x, y]。
应用滤镜
@pixi/filter-shockwave 可以应用在 PIXI.js 的任何显示对象上，只需要使用以下代码：
sprite.filters = [filter];
其中 sprite 是一个 PIXI.js 的显示对象。
时间变化
如果你想在时间变化时，让 shockwave 效果动起来，可以更新 filter.vertexData：
filter.time += 0.1; filter.update(filter.time);
示例代码
以下是一个基于 PIXI.js 和 @pixi/filter-shockwave 的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------
------- --------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------
-------
------ -
--------- ---------
---- --
----- --
-
--------
-------
------
---- ---------------
--------
----- --- - --- ------------------
------ ------------------
------- -------------------
---------------- ---------
----------- ----------------------- -- --
---
------------------------------------
----- ------ - --------------------------------------------------------------------------
-------- - ----------------- - --
-------- - ------------------ - --
-----------------------
----- ------ - --- -----------------
---------- ---
----------- ----
------ ----
----------- ----
------- ------------------ - -- ------------------ - --
---
-------------- - ---------
---------------------------
----------------- -- -
----------- -- ----
---------------------------
---
---------
-------
-------小结
通过本文的学习，你已经学会了如何使用 @pixi/filter-shockwave 包，实现 shockwave 效果。同时，你也可以根据需要调整参数，达到不同的效果。希望本文对你有所帮助，感谢阅读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcae6b5cbfe1ea06124f7