Permalink
Browse files

Merge remote branch 'upstream/master' into amd-support

  • Loading branch information...
2 parents 5f2255f + 273ec32 commit 7bbda031e162abb68f56770f6df485382883fbd1 @sork committed Apr 19, 2012
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -79,6 +79,8 @@ Kapi.prototype.getActorIds ()
Retrieve the IDs of all `Actor`s in a `Kapi` instance as an Array.
+__[Example](examples/get_actor_ids.html)__
+
### removeActor
@@ -92,6 +94,8 @@ Kapi.prototype.removeActor (actor)
Remove `actor` from the animation. This does not destroy `actor`, it only removes the link between `actor` and the `Kapi` instance.
+__[Example](examples/remove_actor.html)__
+
### play
@@ -105,6 +109,8 @@ Kapi.prototype.play (opt_howManyTimes)
Play the animation on a loop, either a set amount of times or infinitely. If `opt_howManyTimes` is omitted, the animation will loop infinitely.
+__[Example](examples/play.html)__
+
### playFrom
@@ -119,6 +125,8 @@ Kapi.prototype.playFrom (millisecond, opt_howManyTimes)
Move to a specific millisecond on the timeline and play from there. `opt_howManyTimes` works as it does in `play()`.
+__[Example](examples/play_from.html)__
+
### playFromCurrent
@@ -132,6 +140,8 @@ Kapi.prototype.playFromCurrent (opt_howManyTimes)
Play from the last frame that was drawn with `render()`. `opt_howManyTimes` works as it does in `play()`.
+__[Example](examples/play_from_current.html)__
+
### pause
@@ -0,0 +1,43 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Rekapi example</title>
+ <script src="../../dist/underscore.js"></script>
+ <script src="../../dist/shifty.js"></script>
+ <script src="../../dist/rekapi.js"></script>
+ </head>
+ <body>
+ <canvas></canvas>
+ <script>
+ var canvas = document.getElementsByTagName('canvas')[0];
+
+ var kapi = new Kapi(canvas, {
+ 'height': 300,
+ 'width': 400
+ });
+
+ var 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 || '#f0f';
+ canvas_context.fill();
+ canvas_context.closePath();
+
+ return this;
+ }
+ });
+
+ kapi.addActor(actor);
+
+ var retrievedActorIds = kapi.getActorIds();
+ console.log(retrievedActorIds); // [0] (All actor IDs start at 0)
+ </script>
+ </body>
+</html>
View
@@ -0,0 +1,46 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Rekapi example</title>
+ <script src="../../dist/underscore.js"></script>
+ <script src="../../dist/shifty.js"></script>
+ <script src="../../dist/rekapi.js"></script>
+ </head>
+ <body>
+ <canvas></canvas>
+ <script>
+ var canvas = document.getElementsByTagName('canvas')[0];
+
+ var kapi = new Kapi(canvas, {
+ 'height': 300,
+ 'width': 400
+ });
+
+ var 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 || '#f0f';
+ canvas_context.fill();
+ canvas_context.closePath();
+
+ return this;
+ }
+ });
+
+ kapi.addActor(actor);
+ actor
+ .keyframe(0, { x: 50, y: 50 })
+ .keyframe(1000, { x: 200, y: 150 });
+
+ // Play twice and then stop.
+ kapi.play(2);
+ </script>
+ </body>
+</html>
@@ -0,0 +1,46 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Rekapi example</title>
+ <script src="../../dist/underscore.js"></script>
+ <script src="../../dist/shifty.js"></script>
+ <script src="../../dist/rekapi.js"></script>
+ </head>
+ <body>
+ <canvas></canvas>
+ <script>
+ var canvas = document.getElementsByTagName('canvas')[0];
+
+ var kapi = new Kapi(canvas, {
+ 'height': 300,
+ 'width': 400
+ });
+
+ var 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 || '#f0f';
+ canvas_context.fill();
+ canvas_context.closePath();
+
+ return this;
+ }
+ });
+
+ kapi.addActor(actor);
+ actor
+ .keyframe(0, { x: 50, y: 50 })
+ .keyframe(1000, { x: 200, y: 150 });
+
+ // Play twice from millisecond 500 and then stop.
+ kapi.playFrom(500, 2);
+ </script>
+ </body>
+</html>
@@ -0,0 +1,51 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Rekapi example</title>
+ <script src="../../dist/underscore.js"></script>
+ <script src="../../dist/shifty.js"></script>
+ <script src="../../dist/rekapi.js"></script>
+ </head>
+ <body>
+ <canvas></canvas>
+ <script>
+ var canvas = document.getElementsByTagName('canvas')[0];
+
+ var kapi = new Kapi(canvas, {
+ 'height': 300,
+ 'width': 400
+ });
+
+ var 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 || '#f0f';
+ canvas_context.fill();
+ canvas_context.closePath();
+
+ return this;
+ }
+ });
+
+ kapi.addActor(actor);
+ actor
+ .keyframe(0, { x: 50, y: 50 })
+ .keyframe(1000, { x: 200, y: 150 });
+
+ // Show the animation at 500 milliseconds...
+ kapi.render(500);
+
+ setTimeout(function () {
+ // ... and then play twice from there.
+ kapi.playFromCurrent(2);
+ }, 750);
+ </script>
+ </body>
+</html>
@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Rekapi example</title>
+ <script src="../../dist/underscore.js"></script>
+ <script src="../../dist/shifty.js"></script>
+ <script src="../../dist/rekapi.js"></script>
+ </head>
+ <body>
+ <canvas></canvas>
+ <script>
+ var canvas = document.getElementsByTagName('canvas')[0];
+
+ var kapi = new Kapi(canvas, {
+ 'height': 300,
+ 'width': 400
+ });
+
+ var 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 || '#f0f';
+ canvas_context.fill();
+ canvas_context.closePath();
+
+ return this;
+ }
+ });
+
+ kapi.addActor(actor);
+
+ // Now you can see the Actor exists in the Kapi instance...
+ console.log(kapi.getActorIds());
+ kapi.removeActor(actor);
+
+ // And now you can see the Actor removed.
+ console.log(kapi.getActorIds());
+ </script>
+ </body>
+</html>
View
@@ -2,7 +2,6 @@
<html>
<head>
<title>Rekapi - A keyframe animation library for JavaScript</title>
- <link href='http://fonts.googleapis.com/css?family=Candal' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Petrona' rel='stylesheet' type='text/css'>
<link href='lib/style.css' rel='stylesheet' type='text/css'>
<link href='lib/rekapi-controls/rekapi-controls.jquery-ui-bundle.css' rel='stylesheet' type='text/css'>
@@ -16,7 +15,7 @@
<body>
<div id="main-container">
<header>
- <h1><a href="./">Rekapi</a></h1>
+ <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">
View
@@ -2,14 +2,13 @@
<html>
<head>
<title>Rekapi - A keyframe animation library for JavaScript</title>
- <link href='http://fonts.googleapis.com/css?family=Candal' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Petrona' rel='stylesheet' type='text/css'>
<link href='lib/style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="main-container">
<header>
- <h1><a href=".">Rekapi</a></h1>
+ <a href="."><img src="demo/img/rekapi-logo-600.png" alt="Rekapi logo"></a>
<h2>A keyframe animation library for JavaScript</h2>
</header>
<p>Rekapi is a helpful library for making beautiful <code>&lt;canvas&gt;</code> and DOM animations. Here are some examples of what can be easily made with Rekapi:</p>
View
@@ -19,8 +19,14 @@ header {
padding-bottom: 20px;
}
+header img {
+ display: block;
+ height: 179px;
+ margin: 0 auto;
+ padding-bottom: 8px;
+}
+
h1, h2 {
- font-family: 'Candal', sans-serif;
text-align: center;
}
View
@@ -2,7 +2,6 @@
<html>
<head>
<title>Rekapi - A keyframe animation library for JavaScript</title>
- <link href='http://fonts.googleapis.com/css?family=Candal' rel='stylesheet' type='text/css'>
<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>
@@ -14,7 +13,7 @@
<body>
<div id="main-container">
<header>
- <h1><a href="./">Rekapi</a></h1>
+ <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">

0 comments on commit 7bbda03

Please sign in to comment.