PIXI实现图片水纹波纹波动效果-html代码-BFW代码库

PIXI实现图片水纹波纹波动效果

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=pixi.min&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {

            let type = "WebGL"
            if (!PIXI.utils.isWebGLSupported()) {
                type = "canvas"
            }

            PIXI.utils.sayHello(type)

            // 创建一个 Pixi应用 需要的一些参数
            var option = {
                width: 400,
                height: 300,
                transparent: true,
            }

            // 创建一个 Pixi应用
            var app = new PIXI.Application(option);
            // 获取渲染器
            var renderer = app.renderer;
            // 图片精灵
            var preview;
            // 置换图精灵
            var displacementSprite;
            // 滤镜
            var displacementFilter;
            // 舞台（一个容器），这里面包括了图片精灵、置换图精灵
            var stage;
            var playground = document.getElementById('px-render');

            function setScene(url) {
                // renderer.view 是 Pixi 创建的一个canvas
                // 把 Pixi 创建的 canvas 添加到页面上
                playground.appendChild(renderer.view);

                // 创建一个容器
                stage = new PIXI.Container();

                // 根据图片的 url，创建图片精灵
                preview = PIXI.Sprite.fromImage(url);

                // 创建置换图精灵，在创建置换滤镜时会用到这个精灵
                displacementSprite = PIXI.Sprite.fromImage('https://www.kkkk1000.com/images/learnPixiJS/sprite.png');

                // 设置置换图精灵为平铺模式
                displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;

                // 创建一个置换滤镜
                displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);

                // 添加 图片精灵 到舞台
                stage.addChild(preview);

                // 添加 置换图精灵 到舞台
                stage.addChild(displacementSprite);

                // 把 stage 添加到根容器上
                app.stage.addChild(stage);
            }


            // 置换图精灵的移动速度
            var velocity = 1;
            // raf 是调用 requestAni.........完整代码请登录后点击上方下载按钮下载查看