logo-small.png

Project Description
AnimeJ is a JavaScript Engine featuring a generalized timer implemented using a single browser timer. It is capable of animating hudredth of items, and sports a timeline abstraction capable of reverse execution, pause and resume. Multiple timeline can be used simultaneously.

News! AnimeJ is now part of the Dojo Foundation and the source code is being modified to match dojo coding conventions. More information and documentation will be made available soon.

Why?

Perhaps the most obvious question when you see this library is why? Why not use one of the many available? Reasons I've found are:
  • it is very LIGHTWEIGHT, less than 500 loc without comments (and before stripping)
  • it is self-contained and not tied to a particular widget framework so that you can use it as you wish
  • it features a generalized OO timer for your JS applications, not only animations
  • it allows easy animation of existing DOM nodes because of its design
  • it is EFFICIENT since it uses well known CS theory about shared timers to use only ONE timer
  • it allows saving animation curves and apply them to multiple objects naturally
  • it is one of the most beautiful pieces of code I ever written and I would love to share it with people

Examples from the distribution:

A simple example

The best way to introduce something is with an example, and I don't think I have to spend much time in convince DHTML developers that Javascript animation is useful if efficient and expressive! Here is a collapsible textbox animated using AnimeJ:

<html>
<head>
  <title>Auto-hide text box</title>
  <script type="text/javascript" src="..\..\src\AnimeJCompact.js"></script>
<script>
function transition(btn) {
  var txt = btn.parentNode.getElementsByTagName('input')[0];
  var isHidden = txt.style.display == 'none';
  if (isHidden) txt.style.display = 'inline';
  if (!btn.timeline) {
    var t = new Timeline();
    t.SetAt(0, AnimeJInterp.px(1000, 30, txt.style, 'width', 0, 120));
    t.SetAt(0, AnimeJInterp.alpha(1000, 30, txt, 0.0, 1.0));
    t.OnEnd = function (d, rev) {
      if (!rev)  btn.innerHTML = '&lt;&lt;';
      else { btn.innerHTML = '&gt;&gt;'; txt.style.display = 'none'; }
    };
    btn.timeline = t;
  }
  btn.timeline.Run(!isHidden);
}
</script>
</head>
<body>
  <span>
    <input type="text" width="120px"></input>
    <span style="cursor: pointer; color: Blue" onclick="transition(this)">&lt;&lt;</span>
  </span>
</body>
</html>

The example animates a textbox that collapses in a second and fade away. You can then revert the effect and make the textbox reappear.

The AnimeJ interface is based on the popular Timeline abstraction: simply creates a timeline, add tasks at given moments and
start it. The library takes care of concurrency and other amenities in very efficient ways (by using a single timer) and it is very lightweight! 500 loc without comments.

The library has been developed for the Toscana4U Web site that uses it extensively.

Enjoy, and leave feedback!

Last edited Aug 31, 2010 at 12:59 PM by cisterni, version 15