/
example.html
122 lines (99 loc) · 2.59 KB
/
example.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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!doctype html>
<html>
<head>
<script type="text/javascript" src="example_anim.js"></script>
<script type="text/javascript">
var delay_scale = 0.7
var timer = null
var animate = function(img, timeline, element)
{
var i = 0
var run_time = 0
for (var j = 0; j < timeline.length - 1; ++j)
run_time += timeline[j].delay
var f = function()
{
var frame = i++ % timeline.length
var delay = timeline[frame].delay * delay_scale
var blits = timeline[frame].blit
var ctx = element.getContext('2d')
for (j = 0; j < blits.length; ++j)
{
var blit = blits[j]
var sx = blit[0]
var sy = blit[1]
var w = blit[2]
var h = blit[3]
var dx = blit[4]
var dy = blit[5]
ctx.drawImage(img, sx, sy, w, h, dx, dy, w, h)
}
timer = window.setTimeout(f, delay)
}
if (timer) window.clearTimeout(timer)
f()
}
var animate_fallback = function(img, timeline, element)
{
var i = 0
var run_time = 0
for (var j = 0; j < timeline.length - 1; ++j)
run_time += timeline[j].delay
var f = function()
{
if (i % timeline.length == 0)
{
while (element.hasChildNodes())
element.removeChild(element.lastChild)
}
var frame = i++ % timeline.length
var delay = timeline[frame].delay * delay_scale
var blits = timeline[frame].blit
for (j = 0; j < blits.length; ++j)
{
var blit = blits[j]
var sx = blit[0]
var sy = blit[1]
var w = blit[2]
var h = blit[3]
var dx = blit[4]
var dy = blit[5]
var d = document.createElement('div')
d.style.position = 'absolute'
d.style.left = dx + "px"
d.style.top = dy + "px"
d.style.width = w + "px"
d.style.height = h + "px"
d.style.backgroundImage = "url('" + img.src + "')"
d.style.backgroundPosition = "-" + sx + "px -" + sy + "px"
element.appendChild(d)
}
timer = window.setTimeout(f, delay)
}
if (timer) window.clearTimeout(timer)
f()
}
function set_animation(img_url, timeline, canvas_id, fallback_id)
{
var img = new Image()
img.onload = function()
{
var canvas = document.getElementById(canvas_id)
if (canvas && canvas.getContext)
animate(img, timeline, canvas)
else
animate_fallback(img, timeline, document.getElementById(fallback_id))
}
img.src = img_url
}
</script>
</head>
<body>
<p>Example Animation. Please ensure you've run anim_encoder.py to generate the required data.
<div><canvas id="anim_target" class="anim_target" width="800" height="450">
<div id="anim_fallback" class="anim_target" style="width: 800px; height: 450px; position: relative;"></div>
<p></canvas></div>
<script>
set_animation("example_packed.png", example_timeline, 'anim_target', 'anim_fallback');
</script>
</body>