Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 149 lines (137 sloc) 4.569 kb
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-underscore-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 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());

      canvas = $('canvas')
      ,kapi = new Kapi({
          'context': canvas[0]
          ,'height': 480
          ,'width': 400
        })
      ,actor = new Kapi.CanvasActor({
        '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;
        }
      });

      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>
Something went wrong with that request. Please try again.