forked from jeremyckahn/rekapi
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsandbox.html
148 lines (135 loc) · 4.48 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
<!DOCTYPE html>
<html>
<head>
<title>Rekapi - A keyframe animation library for JavaScript</title>
<link href='style.css' rel='stylesheet' type='text/css'>
<script src="dist/rekapi-lodash-shifty.min.js"></script>
<script src="dist/asset/jquery.js"></script>
<script src="dist/asset/ace.js"></script>
<script src="dist/asset/theme-textmate.js"></script>
<script src="dist/asset/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 Actor API <a href="/dist/doc/src/rekapi.actor.js.html" target="_blank">here</a>. Preview the available easing curves <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');
var rekapi = new Rekapi($canvas[0].getContext('2d'));
rekapi.renderer.height(480);
rekapi.renderer.width(400);
var actor = new Rekapi.Actor({
'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');
rekapi.addActor(actor);
var update = $('#update')
,oldCode = editor.getSession().getValue();
update.on('click', function (evt) {
var newCode = editor.getSession().getValue();
try {
rekapi.stop();
actor.removeAllKeyframes();
eval(newCode);
rekapi.play();
oldCode = newCode;
} catch (ex) {
// eval failed, run the last code that didn't error out
rekapi.stop();
actor.removeAllKeyframes();
eval(oldCode);
rekapi.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 () {
rekapi.play();
});
$('#pause').on('click', function () {
rekapi.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>