Cross-Browser.com
Animation Implementations
Introduction
Purpose
The previous article in this series discussed iteration techniques and animation algorithms. This article fully implements those functions.
These implementations use the closure-based iteration technique. In the previous article I pointed out how the data is actually specific to each call of the function - not just specific to the element object. For example, this means that the tmr variable is not as accessible - to be able to stop the animation before it completes. To get around this I passed an object as an argument to each animation method. The object had the tmr variable. This eventually lead to the object holding all the context of an animation.
This article has more code than text. After you have read over this page and tried the demos I encourage you to view the source of this page and browse through the code. The source for xAnimation is now included in the X Library. There are also more demos available.
Last update: 27Apr07.
Stand-Alone Implementations
The stand-alone implementations that follow have also been included in the X Library. They are alternatives to the existing X animation functions (xEllipse, xParaEq, xSequence, xSlideCornerTo, xSlideTo and xWinScrollTo). X will retain the existing animation functions for backwards compatibility.
xAniXY('div0', x, y, t)
A minimal, time-based implementation. This only supports constant velocity and does not support an onEnd handler. View source & docs.
xAniLine('div1', x, y, t, a, oe)
A time-based linear position animator. Supports constant velocity or two types of acceleration, and supports an onEnd handler. View source & docs.
xAniOpacity('div2', o, t, a, oe)
A time-based opacity animator. Supports constant velocity or two types of acceleration, and supports an onEnd handler. View source & docs.
xAniRgb('div3', p, c, t, a, oe)
A time-based color animator. Supports constant velocity or two types of acceleration, and supports an onEnd handler. View source & docs.
Abstracting The Engine, Part 2
At the end of the previous article I hinted at the possibilities in abstracting the animation engine out of the functions that had been discussed. xAnimation is an application of that idea.
xAnimation provides an animation engine which supports up to three axes of animation, multiple acceleration types and an onEnd handler. The onEnd handler can return true to cause the animation to repeat. It supports a bounce-back feature. The acceleration types are implemented as an array of velocity functions, so it is very easy to add a custom acceleration type.
The following demonstrate the animation methods I have implemented so far. For more info see xAnimation.
xa.line('div4', x, y, t, a, b, oe)
Animate an element's position over a line segment. View source & docs.
xa.arc('div7', xr, yr, a1, a2, t, a, b, oe)
Animate an element's position over an elliptical arc. View source & docs.
xa2.para('div11', xe, ye, inc, t, oe)
Animate an element's position over parametric equations. This is still experimental. View source & docs.
xa.size('div10', w, h, t, a, b, oe)
Animate an element's size. View source & docs.
xa.corner('div12', c, x, y, t, a, b, oe)
Animate an element's corner over a line segment. View source & docs.
xa.rgb('div6', p, c, t, a, b, oe)
Animate an element's CSS property that accepts color values. For example, color, background-color and the border colors. View source & docs.
xa.css('div13', p, v, t, a, b, oe)
Animate an element's CSS property that accepts integer pixel values. For example, the size, position, margin, padding and border properties, as well as font-size, line-height, letter-spacing, word-spacing, etc. View source & docs.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
xa.opacity('div5', o, t, a, b, oe)
Animate an element's opacity. View source & docs.
xa.scroll(window, x, y, t, a, b, oe)
Animate the scroll position of a window. View source & docs.
xa.scroll('div9', x, y, t, a, b, oe)
Animate the scroll position of an element.
div9
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Specific Animation Needs
The above animation methods should cover most needs, but sometimes you have a situation where you need a specific type of animation. The following is an example of a custom xAnimation method.
Changing a style property of a container element will also change the same property on any descendants that have that property set to 'inherit'. However, IE has problems with inherit. With the animation engine now abstracted it is easy to write animation methods for custom needs. For example the following animates a CSS property (integer pixel values only) of some container element, the same as css does, but this method also animates all the container's descendant elements.
xa.cssAll('div14', p, v, t, a, b, oe)
div14
| sit | voluptatem | accusantium |
| doloremque | laudantium | totam |
Sed ut perspiciatis unde omnis iste natus error
Graph of Velocity Functions
Here is a graph of the current velocity functions.
