-
Notifications
You must be signed in to change notification settings - Fork 19
/
play.html
50 lines (40 loc) · 2.2 KB
/
play.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
<html>
<script src="snap.svg-min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<path fill="#FFFFFF" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" d="M56.729,31.726"/>
<path fill="#FFFFFF" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" d="M58.645,57.807"/>
<polygon fill="#FFFFFF" stroke="#FFFFFF" id="upper" points="60.965,32.154
2.162,32.154
2.162,2.428 2.162,2.428"/>
<polyline fill="#FFFFFF" stroke="#FFFFFF" id="lower" points="2.198,62
61.001,32
2.198,32 2.198,32"/>
</svg>
<script>
window.onload = function () {
var upper = Snap.select("#upper");
var lower = Snap.select("#lower");
var timer;
function revert() {
upper.animate({
transform: "r" + 0+ ","+String(upper.getBBox().width/2)+","+String(upper.getBBox().height),
points: "60.965,32.154 2.162,32.154 2.162,2.428 2.162,2.428"
}, 350, mina.easeout);
lower.animate({
transform: "r" + 0 + ","+String(lower.getBBox().width/2)+","+String(lower.getBBox().height),
points: "2.162,62 61.001,32 2.162,32 2.162,32"}, 350, mina.easeout);
}
function open() {
clearTimeout(revert);
upper.animate({
transform: "r" + 90 + ","+String(upper.getBBox().width/2)+","+String(upper.getBBox().height),
points: "60.965,22.154 2.162,22.154 2.162,2.428 60.965,2.428"}, 350, mina.easeinout);
lower.animate({
transform: "r" + 90 + ","+String(lower.getBBox().width/2)+","+String(lower.getBBox().height),
points: "2.162,52 61.001,52 61.001,32 2.162,32"}, 350, mina.easeinout, function () { setTimeout(revert, 1000); });
}
upper.click(open);
}
</script>
</html>