pixiJS制作水波效果

已于 2023-03-29 23:12:18 修改
阅读量1.1k 收藏 8
点赞数 6
文章标签： javascript 开发语言 ecmascript Powered by 金山文档
于 2023-03-24 11:57:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/walzm_/article/details/129745648
版权
文章展示了如何使用Pixi.js库结合pixi-filters创建复杂的视觉效果，包括置换滤镜和震波滤镜。通过导入和配置相关组件，创建纹理、精灵、文字，并添加动态效果，使得背景图像产生水波纹动态，并在用户点击时生成震波。此外，文章解释了如何控制震波的产生和消失，以及调整相关参数以改变效果。
摘要由CSDN通过智能技术生成

整体代码及实现效果

完整代码如下:

// 导入pixi.js
import * as PIXI from 'pixi.js'
import { ShockwaveFilter } from 'pixi-filters'

// 创建应用
const app = new PIXI.Application({
  width: window.innerWidth, // 设置画布宽高与窗口宽高相同
  height: window.innerHeight,
  background: 0x1099bb, // 画布背景颜色
  resolution: window.devicePixelRatio || 1, // 像素比例，查看设备是否具有像素比例，没有的话则默认为1
  antialias: true // 抗锯齿
})
// 将应用画布添加到dom中
document.body.appendChild(app.view)

// 创建一个纹理
const texture = PIXI.Texture.from('../public/img1.jpg')
// 创建一个精灵
const sprite = new PIXI.Sprite(texture)
sprite.width = app.screen.width
sprite.height = app.screen.height
// 创建容器
const container = new PIXI.Container()
// 将精灵加到容器中
container.addChild(sprite)
// 将容器加到舞台中
app.stage.addChild(container)

// 添加文字
const text = new PIXI.Text('破 碎 王 冕', {
  fontFamily: 'Arial',
  fontSize: 30 + Math.floor(window.innerWidth / 20), // 根据页面调整文字大小
  fill: 0xffffff,
  align: 'center',
  dropShadow: true, // 给文字添加阴影效果
  dropShadowColor: '#000000', // 阴影颜色
  dropShadowBlur: 4,
  dropShadowAngle: Math.PI * 0.25, // 光纤照射角度 从左到右
  dropShadowDistance: 10 // 阴影与字体距离
})
// 设置文字位置和文字大小
text.x = app.screen.width / 2
text.y = app.screen.height / 2
text.anchor.set(0.5)
container.addChild(text)

//添加置换滤镜
// 创建置换贴图精灵
const displacementSprite = PIXI.Sprite.from('https://s1.aigei.com/pvimg/img/png/de/de499f1dda9a4e9da1fa1815410b1617.png?imageMogr2/auto-orient/thumbnail/!237x237r/gravity/Center/crop/237x237/quality/85/&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:iJpRumxLmQelW9sN_wrsdsD8yR4=')
// 调整置换精灵贴图的大小
displacementSprite.scale.set(7)
// 纹理平铺并且允许重复
displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT
// 创建纹理滤镜
const displacementFilter = new PIXI.DisplacementFilter(displacementSprite)
// 将置换贴图精灵添加到容器内
container.addChild(displacementSprite)

// 添加震波滤镜
const shockwaveFilter1 = new ShockwaveFilter([Math.random() * app.screen.width, Math.random() * app.screen.height], {
  radius: 160, // 半径
  wavelength: 65, // 波长
  amplitude: 105, // 振幅
  speed: 200 // 速度
})
const shockwaveFilter2 = new ShockwaveFilter([Math.random() * app.screen.width, Math.random() * app.screen.height], {
  radius: 100, // 半径
  wavelength: 50, // 波长
  amplitude: 80, // 振幅
  speed: 300 // 速度
})
const shockwaveFilter3 = new ShockwaveFilter([Math.random() * app.screen.width, Math.random() * app.screen.height], {
  radius: 90, // 半径
  wavelength: 50, // 波长
  amplitude: 100, // 振幅
  speed: 250 // 速度
})
const shockwaveFilter4 = new ShockwaveFilter([Math.random() * app.screen.width, Math.random() * app.screen.height], {
  radius: 120, // 半径
  wavelength: 70, // 波长
  amplitude: 80, // 振幅
  speed: 200 // 速度
})

