/
transition.html
92 lines (73 loc) · 2.09 KB
/
transition.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
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../../polymaps.js"></script>
<script type="text/javascript" src="ease.js"></script>
<style type="text/css">
@import url("../example.css");
</style>
</head>
<body>
<script type="text/javascript">
var po = org.polymaps;
var svg = document.body.appendChild(po.svg("svg")),
g = svg.appendChild(po.svg("g"));
var map = po.map()
.container(g);
map.add(po.image()
.url(po.url("http://{S}tile.cloudmade.com"
+ "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register
+ "/998/256/{Z}/{X}/{Y}.png")
.hosts(["a.", "b.", "c.", ""])));
var timer,
duration = 500,
x,
y,
ease = reflect(poly(3)); // cubic-in-out
window.addEventListener("mousedown", function(e) {
if (timer) clearInterval(timer);
var start = Date.now(),
end = start + duration;
x = e.clientX;
y = e.clientY;
timer = setInterval(function() {
var t = (Date.now() - start) / (end - start);
if (t >= 1) {
t = 1;
clearInterval(timer);
timer = null;
}
g.setAttribute("transform",
"translate(" + x + "," + y + ")"
+ "scale(" + (3 * ease(t) + 1) + ")"
+ "translate(" + -x + "," + -y + ")");
}, 24);
}, false);
window.addEventListener("mouseup", function(e) {
if (timer) clearInterval(timer);
var start = Date.now(),
end = start + duration,
g = document.getElementsByTagName("g")[0];
timer = setInterval(function() {
var t = (Date.now() - start) / (end - start);
if (t >= 1) {
t = 1;
clearInterval(timer);
timer = null;
}
t = 1 - ease(t);
g.setAttribute("transform",
"translate(" + x + "," + y + ")"
+ "scale(" + (3 * t + 1) + ")"
+ "translate(" + -x + "," + -y + ")");
}, 24);
}, false);
</script>
<div id="copy">
© 2010
<a href="http://www.cloudmade.com/">CloudMade</a>,
<a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors,
<a href="http://creativecommons.org/licenses/by-sa/2.0/">CCBYSA</a>.
</div>
</body>
</html>