CAAT. Canvas Advanced Animation Toolkit

Find tutorials and demos on CAAT Here

Fork and contribute to CAAT here

CAAT in essence is a multi-instance director-based Scene graph manager.
It is multi-instance in the sense that you can set an undefined number of directors up for each web page.
Each director is able to manage different Scenes with different timelines.
The scenes contain a graph of different Actor and Containers which conform the animation elements.

CAAT has some features out-of-the-box among which we can highlight:

  • Seamless zero-coding WebGL and CSS rendering engines.
  • Unlimited number of Scenes per Director.
  • Unlimited number of Actors and ActorContainers per Scene.
  • Hierarchycally applied affine transformations (rotations, scales and translations).
  • Hierarchycally applied alpha composition.
  • Unlimited number of timers per Scene.
  • Ability to define complex paths for translations applied to Actors and ActorContainers.
  • Easing and interpolation functions for affine transformations and alpha transparency application.
  • Homogeneous coordinate system. Each contained Actor will receive correct input coordinates on its coordinate system
    regardless of its parents applied transformations.
  • Abstracted input system, from mouse events to keyboard and accelerometer.
  • Resource management and preloading.
  • Many types of actors supported: Sprites, Shapes, Text, Path, Interpolator, etc.
  • Easily extendable framework.
  • Open Source and MIT Licensed.
  • Performs properly in all major canvas enabled browsers. Internet explorer must be version 9 or greater.

Following is a technical demo which shows some of the previosly mentioned features.

I’ve developed the game MathMayhem on top of CAAT.

Animation Framework

Math Mayhem

A rush against time to add up the required number. Beat the chrono while stressing your mental agility.

Or play WebGL enabled version.

  • Pingback: Tweets that mention Animation framework | HyperAndroid -- Topsy.com

  • Franz

    Genial… si estás pensando en dejarlo open source y necesitas beta-testers, encantadissimo. Yo vengo de actionscript, no se si te sirve.

    Saludos y felicidades!

  • http://mynameiskaneel.com/ kaneel

    serious dope! I love the fish field!

  • Pingback: EdTechDev

  • Pingback: Eltit Golb

  • Pingback: Quora

  • Pingback: Quora

  • Oposit

    Simplemente fabuloso

  • Pingback: MegaSoul · Game Engines – GitHub

  • Pingback: What do we need for HTML5 games to be awesome? « Smashinglabs

  • Bert Wijnants

    Impressive!

  • http://www.solidcoresolutions.com Eric Berry

    Amazing job! Thanks for making this open source!!!

  • Anónimo

    I love this. Seriously love this.

  • http://www.facebook.com/people/Michael-Willy/1163998262 Michael Willy

    Are you available for a freelance project.?

    • Anónimo

      send me an email :)

      2011/11/26 Disqus

  • Vinay Chandra

    can we embed font through the caat…????

    • Anónimo

      Hi, vinay

      If you mean whether you could use embedded fonts like google fonts, the answer is yes.
      The only drawback is that by the time the canvas element accessed in example a CAAT.TextActor which uses the font embedded, it may happen the font is not still loaded. To prevent this, you should create a div in your markup which references the embedded font, something like:

      .

      which will make your embedded font to be preloaded.

      CAAT supports sprited fonts with the object CAAT.Font object. You could also draw text with an atlas texture with the CAAt.SpriteImage object as well.
      Hope this helps.

      Regards,

      -ibon

      2012/1/24 Disqus

  • Drudi

    is this project still alive ?

  • Pingback: WebGL Game – Sumon (aka Math Mayhem) and CAAT (Canvas Advanced Animation Toolkit)

  • http://www.facebook.com/deviator206 Sandeep Bamane

    I have 2 different CAAT.Actor objects. I require the effect of fading in and out on both objects but one at a time. First obj1 shd fade out then obj2. Loop continues when obj2 has fade out ….

    I tried applying CAAT.AlphaBehavior set the cycle as false alpha_1= new CAAT.AlphaBehavior().
            setValues(1,0).
            setCycle(false).
            setFrameTime( 0, 3000 ); as soon as i get expired event  -  i try resetting same behavior again. But this doesnt seem working.. Let me know if i am on right track or if there is a better way to achieve this behavior .

  • Sanjaydhawan

    Hi,

    Can it handle multi-column long text with an option for dynamic font sizes and text reflow ?

    • hyperandroid

      There’s no such feature in CAAT.
      If using CSS, you could access the wrapped div object and set its inner html though.
      regards,

      -ibon

      El 12 de marzo de 2012 03:55, Disqus
      escribió:

      • Sanjaydhawan

         Thank you for the reply.
        Can we package CAAT efficiently with Phone Gap for Android devices ?

        • hyperandroid

          By efficiently you mean it will perform fast ?
          If so, I think it won’t. And not because CAAT implementation.
          You could try other javascript wrapping frameworks like CocoonJS from http://www.ludei.com.

          Regards,
          -ibon

      • Sanjaydhawan

        Can CAAT be mixed with another JS framework ?

        • hyperandroid

          CAAT is opensource and MIT license, so depending on other JS frameworks you could.
          Up to you, but always make sure both licenses can co-exist.

          -ibon

  • Clemorphy

    Hi.
    According to documentation, CAAT.actor have mouseOver and mouseOut events.But I can’t get them working. Is this an error in the documentation or do these events really exist ?What are the differences with the mouseEnter and mouseExit events ?Thx.

  • Pingback: Ludei » The CocoonJS Launcher App: A simple tutorial

  • sergi

    CAAT follows the standard AMD ? Is possible to it use with Requirejs ?

    Thanks

    • hyperandroid

      It doesn’t.
      Have thought about it since a while, but i’m not sure whether it will be worth it.
      any comments in favor of AMD or CommonJS :) ?
      best.

      -ibon

  • Vinícius Uzêda

    Hi,

    The tutorial says:

    There’s also a native implementation which executes CAAT seamlessly on iOS and Android.
    Where can I get those?

    Thanks!

  • Sander

    Is this project still alive? Can’t seem to find an active community. Am I wrong? This project looks really promising, but I need to know if it’s not abandoned… Thanks!

  • Leandro A. Aguilar Ogrin

    Hi, I have wrote in the forum, still no reply..how can I rotate an actor ( an image for example) in each path segment? I want it rotates to certain degrees when going up and then other degress when going down. Like in some flappy bird jump movement.
    thanks,