// 将滤镜添加到容器内
container.filters = [displacementFilter, shockwaveFilter1, shockwaveFilter2, shockwaveFilter3, shockwaveFilter4]
// 添加动态效果
app.ticker.add((delta) => {
  displacementSprite.x += 1
  displacementSprite.y += 1
  createWave(shockwaveFilter1, 2)
  createWave(shockwaveFilter2, 1)
  createWave(shockwaveFilter3, 2.5)
  createWave(shockwaveFilter4, 1.75)
})

// 控制震波的方法
function createWave(waveFilter, resetTime) {
  // 震波的时间变化
  waveFilter.time += 0.01
  if (waveFilter.time > resetTime) {
    waveFilter.time = 0
    waveFilter.center = [Math.random() * app.screen.width, Math.random() * app.screen.height]
  }
}

// 监听点击事件,产生震波
app.view.addEventListener('click', (e) => {
  shockwaveFilter1.center = [e.clientX, e.clientY]
  shockwaveFilter1.time = 0
})

下面为完成效果:

详细代码拆解

导入PIXI和需要的震波滤镜

import * as PIXI from 'pixi.js'
import { ShockwaveFilter } from 'pixi-filters'

创建画布并将画布添加到dom中

const app = new PIXI.Application({
  width: window.innerWidth, // 设置画布宽高与窗口宽高相同
  height: window.innerHeight,
  background: 0x1099bb, // 画布背景颜色
  resolution: window.devicePixelRatio || 1, // 像素比例，查看设备是否具有像素比例，没有的话则默认为1
  antialias: true // 抗锯齿
})
// 将应用画布添加到dom中
document.body.appendChild(app.view)

创建容器并将背景图加到容器中

// 创建一个纹理
const texture = PIXI.Texture.from('../public/img1.jpg')
// 创建一个精灵
const sprite = new PIXI.Sprite(texture)
sprite.width = app.screen.width
sprite.height = app.screen.height
// 创建容器
const container = new PIXI.Container()
// 将精灵加到容器中
container.addChild(sprite)
// 将容器加到舞台中
app.stage.addChild(container)

添加文字

// 添加文字
const text = new PIXI.Text('破 碎 王 冕', {
  fontFamily: 'Arial',
  fontSize: 30 + Math.floor(window.innerWidth / 20), // 根据页面调整文字大小
  fill: 0xffffff,
  align: 'center',
  dropShadow: true, // 给文字添加阴影效果
  dropShadowColor: '#000000', // 阴影颜色
  dropShadowBlur: 4,
  dropShadowAngle: Math.PI * 0.25, // 光纤照射角度 从左到右
  dropShadowDistance: 10 // 阴影与字体距离
})
// 设置文字位置和文字大小
text.x = app.screen.width / 2
text.y = app.screen.height / 2
text.anchor.set(0.5)
container.addChild(text)

添加置换滤镜

//添加置换滤镜
// 创建置换贴图精灵
const displacementSprite = PIXI.Sprite.from('https://s1.aigei.com/pvimg/img/png/de/de499f1dda9a4e9da1fa1815410b1617.png?imageMogr2/auto-orient/thumbnail/!237x237r/gravity/Center/crop/237x237/quality/85/&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:iJpRumxLmQelW9sN_wrsdsD8yR4=')
// 调整置换精灵贴图的大小
displacementSprite.scale.set(7)
// 纹理平铺并且允许重复
displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT
// 创建纹理滤镜
const displacementFilter = new PIXI.DisplacementFilter(displacementSprite)
// 将置换贴图精灵添加到容器内
container.addChild(displacementSprite)

重点来了,置换贴图是为了让页面背景图有水波的效果,置换贴图要求不是很高,随便在网上找一张有水波效果的图片即可,将其设置为背景图的滤镜,之后纹理平铺且允许重复将背景图片占满,这个时候你会发现图片只是因为水波纹理滤镜有些扭曲,并不会动

// 添加动态效果
app.ticker.add((delta) => {
  displacementSprite.x += 1
  displacementSprite.y += 1
})

为水波纹理滤镜添加动态效果使其不断在平铺位置移动,这样就会产生水波的动态效果了

