#青训营笔记创作活动#
2月16日 打卡day40
水波交互动画
借助pixijs来实现水波过滤效果
引入 pixi-filters.js 库后,我们就可以用它实例化一个 ShockwaveFilter 类来完成波纹效果,具体来说,就是在点击屏幕容器的时候,会实例化ShockwaveFilter 类,其中可以随机传入振幅、波长、速度、半径等参数,目的是为了让每次点击水波效果都有些许差异。再将这个过滤器添加一个单独的数组中保存,同时还要添加到 filters 中,在 step 方法不停执行的时候,我们就要遍历这个 shockwaveFilters 数组,将它的 time 属性累加就会产生水波效果动画了。但是别忘了,它执行完之后还要记得移除掉,避免占用内存空间。
2月16日 打卡day40
水波交互动画
借助pixijs来实现水波过滤效果
引入 pixi-filters.js 库后,我们就可以用它实例化一个 ShockwaveFilter 类来完成波纹效果,具体来说,就是在点击屏幕容器的时候,会实例化ShockwaveFilter 类,其中可以随机传入振幅、波长、速度、半径等参数,目的是为了让每次点击水波效果都有些许差异。再将这个过滤器添加一个单独的数组中保存,同时还要添加到 filters 中,在 step 方法不停执行的时候,我们就要遍历这个 shockwaveFilters 数组,将它的 time 属性累加就会产生水波效果动画了。但是别忘了,它执行完之后还要记得移除掉,避免占用内存空间。
展开
评论
点赞