Contents

pixi-particles 羽毛特效分析筆記

Contents

http://i.imgur.com/gSfaqHF.gif
上篇記錄了[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