其中还有一点需要理解就是 displacementSprite.scale.set(7) 这句代码用于调整水波纹理图的大小,修改数值你会发现数值越大水波效果越慢,数值越小水波效果越快,这是什么原因?因为重复平铺,如果水波纹理图越大平铺的水波纹理就越稀疏,因此水波效果较慢,反之则比较密集,因此较快

创建震波

震波滤镜需要用到github中的一个包,网址如下:https://github.com/pixijs/filters

该包除了震波以外还有其他很多有意思的滤镜,感兴趣的可以去看一下

安装指令:

npm install pixi-filters

导入在开头

// 添加震波滤镜
const shockwaveFilter1 = new ShockwaveFilter([Math.random() * app.screen.width, Math.random() * app.screen.height], {
  radius: 160, // 半径
  wavelength: 65, // 波长
  amplitude: 105, // 振幅
  speed: 200 // 速度
})
const shockwaveFilter2 = new ShockwaveFilter([Math.random() * app.screen.width, Math.random() * app.screen.height], {
  radius: 100, // 半径
  wavelength: 50, // 波长
  amplitude: 80, // 振幅
  speed: 300 // 速度
})
const shockwaveFilter3 = new ShockwaveFilter([Math.random() * app.screen.width, Math.random() * app.screen.height], {
  radius: 90, // 半径
  wavelength: 50, // 波长
  amplitude: 100, // 振幅
  speed: 250 // 速度
})
const shockwaveFilter4 = new ShockwaveFilter([Math.random() * app.screen.width, Math.random() * app.screen.height], {
  radius: 120, // 半径
  wavelength: 70, // 波长
  amplitude: 80, // 振幅
  speed: 200 // 速度
})

// 将滤镜添加到容器内
container.filters = [displacementFilter, shockwaveFilter1, shockwaveFilter2, shockwaveFilter3, shockwaveFilter4]
// 添加动态效果
app.ticker.add((delta) => {
  displacementSprite.x += 1
  displacementSprite.y += 1
  createWave(shockwaveFilter1, 2)
  createWave(shockwaveFilter2, 1)
  createWave(shockwaveFilter3, 2.5)
  createWave(shockwaveFilter4, 1.75)
})

// 控制震波的方法
function createWave(waveFilter, resetTime) {
  // 震波的时间变化
  waveFilter.time += 0.01
  if (waveFilter.time > resetTime) {
    waveFilter.time = 0
    waveFilter.center = [Math.random() * app.screen.width, Math.random() * app.screen.height]
  }
}

如上,创建了四个震波滤镜,并在定时函数中调用,如果想要多一些可以再多创建,并且震波的半径波长等都是可以修改的

如果只是创建了震波并且添加到页面中你会发现确实会出现震波,但是震波并不会动,也没有办法重新产生,这就需要用到控制震波的方法了

/ 控制震波的方法
function createWave(waveFilter, resetTime) {
  // 震波的时间变化
  waveFilter.time += 0.01
  if (waveFilter.time > resetTime) {
    waveFilter.time = 0
    waveFilter.center = [Math.random() * app.screen.width, Math.random() * app.screen.height]
  }
}

该方法中两个参数第一个为震波滤镜,第二个为震波存在的时间

首先震波中存在一个time属性,在github中找到滤镜,在里面修改time属性你会发现time动态一点带你增大震波会向外扩散,time动态一点点减小震波会回缩,如此就可以知道time是用来动态增加随着time的增加震波逐渐向外扩散的,因此方法内判断times属性是否大于震波存在时间,如果大于则说明震波存在时间够了,需要重新产生新的震波了,time属性直接赋值为0重新开始,之后震波的位置利用Math.random()方法随机产生零到一之间的数,再乘以页面长宽就可以产生一个位于页面内的随机坐标了

鼠标点击产生震波

// 监听点击事件,产生震波
app.view.addEventListener('click', (e) => {
  shockwaveFilter1.center = [e.clientX, e.clientY]
  shockwaveFilter1.time = 0
})

监听点击事件之后在点击事件发生的位置产生一个震波即可,time属性一定要重新赋值为零,让震波从头开始

