如何在JavaScript中制作水起波纹/闪闪发光的动画？

Question

我正在查看该网站（http://lbebber.github.io/public/）的代码，以了解背景的形成方式，并且看起来仅使用canvas元素和JavaScript即可产生波纹效果。但是JavaScript是超小型的，因此很难找到它是如何工作的。我在哪里可以读到它，以及如何在自己的网站中使用它？

Answer 1

我制作了Demo，使用Pixi.js渲染图形，并使用GSAP动画。

Pixi ：http://www.pixijs.com/
GSAP ：https://greensock.com/

首先，您需要准备2张图像。

1。波纹纹理

2。背景

在容器中创建图片精灵。

var circle = PIXI.Sprite.fromImage(rippleMesh); /* Ripple texture */
var bg = PIXI.Sprite.fromImage(textureBg); /* background */

添加用于动画的DisplacementFilter对象。

var filter = new PIXI.filters.DisplacementFilter(circle);

然后添加到Pixi阶段。

ripple.addChild(bg, circle);
stage.addChild(ripple);

最后，使用GSAP为DisplacementFilter设置动画。

TimelineMax.to(circle.scale, 1.5, {
   repeatDelay: 0,
   x: 1.6,
   y: 1.6,
   ease,
   repeat: -1
 });

 TimelineMax.to(filter.scale, 1.5, {
   repeatDelay: 0,
   x: 0,
   y: 0,
   ease,
   repeat: -1
 });

  

顺便说一句，如果您想使效果与   http://lbebber.github.io/public/，只需重绘波纹纹理   变成线性。