/
demo-easing.html
77 lines (65 loc) · 2.38 KB
/
demo-easing.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
<html>
<head>
<title>Animini Easing Demo</title>
<script src="animini.min.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css" />
<script>
function showAnimationSource() {
var o = document.getElementById('code');
if (!o) {
o = document.body.appendChild(document.createElement('pre')).appendChild(document.createElement('code'));
o.id = 'code';
}
o.innerText = Array.prototype.join.call(arguments, '\n');
}
</script>
</head>
<body>
<a href="http://github.com/roysharon/animini"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/30f550e0d38ceb6ef5b81500c64d970b7fb0f028/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub"></a>
<h1><script>document.write(document.title)</script></h1>
<div>
<b>Choose an easing function:</b><br>
<table>
<tr>
<script>
// uncomment the following line to register a new easing function
//animini.easing('random', function (x) { return x == 1 ? 1 : Math.random() * x; });
// display easing functions
for (var i in animini) if (i != 'easing') {
document.write('<td style="padding-right:3ex;">');
var a = animini[i];
document.write('<a href="#" onclick="e=animini.'+i+'.i">'+i+'.i</a><br>');
document.write('<a href="#" onclick="e=animini.'+i+'.o">'+i+'.o</a><br>');
document.write('<a href="#" onclick="e=animini.'+i+'.io">'+i+'.io</a><br>');
document.write('</td>');
}
</script>
</tr>
</table>
</div>
<div style="height:130px">
<div id="myDiv" style="position:relative;font-size:2em;">
Animini is the smallest tweening animation javascript library!
</div>
</div>
</body>
<script>
var e = animini.bounce.o;
var s1 = 'top:0px; color:#00aa00;';
var s2 = 'top:100px; color:#dd0000;';
function animate() {
// recreate animation each cycle, so we can change the easing function
var animation = animini(s1, e, 1000, s2, e, 1000, s1);
animation('myDiv', animate);
// show the animation's source
showAnimationSource(
'var s1 = "' + s1 + '"',
'var s2 = "' + s2 + '"',
'var e = animini.' + e._easing + ';',
'var animation = animini("myDiv", s1, e, 1000, s2, e, 1000, s1);',
'animation(animation); // supply the animation itself as a callback, to create an inifinte loop'
);
}
animate();
</script>
</html>