-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
104 lines (93 loc) · 2.84 KB
/
index.html
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
<head>
<script src="pixi.js"></script>
<script src="pixi-spine.js"></script>
<script>
var app;
var spine;
window.addEventListener("load",init);
function playAnim()
{
spine.state.setAnimation(0,"animation",false);
}
function playAnimAfterHiding()
{
var method = document.getElementById("method").value;
if (method == "direct")
{
console.log("playing directly");
//this doesn't work
playAnim();
}
else if (method == "ticker")
{
//nor does this
PIXI.ticker.shared.addOnce(function(){console.log("Ticker play"); playAnim()});
}
else if (method == "timeout")
{
//however, after waiting ~20ms, it will play
setTimeout(function(){console.log("SetTimeout play"); playAnim()},20);
}
else if (method == "raf")
{
//RAF also works
window.requestAnimationFrame(function(){console.log("RAF play"); playAnim()});
}
}
function init()
{
app = new PIXI.Application();
document.getElementById("canvas-container").appendChild(app.view);
//add, play animation, wait 2000ms, set visible to false, wait 1000ms, set visible to true, play anim again
document.getElementById("test-visibility").addEventListener("click",function(e){
app.stage.addChild(spine);
playAnim();
setTimeout(function(){
console.log("hiding spine and waiting 1000ms");
spine.visible = false;
setTimeout(function(){
console.log("showing spine and playing anim");
spine.visible = true;
playAnimAfterHiding();
},1000);
},2000)
});
//add, play animation, wait 2000ms, remove from stage, wait 1000ms, add to stage, play anim again
document.getElementById("test-removing").addEventListener("click",function(e){
app.stage.addChild(spine);
playAnim();
setTimeout(function(){
console.log("removing spine and waiting 1000ms");
spine.parent.removeChild(spine);
setTimeout(function(){
console.log("adding spine and playing anim");
app.stage.addChild(spine);
playAnimAfterHiding();
},1000);
},2000);
});
PIXI.loader
.add("test","test.json")
.load(function(loader,resources){
spine = new PIXI.spine.Spine(resources.test.spineData);
spine.scale.set(0.5);
spine.position.set(app.renderer.width/2,app.renderer.height/2);
app.start();
});
}
</script>
</head>
<body>
<div id="canvas-container"></div>
<button id="test-visibility">test - visibility</button>
<button id="test-removing">test - removing</button>
<select id="method">
<option label="direct" value="direct">direct</option>
<option label="ticker" value="ticker">ticker</option>
<option label="timeout" value="timeout">timeout</option>
<option label="RAF" value="raf">raf</option>
</select>
</body>
</html>