Behaviors

Behaviors are timeboxed modifiers for some special CAAT.Actors properties.

Concretely there are already out-of-the-box Behaviors to manage:

  1. Rotations
  2. Translations across (complex or not) Paths
  3. Scale
  4. Alpha transparency
  5. Compositions of all the other types

Behaviors apply to every kind of CAAT.Actor, including Scenes. This means you can easily instrument an actor instance to rotate some degrees, scale horizontally or vertically, etc. with fine grained time control. One important thing to note about behaviors is that applying a behavior to a container makes it affect all its children. In example, if rotating a container, all its content will be rotated accordingly.

Behaviors apply linearly by default but there are Interpolators which can modify this by for example applying easing functions.

Every behavior instance must have the methods setFrameTime( time ) which defines the temporal frame where the behavior will be applied and setValues( variable number of parameters ) which defines the behavior values, called.

In this simple example, we're applying alpha behaviors to a rectangle and a circle. The rectangle's behavior keeps applying forever (setCycle is true) and the circle's one will last for ten seconds and finish applying. 

                var director = new CAAT.Director().initialize(
                        150,80,document.getElementById('_c2'));

                var scene=     director.createScene();

                // create a rectangle
                var rectangle=   new CAAT.ShapeActor().create().
                        setShape( CAAT.ShapeActor.prototype.SHAPE_RECTANGLE ).
                        setLocation(10,10).
                        setSize(60,60).
                        setFillStyle('#f00').
                        setStrokeStyle('#000');

                // create a circle
                var circle=   new CAAT.ShapeActor().create().
                        setShape( CAAT.ShapeActor.prototype.SHAPE_CIRCLE ).
                        setBounds( 80, 10, 60, 60 ).
                        setFillStyle( '#0f0' ).
                        setStrokeStyle( '#000' );

                scene.addChild(rectangle);
                scene.addChild(circle);

                // create an alpha transparency behavior, which takes two seconds to start,
                // and will be applied for five seconds. During this time, the trsnsparency
                // will fade from 1 (total opacity) to 0 (total transparency)
                var alpha_2= new CAAT.AlphaBehavior().
                        setValues(1,0).

                    // by cycling a behavior, upon expiration (on time = 7000 milliseconds),
                    // it will start applying again from the beginning.
                        setCycle(true).
                        setFrameTime( 2000, 5000 );

                // set the behavior to the rectangle.
                rectangle.addBehavior(alpha_2);

                var alpha_3= new CAAT.AlphaBehavior().
                        setValues(1,0).
                        setFrameTime( 2000, 10000 );
                circle.addBehavior(alpha_3);

                CAAT.loop(10);