Introduction to Animations

An Introduction to Animation

However animation is achieved it has to take into account the action wanted, timing, the number of frames needed to produce the required fluidity and key points within the sequence. To help understand howBabylon.js goes about animation how animation is achieved.

Animations are produced by a sequence of images, frames, which are displayed one after the other. This sequence of frames can be individual drawings or for, stop motion animation, photographs of models that are moved slightly frame by frame

During the design stage the creator will need to consider how long a sequence should take and how smooth it needs to be. The smoother the movement the more frames are required. Once the number of frames is known then the animation frames per second can be found. Also knowing the object's start position and end position and how many frames are required will determine the object's movement per frame.

In Babylon.js, as in stop motion animation, individual objects have to be moved one by. Whereas we might talk about the overall finished piece as an animation in Babylon.js an Animation is also a specific object that details a transformation, timing and looping that can then be applied to any mesh, camera or light. To this data is added values at key frames from which Babylon.js calculates the transformations to take place for the in between frames.

Terminology Used in the Animation Documentation

The following terms will have the given meaning within the How_To about animating.

• Performer an item that can be animated, could be a mesh, a light or camera for example.

• Frame - an animation frame not a rendered frame of the scene.

• Animation - similar to a play or film script but applies to just one property of a performer. It consists of

  • the property to be changed, for example, position, intensity or rotation
  • the rate of change of the property in frames per second,
  • the type of the property being changed, for example vector, floating point number or matrix,
  • looping conditions,
  • key values of the property at key frames.

• Scripted Performer - The performer plus all the animations to be undertaken by the performer.

• Performance - The scripted performer and the actions done by the performer following the script. In Babylon.js this is the animatable object.

• Clip - The viewable result of a performance. In practice there are two types of clip a game clip and a movie clip. In a movie clip the user has no control over the camera and the clip is viewed according to the animation of the camera as set by the creator of the clip. In a game clip the user is able to move the camera as determined by the type of camera used in the scene. Unless it is likely to cause any confusion just the term clip will be used throughout the documentation when writing about animating.

• Cartoon - A series of clips played at timed intervals.