/
sandbox.html
149 lines (138 loc) · 4.57 KB
/
sandbox.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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html>
<head>
<title>Rekapi - A keyframe animation library for JavaScript</title>
<link href='http://fonts.googleapis.com/css?family=Petrona' rel='stylesheet' type='text/css'>
<link href='lib/style.css' rel='stylesheet' type='text/css'>
<script src="dist/rekapi.bundle.min.js"></script>
<script src="lib/ace/ace.js"></script>
<script src="lib/jquery.js"></script>
<script src="lib/ace/theme-textmate.js"></script>
<script src="lib/ace/mode-javascript.js"></script>
</head>
<body>
<div id="main-container">
<header>
<a href="."><img src="demo/img/rekapi-logo-600.png" alt="Rekapi logo"></a>
<h2>A keyframe animation library for JavaScript</h2>
</header>
<p class="center">
Learn about the API <a href="https://github.com/jeremyckahn/rekapi/blob/master/docs/api.kapi_actor.md" target="_blank">here</a>. Preview the available easing formulae <a href="ease.html">here</a>.
</p>
<p class="center">
</p>
<div class="buttons">
<button id="update">Update with the keyframes below</button>
<button id="play">Play</button>
<button id="pause">Pause</button>
</div>
<div class="float-wrap">
<canvas id="sandbox" style="background: #eee;"></canvas>
<div id="editor-wrapper">
<div id="editor" style="height: 480px; width: 400px">actor
.keyframe(0, {
x: 100,
y: 100,
radius: 50,
color: '#ddd'
}).keyframe(1500, {
x: 300,
y: 380,
radius: 100,
color: '#666'
}, {
x: 'easeOutSine',
y: 'easeOutExpo',
radius: 'easeOutExpo',
color: 'easeOutExpo'
}).wait(2000);</div>
</div>
</div>
<p class="center">
You can also type <code>Ctrl+`</code> to while focused on the editor to update the animation.
</p>
<a id="fork-me-link" href="https://github.com/jeremyckahn/rekapi/"><img src="demo/img/forkme.png" alt="Fork me!" /></a>
<footer>Rekapi is free and open source software, obsessively made by <a href="http://www.jeremyckahn.com" target="_blank">Jeremy Kahn</a>.</footer>
</div>
<script type="text/javascript">
$(function () {
var editor = ace.edit("editor");
editor.setTheme("ace/theme/textmate");
var JavaScriptMode = require("ace/mode/javascript").Mode;
editor.getSession().setMode(new JavaScriptMode());
var canvas = $('canvas')
,kapi = new Kapi({
'context': canvas[0]
,'height': 480
,'width': 400
})
,actor = new Kapi.CanvasActor({
'render': function (canvas_context, state) {
canvas_context.beginPath();
canvas_context.arc(
state.x || 0,
state.y || 0,
state.radius || 50,
0,
Math.PI*2,
true);
canvas_context.fillStyle = state.color || '#444';
canvas_context.fill();
canvas_context.closePath();
return this;
}
});
canvas.css('background', '#eee');
kapi.addActor(actor);
var update = $('#update')
,oldCode = editor.getSession().getValue();
update.on('click', function (evt) {
var newCode = editor.getSession().getValue();
try {
kapi.stop();
actor.removeAllKeyframeProperties();
eval(newCode);
kapi.play();
oldCode = newCode;
} catch (ex) {
// eval failed, run the last code that didn't error out
kapi.stop();
actor.removeAllKeyframeProperties();
eval(oldCode);
kapi.play();
canvas.css('background', '#ff45b1');
setTimeout(function () {
canvas.css('background', '#eee');
}, 1200);
}
});
editor.commands.addCommand({
name: 'execute',
bindKey: {
win: 'ctrl-`',
mac: 'ctrl-`',
sender: 'editor'
},
exec: function(env, args, request) {
update.click();
}
});
$('#play').on('click', function () {
kapi.play();
});
$('#pause').on('click', function () {
kapi.pause();
});
update.click();
});
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-28621278-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>