Animation Tips

Overview

The HP webOS UI framework supports basic animations in applications, such as for the Photo animation scene in the framework library. This page includes the documentation from the file.

Note: The trunk framework now has a Mojo.Animation.animateStyle() method instead of requiring you to allocate the StyleAnimator class yourself.

Style Animation

This is intended to provide support for animating style properties of DOM elements. The implementation animates a given attribute to the given value over the given duration.

Any existing animation on the indicated node for the indicated style attribute is canceled when applying the new one. The animator overrides external changes made to the animated attribute while the animation is in progress.

Currently, only the integer-valued attributes are supported, so colors and opacity cannot be animated.

One difference between this animator and CSS transitions is that you must specify both a fromValue and a toValue. This allows you to keep the animation speed "correct" when an attribute animates back and forth between two values, and to go "back" while the "forth" animation is only partway complete.

Example

This code animates the spacers to 0-height when doing drag and drop reordering in lists. Note the use of an onComplete method to remove the 0-height spacer from the DOM. 

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

Methods

Method Description
cancel() Cancels the animation, and removes the animator from the queue. The element is left at its current location. Called automatically at the completion of an animation.
complete() Instantly sets the element's style attribute to the target value, calls onComplete if specified, and removes the animator from the queue. Called automatically at the completion of an animation.

Initialization Arguments

Argument Description
attr The name of the style attribute to be animated, using HTML DOM naming conventions.
duration The animation time duration in seconds.
element The DOM element whose style should be animated.
fromValue The "starting value" of the attribute. This is only used to establish a current position in the from-to range so that the animation speed remains constant when an element animates to one position, and then animates back when only partway there.
options Various animation options. This can be undefined when the default behavior is acceptable.
toValue The destination value for the given attribute.

"options" Properties

Property Description
curve The curve type for the animation. Defaults to linear if unspecified. This may be the name of one of the standard curves, or an array of coordinates for the control points of a cubic bezier curve. The standard curves are likely to change, but are currently defined in the bezierCurves property.
onComplete The method to call after the completed animation. The arguments are the animated element, and a boolean "cancelled" value.
reverse Boolean. If true, fromValue and toValue are swapped, so the animation "runs in reverse."