Animation API Reference


b5.Animation

An animation is a collection of key frames that are tweened and applied to a target objects property. A key frame consists of frames and times. Frames are values that the property should be set to and times are the times at which the property should be those values. The values are tweened over the provided times and written to the target objects property. Generally animations are created and added to a Timeline object which then processes them all automatically. Animations have the following features:

  • Tweens between multiple key frames with each key frame having its own time value
  • Automatically deleted when animation reaches end unless destroy is set to false
  • Can be paused, played and restarted
  • Easing can be applied between each individual key frame
  • Can repeat a specified number of times or forever
  • Can be played back at different speeds using time scale
  • Can call a user supplied function when an animation repeats or ends
  • Actions can be called when the end of a specific key frame is reached
  • Playback can be delayed by setting time to a negative value

Public properties

  • name – Name of the animation
  • target –  Target object to tween
  • property – Property to tween
  • frames – Key frame data (array of key frame values)
  • times – Key frame times (array of key frame times)
  • easing – Key frame easing functions (array of easing functions, see Ease reference)
  • repeat – Total number of times to repeat animation (0 for forever)
  • destroy – If true then animation will be destroyed when it finishes playing (default is true)
  • actions – Array of action functions (called when each frame is reached)
  • time_scale – Amount to scale time (default is 1.0)
  • tween – When set to true, key frames will be smoothly interpolated, if set to false then frames will not be interpolated

Internal properties

  • timeline – Parent timeline
  • state – State of playback (AS_playing or AS_paused)
  • time – Current time
  • repeats_left – Number of repeats left to play
  • index – Optimisation to prevent searching through all frames

Constants

  • Animation.AS_playing – Animation is playing
  • Animation.AS_paused – Animation is paused

Events

  • onEnd() –  Called when the animation ends
  • onRepeat() – Called when the animation repeats
  • actions – Each frame can be assigned a function that is called when that start of that frame is reached

Methods

Animation(timeline, target, property, frames, times, repeat, easing) – Creates an instance of an Animation object

  • timeline – The parent Timeline that will manage this animation
  • target – The target object that will have its properties animated
  • property – The name of the property that will be animated
  • frames – An array of key frame values that represent the value of the property at each time slot
  • times – An array of time values that represent the time at which each key frame should be used
  • repeat – the total number of times that the animation should repeat (0 for forever)
  • easing – An array of easing values (optional), see Ease for reference

pause() – Pauses the playback of the animation

play() – Plays / resumes the animation

restart() – Restarts the animation from its beginning

update(dt) – Updates the animation (called internally)

  • dt – The amount of time that has passed since this animation was last updated

setTime(time) – Sets the current playback time value of the animation

  • time – Playback time of animation in seconds, a negative value can be used to delay the start of the animation

setAction(index, action_function) – Sets an action function that will be called when the animation reaches the frame specified by index

  • index – The frame at which to set the action function
  • action_function –  function to call when the specified animation frame is reached

Examples

Example of creating a simple animation

Example of creating a more complex timeline animation

781 total views, 1 views today