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 mediump float; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float uTime; uniform float uAspect; uniform float centerGap; void main (void) { vec4 coord = gl_FragCoord; float angle = 3.0; float split = 70.0; float speed = 0.000001; float distance = distance(coord.x - centerGap + split, coord.y / angle) / split; float offset = floor(distance) * floor(distance) * floor(distance) * floor(distance) * uTime * speed * distance; float x = vTextureCoord.x + offset / angle * uAspect; float y = vTextureCoord.y - offset; if (x < 0.0 || y < 0.0) discard; 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.10.1.js"></script> <script > // filter PIXI.filters.MyFilter = class extends PIXI.Filter { constructor() { const fragmentSrc = document.querySelector('#fs').textContent super( null, // vertex shader fragmentSrc, // fragment shader { uTime: 0.0, uAspect: 1.0, centerGap: 0.0, } ) } } // variables const imageSize = 300 // setup const app = new PIXI.Application({ transparent: true, resizeTo: window, }) document.body.appendChild(app.view) // rectangle const background = new PIXI.Graphics() .drawRect(0, 0, window.innerWidth, window.innerHeight) .endFill() const background1 = new PIXI.Graphics() .drawRect(0, 0, window.innerWidth, window.innerHeight) .endFill() const background2 = new PIXI.Graphics() .drawRect(0, 0, window.innerWidth, window.innerHeight) .endFill() const background3 = new PIXI.Graphics() .drawRect(0, 0, window.innerWidth, window.innerHeight) .endFill() const background4 = new PIXI.Graphics() .drawRect(0, 0, window.innerWidth, window.innerHeight) .endFill() app.stage.addChild(background) // container const container1 = new PIXI.Container() const container2 = new PIXI.Container() const container3 = new PIXI.Container() const container4 = new PIXI.Container() container1.width = container2.width = container3.width = container4.width = window.innerWidth container1.height = container2.height = container3.height = container4.height = window.innerHeight container1.addChild(background1) container2.addChild(background2) container3.addChild(background3) container4.addChild(background4) app.stage.addChild(container1) app.stage.addChild(container2) app.stage.addChild(container3) app.stage.addChild(container4) // image const gap = 20 const image1 = PIXI.Sprite.from('//repo.bfw.wiki/bfwrepo/image/6284286d59cbd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90') const image2 = PIXI.Sprite.from('//repo.bfw.wiki/bfwrepo/image/628436604b2ea.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_100,/quality,q_90') const image3 = PIXI.Sprite.from('//repo.bfw.wiki/bfwrepo/image/627ef04e2d970.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90') const image4 = PIXI.Sprite.from('//repo.bfw.wiki/bfwrepo/image/625e10c281dc9.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_300,/quality,q_90') image1.width = image2.width = image3.width = image4.width = imageSize image1.height = image2.height.........完整代码请登录后点击上方下载按钮下载查看
网友评论0