pixi.js实现水波纹效果
创建场景
PIXI.JS是个超快的2D渲染引擎,你可以用JavaScript或者其他HTML5技术来显示媒体,创建动画或管理交互式图像,从而制作一个游戏或应用。
首先让我们从github下载最新版本的Pixi.js。然后在html引入
<script src="./js/pixi.min.js"></script>
css样式
* {
margin: 0;
padding: 0;
}
创建一个名叫app的PIXI应用对象
const app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight })
document.body.appendChild(app.view)
PIXI.Application算出了应该使用Canvas还是WebGL去渲染图象,它取决于你正在使用的浏览器支持哪一个。
我们传入浏览器的内部宽度和高度,它决定了canvas的宽和高。 然后使用app.view将场景添加到HTML页面作为Canvas元素
现在有了一个画布,现在需要往画布上放图像。所有想在画布上显示的东西必须被加进一个被称作舞台的PIXI对象中。
app.stage
创建精灵图,然后设置精灵图的宽高,然后将精灵图加入舞台
let img = new PIXI.Sprite.from('img/4.jpeg')
img.width = window.innerWidth
img.height = window.innerHeight
app.stage.addChild(img)
置换贴图
使用photoshop创建纹波效果,我们需要将图像像素远离原始位置移动以产生失真。 使用PIXI.JS,可以使用位移映射完成。创建黑白图案的随机变化,并使用它与原始图像映射。
在photoshop上创建一个1024*1024的画布,选择滤镜-渲染-云彩。如下图,将文件导出为命名为cloud.png
将新建的图像再次创建一个精灵。 然后从Sprite创建一个位移滤波器。 设置WRAPMODE以重复以确保位移覆盖整个图像。 然后将其添加到舞台上并应用过滤器。
displacementSprite = new PIXI.Sprite.from("cloud.png");
displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
app.stage.addChild(displacementSprite);
app.stage.filters = [displacementFilter];
设置动效
创建动画函数并移动位移映射,调用RequestAnimationFrame来启动动画循环。
function animate() {
displacementSprite.x += 10;
displacementSprite.y += 4;
requestAnimationFrame(animate);
}
通过缩小一点来解决边缘周围失真
displacementSprite.scale.x = 4
displacementSprite.scale.y = 4
通过缩放解决波纹密集
app.renderer.view.style.transform = 'scale(1.02)'
最终效果:https://wutao.work/work-plugin-library/pixi.html
完整代码:https://www.pixiplayground.com/#/edit/-WP9vXHbw2ajyRVvsxID-