<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>{$title}</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" /> <meta name="format-detection" content="telephone=no" /> <style type="text/css"> canvas { 100%; height: 100%; } #preview-box { 242px; height: 141px; position: relative; } #preview-box img { 100%; height: 100%; position: absolute; left: 0px; top: 0px; display: none; } </style> </head> <body> <div id="preview-box"> <img src="/moban/images/1/p1_wz2.png" /> </div> <script src="/moban/js/jquery.min.js"></script> <script src="/moban/js/pixi-legacy.js"></script> <script src="/moban/js/TweenMax.js"></script> <script type="text/javascript"> // 简单的数组随机取值函数 function random(arr) { return arr[Math.floor(Math.random() * arr.length)] } let num = 20000 game = new PIXI.Application({ 242, height: 141, backgroundColor: 'transparent' }); // 添加pixi舞台到页面上展示 document.getElementById('preview-box').appendChild(game.view) // 生成粒子 let paticles = new PIXI.ParticleContainer(num); for (let n = 0; n < num; n++) { let d = new PIXI.Sprite(PIXI.Texture.WHITE)
d.tint = 0xE1C57F; d.name = n d.width = 1 d.height = 1 d.anchor.set(Math.random(), Math.random()) d.position.set(game.renderer.width * Math.random(), game.renderer.height * Math.random()) d.dx = d.x d.dy = d.y d.alpha = Math.random() paticles.addChild(d) } game.stage.addChild(paticles) // ticker 进行动画执行 PIXI.Ticker.shared.add(() => { paticles.children.forEach(d => { if (d.dx !== d.x) { d.x += (d.dx - d.x) / 20 } if (d.dy !== d.y) { d.y += (d.dy - d.y) / 20 } }) }) var sprite = PIXI.Sprite.from('/moban/images/1/p1_wz2.png'); join(game.renderer, sprite, paticles) setTimeout(function(){ $('#preview-box img').fadeIn(); TweenMax.to(paticles,1,{alpha:0}) setTimeout(function(){ game.stage.removeChildren() },1000) },1500) // 聚合动画 function join(renderer, sprite, paticles) { var sprite = PIXI.Sprite.from('/moban/images/1/p1_wz2.png'); game.stage.addChild(sprite) setTimeout(function() { let { x: ox, y: oy, width, height } = sprite.getBounds(); // 提取贴图数据 let shadow = new PIXI.Container() shadow.addChild(sprite) let dotData = renderer.plugins.extract.pixels(shadow); shadow.destroy() // 提取有颜色的点 let colorPos = [] for (let y = 0; y < height; y += 1) { for (let x = 0; x < width; x += 1) { let alpha = dotData[y * width * 4 + x * 4 + 3]; if (alpha > 1) { colorPos.push({ x: ox + x, y: oy + y }) } } } // 将所有粒子随机分配到目标点上 paticles.children.forEach(d => { let pos = random(colorPos) d.dx = pos.x d.dy = pos.y }) // 销毁 dotData = null colorPos = null }, 200) } </script> </body> </html>
pixijs 粒子聚合图片