A TweenJS plugin for working with motion guides. Defined paths which objects can follow or orient along.

To use the plugin, install the plugin after TweenJS has loaded. To define a path, add

    createjs.MotionGuidePlugin.install();

Example

    // Using a Motion Guide
    createjs.Tween.get(target).to({guide:{ path:[0,0, 0,200,200,200, 200,0,0,0] }},7000);
    // Visualizing the line
    graphics.moveTo(0,0).curveTo(0,200,200,200).curveTo(200,0,0,0);

Each path needs pre-computation to ensure there's fast performance. Because of the pre-computation there's no built in support for path changes mid tween. These are the Guide Object's properties:

• path: Required, Array : The x/y points used to draw the path with a moveTo and 1 to n curveTo calls.
• start: Optional, 0-1 : Initial position, default 0 except for when continuing along the same path.
• end: Optional, 0-1 : Final position, default 1 if not specified.
• orient: Optional, string : "fixed"/"auto"/"cw"/"ccw"
  • "fixed" forces the object to face down the path all movement (relative to start rotation),
  • "auto" rotates the object along the path relative to the line.
  • "cw"/"ccw" force clockwise or counter clockwise rotations including Adobe Flash/Animate-like behaviour. This may override your end rotation value.

Guide objects should not be shared between tweens even if all properties are identical, the library stores information on these objects in the background and sharing them can cause unexpected behaviour. Values outside 0-1 range of tweens will be a "best guess" from the appropriate part of the defined curve.