<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/> <title>test</title> <style type="text/css"> body { margin: 0px; overflow: hidden; background:#000; } #view{position:absolute;left:0;top:0} #btn{position:absolute;width:250px;height:60px;text-align:center;line-height:60px;color:#ffffff;left:200px;top:300px;cursor:pointer;background:rgba(0,0,0,0.5)} </style> </head> <body> <div id="view"></div> <div id="btn">点击显示切换效果</div> <script src="http://h5.skyfish.me/comm/js/zepto.min.js"></script> <script src="pixi.min.js"></script> <script src="js/TweenMax.min.js"></script> <!-- shaders --> <script id="vshader" type="x-shader/x-vertex"> attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; uniform mat3 projectionMatrix; varying vec2 vTextureCoord; void main(void) { vTextureCoord = aTextureCoord; gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); } </script> <script id="fshader" type="x-shader/x-fragment"> precision highp float; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform sampler2D uHeightMap; uniform float uTime; void main(void) { float height = texture2D(uHeightMap, vTextureCoord).r; vec4 color = texture2D(uSampler, vTextureCoord); if (height < uTime) { discard; } if (height < (uTime + uTime * 0.1)) { color = vec4(1.0, 0.2, 0.0, 1.0); } gl_FragColor = color; } </script> <script type="text/javascript"> var requestAnimFrame = (function () { return window.requestAnimationFrame || (window).webkitRequestAnimationFrame || (window).mozRequestAnimationFrame || (window).oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60, new Date().getTime()); }; })(); var renderer,stage,imgCon,displacementMap,displacementMap2; var crossfade = { vertexShader: document.getElementById('vshader').textContent, fragmentShader: document.getElementById('fshader').textContent, val:0 }; var shader; var w = $(window).width(); var h = $(window).height(); var isAni=false; var isShow=true; function init() { try { renderer = PIXI.autoDetectRenderer(w, h,{transparent: true}); } catch(e) { renderer = new PIXI.CanvasRenderer(w, h,{transparent: true}); } document.getElementById('view').appendChild(renderer.view); stage = new PIXI.Container(); imgCon = new PIXI.Container(); stage.addChild(imgCon); var bg = new PIXI.Sprite.fromImage('b.jpg'); imgCon.addChild(bg); displacementMap = new PIXI.Texture.fromImage("displacement-map3.png"); displacementMap2 = new PIXI.Texture.fromImage("clouds.jpg"); var uniform = { uTime: { type: "f", value: 0 }, uHeightMap: { type: "sampler2D", value:displacementMap2 } } var s = crossfade.vertexShader; var f = crossfade.fragmentShader; shader = new PIXI.Filter(s,f,uniform); imgCon.filters = [shader]; } function animate() { if(isAni) { shader.uniforms.uTime =crossfade.val; } renderer.render(stage); requestAnimFrame(animate); } init(); animate(); $('#btn').click(function(){ isAni=true; if(isShow) { isShow=false; TweenMax.to(crossfade, 2, { val: 1, ease: Sine.easeOut, onComplete: function() { crossfade.val = 1; isAni=false; } }); } else { isShow=true; TweenMax.to(crossfade, 2, { val: 0, ease: Sine.easeOut, onComplete: function() { crossfade.val = 0; isAni=false; } }); } }); </script> </body></html>