pixi+gsap实现图片撕裂拼凑入场出场动画效果代码
代码语言:html
所属分类:动画
代码描述:pixi+gsap实现图片撕裂拼凑入场出场动画效果代码
代码标签: pixi gsap 图片 撕裂 拼凑 入场 出场 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { position: relative; overflow: hidden; background: #fff; } </style> </head> <body> <script id="fs" type="x-shader/x-fragment"> precision lowp float; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float uTime; uniform float uAspect; uniform float uRandom; float rand (vec2 co) { return fract(sin(dot(co, vec2(uRandom, uRandom))) * pow(uRandom, 3.0)); } void main (void) { vec4 coord = gl_FragCoord; float angle = 3.0; float split = 15.0; float speed = 0.1; float span = distance(coord.x, coord.y / angle) / split; float power = rand(vec2(floor(span))) + 1.0; float offset = pow(power, 2.0) * uTime * speed; float x = vTextureCoord.x + offset / angle * uAspect; float y = vTextureCoord.y - offset; gl_FragColor = texture2D(uSampler, vec2(x, y)); } </script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.6.1.0.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script> <script > // variables const width = window.innerWidth; const height = window.innerHeight; const imageSize = { width: width - 200, height: height - 200 }; // setup const app = new PIXI.Application({ transparent: true, resizeTo: window }); document.body.appendChild.........完整代码请登录后点击上方下载按钮下载查看
网友评论0