粒子特效[1] - 文字喷泉

废话不多说 shou you my code

1
2
<script src="https://cdn.bootcdn.net/ajax/libs/pixi.js/6.0.2/browser/pixi.js"></script>
<div id="preview-box" style="text-align:center"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
function random(arr){
  return arr[Math.floor(Math.random() * arr.length)]
}
function times(num, fn) {
  for (var i = 0; i < num; i++) {
    fn()
  }
}
// 创建舞台
var game = new PIXI.Application({
  width: 400,
  height: 400,
  transparent: true,
  antialias: true,
  backgroundAlpha: 0,
  backgroundColor: 'transparent'
});
document.getElementById('preview-box').appendChild(game.view);
var stage = game.stage
// 默认每个粒子的独立动画，都在1s内完成
function font(strs, count) {
  let totalFrame = 0, container = new PIXI.Container(count);
  strs = strs.split('')
  // 发射元素 60次/s
  emitter = () => {
    totalFrame++
    // 每 20 帧 增加一次元素
    if (totalFrame % 2 === 0) {
      times(3, () => {
        if (container.children.length >= count) container.children[0].destroy()
        let ele = new PIXI.Text(random(strs), {
          fontSize: 32,
          fill:PIXI.utils.rgb2hex([
            Math.random()*0.3+0.7,
            Math.random()*0.7+0.3,
            Math.random()*0.3+0.7,
          ])
        })
        ele.frame = 0
        ele.alpha = 1
        ele.anchor.set(0.5)
        ele.angle = Math.random() * 360
        ele.position.set(0, 0)
        ele.xv = (Math.random() - 0.5) * 2
        ele.xa = 0
        ele.yv = -2 * Math.random() - 8
        ele.ya = 2
        container.addChild(ele)
      })
    } 
    // // 每帧 渲染一次
    container.children.forEach(ele => {
      // 抛物运动
      let t = ele.frame / 8
      ele.x = ele.x + (ele.xv * t + ele.xa * t * t)
      ele.y = ele.y + (ele.yv * t + ele.ya * t * t)
      ele.angle += 12
      ele.scale.set(Math.sin(t / 6.35))
      ele.frame++
    })
  }
  PIXI.Ticker.shared.add(emitter)
  return container
}
let c1 = font('荡平宇内一统天下一鸣惊人凤唳九霄龙翔四海', 100)
c1.position.set(400 / 2, 400)
stage.addChild(c1)
Xu