8月24日 打卡day26
今日学习：有趣又逼真的水波交互动画
1、安装 pixi.js 库，引入并初始化
2、绘制水体背景
过滤器类 DisplacementFilter：作用是做贴图置换，做纹理偏移
传入纹理错位图，将整个过滤器类添加到 filters 数组里面
执行 ticker 在 step 方法里实现连续不断改变 x 轴坐标
3、水波动画
引入 pixi.js 的插件库 pixi-filters.js，处理很多的过滤器效果
实例化一个 ShockwaveFilter 类，能够随机传入振幅、波长、速度、半径等参数
将这个过滤器添加一个单独的数组中保存，同时也要添加到 filters 中
在 step 方法遍历这个 shockwaveFilters 数组，将它的 time 属性累加就会产生水波效果动画了
注意：执行完要移除掉，避免占用内存空间
今日学习：有趣又逼真的水波交互动画
1、安装 pixi.js 库，引入并初始化
2、绘制水体背景
过滤器类 DisplacementFilter：作用是做贴图置换，做纹理偏移
传入纹理错位图，将整个过滤器类添加到 filters 数组里面
执行 ticker 在 step 方法里实现连续不断改变 x 轴坐标
3、水波动画
引入 pixi.js 的插件库 pixi-filters.js，处理很多的过滤器效果
实例化一个 ShockwaveFilter 类，能够随机传入振幅、波长、速度、半径等参数
将这个过滤器添加一个单独的数组中保存，同时也要添加到 filters 中
在 step 方法遍历这个 shockwaveFilters 数组，将它的 time 属性累加就会产生水波效果动画了
注意：执行完要移除掉，避免占用内存空间
展开
评论
点赞
![[微笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_1.7d9f699.png)
，官方包邮。
~
doc.hutool.cn