雨过天晴w
关注
JavaScript实现水波纹显示效果(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-26 587
JavaScript实现水波纹显示效果(附完整源码)
如何使用 HTML5 Canvas 制作水波纹效果
weixin_33694172的博客
09-14 349
　　今天，我们继续分享 JavaScript 实现的效果例子，这篇文章会介绍使用 JavaScript 实现水波纹效果。水波效果以图片为背景，点击图片任意位置都会触发。有时候，我们使用普通的 Javascript 就可以创建一个很有趣的解决功能。     在线演示      源码下载   Step 1. HTML 和以前一样，首先是 HTML 代码： <!DOCTYPE...
PixiJS Filters 开源项目教程
最新发布
gitblog_00512的博客
08-21 353
PixiJS Filters 开源项目教程 filtersCollection of community-authored custom display filters for PixiJS项目地址:https://gitcode.com/gh_mirrors/fi/filters 1. 项目的目录结构及介绍 PixiJS Filters 项目的目录结构如下： /pixi-filters ├──...
css3+js水波纹效果
切图仔
08-15 3999
html: <div id="wrap"> <h1>Android L Ripple Effect</h1> <div id="main"> <button>BUTTON</button> <button>BU
JS水波效果
11-30
javascript实现的水波效果，使用HTML canvas标签实现显示界面
js点击按钮实现水波纹效果代码（CSS3和Canves）
10-21
主要为大家详细介绍了点击按钮实现水波纹效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生js水波纹特效
qq_35907133的博客
11-08 801
原理，通过监听按下事件，获取到点击坐标，将获取到的坐标通过class代入到自定义变量中，css中写入相关样式，引用伪元素，只需改变点击坐标点即可
基于canvas使用three.js制作的立体水波纹效果
04-08
使用three.js绘制的具有立体感的水波面效果，里面涉及很多算法，没有思路的同学可以借鉴一下。
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
01-19
今天，我们继续分享 JavaScript 实现的效果例子，这篇文章会介绍使用 JavaScript 实现水波纹效果。水波效果以图片为背景，点击图片任意位置都会触发。有时候，我们使用普通的 Javascript 就可以创建一个很有趣的解决...
小程序版解压木鱼，电子木鱼，水波波纹效果
09-26
本文将深入探讨“小程序版解压木鱼”这一话题，包括它的功能、实现原理以及电子木鱼与水波波纹效果的技术细节。 “解压木鱼”是一款以模拟传统木鱼敲击声效为主要内容的应用，旨在帮助用户缓解压力、集中注意力或...
Android 水波效果源码.zip
07-17
"Android水波效果源码"是一个专为Android平台设计的动态效果库，它能够帮助开发者实现类似水面波动的交互体验，让用户的触摸操作看起来更加生动有趣。这个压缩包包含了实现这种效果所需的全部源代码，对于想要在自己...
基于JS+Canves实现点击按钮水波纹效果
10-21
本文给大家分享基于js和canves实现点击按钮水波纹效果，效果非常逼真，对此感兴趣的朋友一起看看吧
HTML实现水波纹效果
11-17
通过HTML配合java1.2实现的图片水波纹效果，直接解压缩点击当中的网页就能实现~！
基于PixiJS实现超炫背景特效特效代码
03-20
基于PixiJS实现超炫背景特效是一款基于Pixi.js制作的动态背景动画特效。
基于PixiJS实现超炫背景特效.zip
07-05
基于PixiJS实现超炫背景特效是一款基于Pixi.js制作的动态背景动画特效。
HTML5 Canvas水波纹特效.zip
07-11
代码简介：HTML5 Canvas水波纹特效是一款逼真的水波纹动画效果。
VB制作文字水波倒影效果
05-07
以上就是VB制作文字水波倒影效果的主要知识点。通过理解这些概念，开发者可以创建出具有视觉吸引力且交互性强的图形应用。在实际编程过程中，还需要结合具体的VB代码和调试技巧，才能最终实现预期的效果。
JS实现水波涟漪特效
weixin_52580677的博客
01-17 2814
JS实现水波涟漪效果 通过鼠标点击事件，获取当前鼠标点击位置，生成定义好的元素，从而实现效果
css+js实现水波纹动画
weixin_46389242的博客
11-14 867
css+js实现水波纹动画
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值