Mojo.Animation

An animation curve that starts slowly, and speeds up.

An animation curve that is quick in the middle, and slow at both ends.

An animation curve that starts quickly, and slows down.

Generators are used to control the curves used for animations. They operate on time and position values ranging from 0 to 1.

This is used to animate the 'clip' style property of DOM elements. Only one side may be animated at a time. Any existing clip animation on the indicated node is cancelled when the new one is applied, and this generally behaves like animateStyle().

In addition, animateStyle() is used to provide underlying functionality, so it's details are generally supported as well.

Example Use:

This is used to animate the clipping rectangle for ProgressPill widgets.

    clipStyleAnimator = Mojo.Animation.animateClip(this.progressDiv, 'left', this.oldWidth, width, 0.2,
        { clip: {top: 0, left: this.oldWidth, bottom: 12, right: 0}, curve: 'ease-in-out'});

Animation 'details'

    clip    A required hash of numbers indicating current values for clip rect. 
            The indicated side is modified as the animation progresses.

This is used to animate style properties of DOM elements. The implementation will animate a given attribute to the given value over the given duration. Any existing animation on the indicated node for the indicated style attribute is cancelled when the new one is applied. The animator will override external changes made to the animated attribute while the animation is in progress. Currently, only integer valued attributes are supported, so colors and opacity cannot be animated (except using the styleSetter detail property).

One difference between this animator and CSS transitions is that both a 'fromValue and a 'toValue' must be specified. This allows us to keep the animation speed "correct" when an attribute is being animated back and forth between two values, and we need to run the 'back' animation while the 'forth' animation is only partially complete.

Example Use:

This code is used to animate the spacers to 0 height when doing drag'n'drop reordering in lists. Note the use of an onComplete function to remove the 0-height spacer from the DOM.

    Mojo.Animation.animateStyle(this.curDragSpacer, 'height', this.dragHeight, 0, .2, {onComplete:function(el){Element.remove(el);}});

In addition, animateValue() is used to provide underlying functionality, so its details are generally supported as well.

'details' properties

    currentValue    Current value of the style property being animated. 
                    Default is to call parseInt() on the style property.
    styleSetter     Function to call with the value to actually apply the style change.  
                    Allows for setting more complex style properties like 'clip'.
    from            Starting value for the number we are animating (Passed to ValueAnimator)
    to              Target value for the number we are animating (Passed to ValueAnimator)
    duration        How long the animation should take, in seconds

Animates a value between the two given numbers, over the given duration, calling the given callback with the "current value" at each step of the animation. Returns an animation object that can be used to end the animation early.

'details' properties

    onComplete      Function to call when animation is complete. Arguments are the animated element, and a boolean 'cancelled' value.
    reverse         Boolean.  If true, the animation will be "run in reverse".
    curve           What sort of curve to use for the animation.  Defaults to linear if unspecified.
                    May be the name of one of the standard curves, or an array of coordinates for the
                    control points of a cubic bezier curve.  See the curve name constants in Mojo.Animation.
    from            Starting value for the number we are animating
    to              Target value for the number we are animating
    duration        How long the animation should take, in seconds
    currentValue    If specified, the animation will be "picked up" at this value between the from & to values.
                    This allows partially complete animations to be cancelled and properly animated back to their starting conditions.

Methods

    cancel()        Same as complete(), but the callback is never called with the target value.
    complete()      calls the value callback one last time with the target value,
                    calls onComplete function if specified, and removes the animator from the queue.
                    Called automatically at completion of animation.

Given a DOM element, returns a reference to the appropriate animation queue to use.