Skip to content
Graphical controls for Rekapi animations.
JavaScript CSS PHP Shell
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
dist
lib
src
.gitignore
README.md
bower.json
build-deps.sh
build.sh
sandbox-scrubber.html
sandbox-timeline.php
version.txt

README.md

Rekapi Controls

Rekapi Controls is a set of graphical tools for interacting with Rekapi animations in a browser. The goal of this project is to expose user-friendly UI components for working with animations.

Components include:

  • A scrubber for controlling the playback and position of the animtion.

Dependencies for Rekapi Controls:

All dependencies can be found in dist/.

Using Rekapi Controls

First, load the dependencies. If you don't want to hunt down the source files for everything, you can just use the minified dependency files:

  • dist/jquery.min.js
  • dist/rekapi.bundle.min.js
  • dist/rekapi-controls.min.js
  • dist/dragon-bundle.js
  • dist/jquery.dragon-slider.css
  • dist/rekapi-controls.css
  • dist/font-awesome/css/font-awesome.css

There are a few asset files that are required, but the above files will load those for you.

Create a Rekapi animation. Please see the documentation on Rekapi for more information, but here's a quick, copy/paste-able example:

<!DOCTYPE html>
<html>
<head>
  <script src="dist/jquery.min.js"></script>
  <script src="dist/rekapi.bundle.min.js"></script>
  <script src="dist/rekapi-controls.min.js"></script>
  <script src="dist/dragon-bundle.js"></script>
  <link rel="stylesheet" href="dist/jquery.dragon-slider.css">
  <link rel="stylesheet" href="dist/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="dist/rekapi-controls.css">
</head>
<body>
  <canvas></canvas>
  <script>
  var canvas = document.getElementsByTagName('canvas')[0];
  var kapi = new Kapi({
    context: canvas
  });

  var actor = new Kapi.CanvasActor({
    // Draws a circle.
    'draw': function (canvas_context, state) {
      canvas_context.beginPath();
      canvas_context.arc(
        state.x || 50,
        state.y || 50,
        state.radius || 50,
        0,
        Math.PI*2,
        true);
      canvas_context.fillStyle = state.color || '#f0f';
      canvas_context.fill();
      canvas_context.closePath();
    }
  });

  kapi.addActor(actor);

  actor
    .keyframe(0, {
      x: 50,
      y: 50
    })
    .keyframe(1000, {
      x: 200,
      y: 100
    }, 'easeOutExpo');

  kapi.play();

  </script>
</body>
</html>

Assuming that kapi is our Kapi instance, add an interactive scrubber to it like so:

var controls = new RekapiScrubber(kapi);

Poof! That's all there is to it. You can now control the animation with your mouse.

Something went wrong with that request. Please try again.