Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
150 lines (138 sloc) 4.56 KB
<!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"></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')[0]
,kapi = new Kapi(canvas, {
'fps': 60
,'height': 480
,'width': 400
})
,actor = new Kapi.Actor({
'draw': 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;
}
});
kapi.canvas_style('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();
kapi.canvas_style('background', '#ff45b1');
setTimeout(function () {
kapi.canvas_style('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>
Jump to Line
Something went wrong with that request. Please try again.