SRT Animation

SRT animation means Scale-Rotation-Translation animation. In other words : how to animate the transformation of my nodes ?

Concept of a timeline

cgSceneGraph embed a complete animation engine based on timelines and animation keys to fulfill all the needs (I hope :)).

An animation key is a couple time/value, and define on a timeline the value of a property at the given time.
Each value between 2 keys will be computed by the framework, based on the chosen interpolation algorithm (« linear » is the only interpolation method available on the v1 of cgSceneGraph).

Example of a timeline with 3 animation keys :

Animate a node

                            this.sceneGraph.addAnimationKey(myNode, « property », time, value);
                                    

will add animation key on the timeline for this couple myNode/property (or create a new timeline if it does not exist yet). You can so call several times this method to add several keys on your timeline.

                            this.sceneGraph.animate(myNode, « property », 45, valueFrom, valueTo, « linear », 0, true);
                                    

is an helper method that will automatically add 2 keys on a timeline and configure it.

Almost everything is animatable in cgSceneGraph, if the property is a number. So you can not animate the position of a node in 1 call, you have to animate position.x and position.y
That's logical, because may be you don't want to animate x and y the same way...

For examples:

                                    //animate x position during 30 frames, from 0 to 200, starting in 0 frame
                                    this.sceneGraph.animate(this.squareNode, "position.x", 30, 0, 200, "linear", 0, true);

                                    //animate y position during 30 frames, from 0 to 200, starting in 0 frame
                                    this.sceneGraph.animate(this.squareNode, "position.y", 30, 0, 200, "linear", 0, true);

                                    this.sceneGraph.animate(this.squareNode, "rotation.angle", 30, 0, Math.PI, "linear", 0, true);

                                    //animate opacity from 0 to 1, in 30 frames and starting in 15 frames, without precomputing values
                                    this.sceneGraph.animate(this.squareNode, "globalAlpha", 30, 0, 1, "linear", 15, false);

                                    //animate red component of the color from 0 to 255, in 100 frames and starting in 0 frame (now)
                                    this.sceneGraph.animate(this.squareNode, "color.r", 100, 0, 1, "linear", 15, true);
                                

Animation events

As in cgSceneGraph the animation is managed by a timeline, so events related to the animation are also managed by this one.

There are 3 events for an animation:

• onAnimationStart
• onAnimate
• onAnimationEnd

                                    //assuming you have an animation on the couple squareNode/"rotation.angle"
                                    this.sceneGraph.getTimeline(squareNode, "rotation.angle").onAnimationStart = function (event) {
                                        console.log("animation started");
                                    };