上篇記錄了[CSS]看的到確摸不到的pointer-events屬性
裡面還有很炫的旋轉嶼毛特效
本來以為是計時器慢慢一秒做下去做旋轉
結果看code，竟然是pixijs特效做的
突破 D3.js 的速度極限 — 2D WebGL 與 PIXI.js
Pixi.js 中文教學
簡單爬一下，PixiJS算是能幫你做出動畫用WebGL 加速
因此動畫會非常順暢(應該吧，我沒用過)
旋轉是透過下面的套件來實作的
pixijs/pixi-particles: A particle system for PixiJS
官網有一些範例
雨毛旋轉範例是用snow特效
官方雨毛旋轉特效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
68{
"alpha": {
"start": 1,
"end": 0.5
},
"scale": {
"start": 1,
"end": 0.7,
"minimumScaleMultiplier": 0.5
},
"color": {
"start": "#ffffff",
"end": "#ffffff"
},
"speed": {
"start": 100,
"end": 75
},
"acceleration": {
"x": 0,
"y": 0
},
"startRotation": {
"min": 80,
"max": 100
},
"rotationSpeed": {
"min": 10,
"max": 40
},
"lifetime": {
"min": 10,
"max": 10
},
"blendMode": "normal",
"ease": [
{
"s": 0,
"cp": 0.379,
"e": 0.548
},
{
"s": 0.548,
"cp": 0.717,
"e": 0.676
},
{
"s": 0.676,
"cp": 0.635,
"e": 1
}
],
"frequency": 0.5,
"emitterLifetime": -1,
"maxParticles": 140,
"pos": {
"x": 0,
"y": 0
},
"addAtBack": false,
"spawnType": "rect",
"spawnRect": {
"x": 0,
"y": 0,
"w": 900,
"h": 100
}
}
可把上方內容載入到PixiParticlesEditor
在把雨毛傳到上面，這樣就可以在PixiParticlesEditor看到特效
pixi-particles上面還有很多特效值的玩一玩
好像還能運用在RPG Maker上面
PixiParticlesEditor pixi.js特效 - RPG Maker MV 讨论区 - 66RPG - Powered by Discuz!
參考來源：
pixi.jsを勉強する[2] -PIXI Particles- - [ALL]| アクアリングBLOG
PixiParticlesEditor