pixi+victor实现跟随鼠标彩虹发光烟花粒子动画效果代码
代码语言:html
所属分类:粒子
代码描述:pixi+victor实现跟随鼠标彩虹发光烟花粒子动画效果代码
代码标签: pixi victor 跟随 鼠标 彩虹 发光 烟花 粒子 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { padding: 0; margin: 0; overflow: hidden; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.7.2.4.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/victor.1.1.0.js"></script> <script type="module"> console.clear(); const SHOW_FLOW_FIELD = false; const PARTICLE_COUNT = 30000; const GRID_RESOLUTION = 30; function hslToHex(h, s, l) { l /= 100; const a = s * Math.min(l, 1 - l) / 100; const f = n => { const k = (n + h / 30) % 12; const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); return Math.round(255 * color).toString(16).padStart(2, '0'); // convert to Hex and prefix "0" if needed }; return `#${f(0)}${f(8)}${f(4)}`; } class Walker { constructor (texture, size, radius) { this.radius = radius this.size = size; this.speed = 0; this.startSpeed = 10; this.hue = 0; this.sparkleCount = 1; this.vectorWeight = 1; this.sprite = new PIXI.Sprite(texture); this.sprite.anchor.set(0.5); this.vector = new Victor( Math.random() * 2 - 1, Math.random() * 2 - 1) this.sprite.x = (this.size.x * 0.5) * (this.size.grid + this.size.gutter) this.sprite.y = (this.size.y * 0.5) * (this.size.grid + this.size.gutter) this.sprite.scale.set(0) } reset(position, direction, distance, hue, explode) { this.hue = hue this.startSpeed = Math.max(3, Math.min(explode ? 15 : 10, distance)) this.vector = direction this.sparkleCount = 0.2; this.speed = this.startSpeed * (explode ? 0.7 + Math.random() * 0.3 : Math.random() * 1); this.sprite.x = position.x; this.sprite.y = position.y; if(explode) this.vectorWeight = 0; } move(gridVector, delta) { this.vectorWeight += 0.05 * delta; if(this.vectorWeight > 1) this.vectorWeight = 1; this.speed -= 0.06 * delta ; if(this.speed <= 0.06) this.speed = 0 this.vector..........完整代码请登录后点击上方下载按钮下载查看
网友评论0