Animation techniques

Morphing

Morphing is the act of changing an object into another object. This technique is widely used to animate
clothes, skin, face, and non-solid bodies. A 3D object is composed of an array of triangles, an array of
normals to the triangle surface and texture coordinates. Normals are used for light refraction calculations.
Triangles have three vertices. Each vertex is composed by a position in the 3D space (X, Y, Z component).
To morph a 3D object, keep the texture coordinates unchanged in the animation. Since the texture
coordinates correspond to the vertex order, and morphing changes the vertex values not their order, no
changes in the text coordinates need to be done. Normals can be changed in the same fashion as vertex
values for a better looking animation. To morph a 3D object, each vertex position of a 3D object must move
to another 3D object’s vertex position.
While morphing, some 3D objects are stored as key frames. A morphing program
references these key frames as a source (the first frame in the animation) or destiny (the last frame in the
animation). Moving each vertex in certain number of frames or over time shows intermediate frames (frames between
key frames). This way an animation is created. Figure 3 shows a four frame animation between the first
two key frames. Moving each vertex is achieved by interpolation over time or by the number of frames.

Animation techniques

These techniques simulate continuous motion by rapidly displaying images. The viewer is given the impression that he is watching a continuous motion. To achieve this impression the graphical hardware needs image display rates of at least 25 images per second, since otherwise motion will look shaky. As most graphical hardware can not reach that display rate for moderate sized images (i.e. 256x256 pixels), one uses video hardware. One either sends every image to a framebuffer to write one videoframe at a time to videotape or one stores the images on a fast accessible device, CMY a laserdisk, and, after all images have been stored, displays them on a television screen from where they can be put on a videotape. There are two kinds of animation which we will describe below.

Flipbook animation
This is a well known technique. The generated images are displayed one after the other. Its name is attached to the thumbing or flipping through a series of images.

Keyframe animation
For this technique one only has to generate so-called keyframes. Keyframes mark changes in the characteristics of the motion, for example the sudden change in the direction of motion of an electron due to a collision with an ion. Interpolation techniques are used to generate a set of images between two keyframes. The larger the interpolated set of images the smoother the conversion from one keyframe to the other will appear to the viewer.

10 Awesome Techniques and Examples of Animation with jQuery

jQuery can pretty much do anything you can think of. All you need is a creative imagination and some time to learn the simple and intuitive API.
In this article, we share with you some innovative uses of jQuery in animating web design elements. You’ll read about some interesting techniques, tutorials, and examples that will show you how to create similar effects on your own websites and web apps.

1. Puffing Smoke Effect in jQuery

This example by Dutch web developer Gaya Kessler features an impressive animation effect of cartoonish smoke emanating from factory smoke stacks. Kessler thoughtfully supplies a configurable jQuery plugin with instructions based on his site’s header, so that you may create a similar animation effect for your website.
Live Demo: Smoke Effect

2. Crafting an Animated Postcard

Sam Dunn of the web development duo, Build Internet, wrote a tutorial on how to create an animated landscape using transparent PNG images. The tutorial takes advantage of the popular jQuery Easing plugin to help with the animation and the setTimeout() JavaScript function to time the events accordingly.
Live Demo: Animated Postcard

3. Create a Realistic Hover Effect

In this tutorial, you will learn how to animate image elements in a smooth and fluid manner. The tutorial features objects that, when hovered on, rises upwards. In the live demo of the effect, notice how the reflections and shadows at the bottom also changes when the object lifts up; hence "realistic" in the name of the technique.
Live Demo: Realistic Hover Effect

4. Scrolling Background Effect

The creators of the site youlove.us shares their code (and explanation) for making a seamless vertical scrolling CSS background; featured on the site’s header. The script is also dependent on the user’s system time; the animation starts at a different position depending on whether you visit the site at night or in the morning, a nice touch.
Live Demo: youlove.us (web page header)

5. Multiple Animations with Glimmer

Glimmer, a JavaScript animation creation tool that leverages the jQuery library, has several live demonstrations for some of the things you can do with the app. For instance, with Glimmer, you can create cool animation sequences or make a spiffy and impressive rotating banner for your website.
Live Demos: Freestyle Sample, Image Sequence Sample, Fade Text Sample

6. jQuery Blend

jQuery Blend is a plugin for animating CSS background images. The project emphasizes on web development best practices such as progressive enhancement  so that users with JavaScript disabled are still able to interact with your interface, albeit without the animation effects, making for a truly universal design.
Live Demo: website navigation with different options

7. Parallax Scrolling Background

In this jQuery tutorial, you will learn how to construct a Parallax Scrolling background – first popularized in web interfaces with the use of Flash. The technique involves div elements with CSS background images. The Parallax Scrolling technique requires the scrollTo plugin by Argentinean Web Developer and Game Programmer, Ariel Flesler.
Live Demo: Scrolling Clouds

8. Stunning Sliding Door Effect

Designer and Developer Kevin Liew shows other website builders how to create a striking animation effect where a top image splits up into four pieces, moving smoothly to the corners, and revealing another image beneath it. It’s an animation effect suited for interactive thumbnails of images.
Live Demo: Sliding Door Effect

9. Make Your Header Responses to Mouse Movements

In this jQuery animation technique, you will learn how to animate a set of images that reacts to the user’s mouse movements. When the user hovers over a set of images, the set begins to follow the mouse cursor. This technique can be adapted to many user interface related functions, or you can just use it to impart a memorable experience to your users.
Live Demo: parallax

10. Animated Header Using jQuery

This animated tutorial goes over a similar concept to the youlove.us example of vertically moving a large CSS background image. Illustrations on how the technique works will help readers grok the concept more fully. Devirtuoso, the author of the tutorial, goes through due diligence by offering an IE6 hack for backwards compatibility.
Live Demo: Animated Header
Can jQuery replace Flash? Do you know of other impressive uses of jQuery to animate page elements? Why don’t we talk about it in the comments? *Co-written by Jacob Gube