ANIMATING IMAGE
USING WAVE FILTER
(Internet Explorer 5.5 or newer only)
|
This tutorial is a continuation of the previous tutorial about Using
the Wave Filter. Please refer to it if you haven't
already. This tutorial assumes some familiarity with
JavaScript. Note: Wave filter only works on
Internet Explorer 5.5 or newer.
|
BASIC
ANIMATION
|
Click here to see an Example Page
that shows variations of animations that can be generated using
the Wave filter.
As with any other style sheet properties, the filter property can
be dynamically changed during runtime. By changing the
filter property periodically, we
can produce animation. Changing a style-sheet property must
be done via JavaScript, the syntax is as follows:
elementObject.style.filter=filter...
|
Here's an example code that animates a picture:
<SCRIPT LANGUAGE="JavaScript">
<!--
//
var animatedPicture=0;
var currentPhase=0;
function wavePicture(picture)
{
if (picture.style)
{
picture.style.filter=
" progid:DXImageTransform.Microsoft.Wave( "+
"lightStrength=50, strength=5, " +
"phase="+currentPhase+")";
currentPhase+=5;
animatedPicture=picture;
setTimeout("wavePicture(animatedPicture)", 40);
}
}
//-->
</SCRIPT>
|
The
function wavePicture retrieves an IMG element and applies the
Wave filter to it. The code also checks to make sure that the picture has a style
property. This is so that the code will not break on some
browsers. The Wave filter is applied with the following settings:
lightStrength=50, strength=5, and phase=currentPhase). The
variable currentPhase is initially set to 0.
The variable currentPhase is then incremented
by 5. The variable animatedPicture is used to save the pointer to the IMG element so that the setTimeout
function knows which image is to be animated.
The setTimeout function causes the wavePicture
function to be executed after x seconds (in this case, I set it
to 40 milliseconds).
So this means that the currentPhase will
be incremented by 5 every 40 milliseconds. The html code
is shown below:
<img onLoad="javascript:wavePicture(this);"
border="0" src="images/full.jpg" width="300" height="300">
|
As you might have noticed, the Wave filters only produces vertical waves.
In the next topic, we will apply multiple filters to generate horizontal waves.
|
CHAINING FILTERS
|
As explained in the previous tutorial,
one or more filters can be assigned to a style-sheet. Here's the code that applies both the Wave filter
and the Rotation filter: It does the following:
-
Rotates the picture
-
Applies the wave. The wave will be
applied to the rotated picture, thus producing horizontal
waves.
-
Rotates back the picture.
<SCRIPT LANGUAGE="JavaScript">
<!--
//
var animatedPicture2=0;
var currentPhase2=0;
function waveAndRotatePicture(picture)
{
if (picture.style)
{
picture.style.filter=
" progid:DXImageTransform.Microsoft.BasicImage(rotation=1)" +
" progid:DXImageTransform.Microsoft.Wave( "+
"lightStrength=50, strength=5, " +
"phase="+currentPhase+")" +
" progid:DXImageTransform.Microsoft.BasicImage(rotation=3);";
currentPhase2+=5;
animatedPicture2=picture;
setTimeout("waveAndRotatePicture(animatedPicture)", 40);
}
}
//-->
</SCRIPT>
|
Which produces this
|
ADVANCED CODE
|
Here's a code that can be used to animate any elements:
// Wave filter animation script (requires Internet Explorer 5.5+ browsers)
//
// F. Permadi 2005.
// (C) F. Permadi
//
// If you use this script, please provide credit to F. Permadi; and
// also provide a linkback to www.permadi.com
//
// This script is provided "as is" and without warranty whatsoever.
// Use at your own risk.
////////////////////////////////////////////////////
// This function takes an element (normally an IMG, a DIV, or a SPAN)
// and applies the wave filter to the element.
//
// The additional parameters are the wave filter parameters:
// freq, strength, and phase
// xyzSpeed is the velocity of the animation,
// minxyz is the min value for the parameter
// maxxyz is the min value for the parameter
// applyRotation: if true, the wave filter is also applied horizontally
////////////////////////////////////////////////////
function initWave(myElement,
freq, freqSpeed, minFreq, maxFreq,
strength, strengthSpeed, minStrength, maxStrength ,
phase, phaseSpeed, minPhase, maxPhase,
applyRotation)
{
// Initializes the object
this.element=myElement;
this.applyRotation=applyRotation;
this.strengthSpeed=strengthSpeed;
this.freqSpeed=freqSpeed;
this.phaseSpeed=phaseSpeed;
this.minStrength=minStrength;
this.minFreq=minFreq;
this.minPhase=minPhase;
this.maxStrength=maxStrength;
this.maxFreq=maxFreq;
this.maxPhase=maxPhase;
this.freq=freq;
this.phase=phase;
this.strength=strength;
// This is the main animation loop. It's assigned to be called
// every x-milliseconds by the waveAnimate() function below,
// using setInterval().
this.doWave=function()
{
// increment the parameter values
this.freq+=this.freqSpeed;
this.phase+=this.phaseSpeed;
this.strength+=this.strengthSpeed;
// make sure the values are within the specified limit.
if (this.freq>this.maxFreq)
{
this.freqSpeed=-Math.abs(this.freqSpeed);
}
else if (this.freq<this.minFreq)
{
this.freqSpeed=Math.abs(this.freqSpeed);
}
if (this.phase>this.maxPhase)
{
this.phaseSpeed=-Math.abs(this.phaseSpeed);
}
else if (this.phase<this.minPhase)
{
this.phaseSpeed=Math.abs(this.phaseSpeed);
}
if (this.strength>this.maxStrength)
{
this.strengthSpeed=-Math.abs(this.strengthSpeed);
}
else if (this.strength<this.minStrength)
{
this.strengthSpeed=Math.abs(this.strengthSpeed);
}
// Compose the filter string
var filterString=
" progid:DXImageTransform.Microsoft.wave("+
"lightStrength=30"+
", strength="+this.strength+
", phase="+this.phase+
", freq= "+this.freq +
")";
// Rotate if necessary
if (this.applyRotation)
{
filterString+=
" progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"+
" progid:DXImageTransform.Microsoft.Wave("+
"lightStrength=30"+
", strength="+this.strength+
", phase="+this.phase+
", freq= "+this.freq+
")"+
" progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
}
// Apply the filter
if (this.element.style)
this.element.style.filter=filterString;
}
}
// global objects for storing all objects that needs the wave animation
var wavers=new Array();
var c=0;
function waveAnimate(myElement,
freq, freqSpeed, minFreq, maxFreq,
strength, strengthSpeed, minStrength, maxStrength ,
phase, phaseSpeed, minPhase, maxPhase,
applyRotation)
{
// make sure that the element is valid
if (!myElement)
return;
// Creates the object and store it
wavers[c]=new initWave(myElement,
freq, freqSpeed, minFreq, maxFreq,
strength, strengthSpeed, minStrength, maxStrength ,
phase, phaseSpeed, minPhase, maxPhase,
applyRotation);
// This is the animation timer
setInterval("wavers["+c+"].doWave()", 40);
c++;
}
|
The latest version of the script: wave.js.
Please retain the copyright notice and provide a link back to
this site if you use the script.
To use the script, the syntax is as follows:
waveAnimate(element,
freq, freqSpeed, minFreq, maxFreq,
strength, strengthSpeed, minStrength, maxStrength ,
phase, phaseSpeed, minPhase, maxPhase,
applyRotation)
|
Here are what the parameters mean:
element |
The html element to be
animated. This is normally an IMG
element. |
freq |
Initial frequency value of
the wave. Larger number means more waves. |
freqSpeed |
How fast the frequency
changes between frames of animation. |
minFreq |
The minimum frequency. |
maxFreq |
The maximum frequency. |
strength |
How dented the wave are,
larger number means higher peaks. |
strengthSpeed |
How fast the strength changes
between frames of animation. |
minStrength |
The minimum value of
strength. |
maxStrength |
The maximum value of
strength. |
phase |
Initial offset value of the
wave. |
phaseSpeed |
The velocity of the phase
(how fast the offset moves). |
minPhase |
The minimum phase value. |
maxPhase |
The minimum phase value. |
applyRotation |
true or false.
If true, rotation will be applied and the wave is applied
vertically and horizontally. Otherwise, the wave is
applied only vertically. |
Example Usage
The two animations below are using the same script, but with
different parameters to produce strikingly different
results.
<img
onLoad="javascript:waveAnimate(this,
5, 0, 1, 10, 5, 0, 5, 17, 10, 5, 1, 1000, true);"
src="images/image2.jpg" width="250" height="200">
<img
onLoad="javascript:waveAnimate(this,
0, 0, 1, 30, 30, 0, 5, 17, 10, 5, 1, 1000, true);"
src="images/image2.jpg" width="250" height="200">
|
Note that with <IMG> element, I can execute the script
as soon as the image finished loading by using the onLoad
event: onLoad=waveAnimate(...). This ensures
that the animation will be applied when the image is finished
loading, not before.
Using the Script on Non IMG Elements
The script can be applied to any element (although it might
not work or make sense on some elements). For example, below I have a
<TABLE> with id="myTable", and because there's
no onLoad event handler on a <TABLE>, I applied the
wave by calling the waveAnimate at the end of the HTML
page:
<SCRIPT LANGUAGE="Javascript">
<!--
//
waveAnimate(document.getElementById("myTable"),
1, 0, 1, 10,
5, 0, 5, 17,
10, 5, 1, 1000,
false);
//-->
</SCRIPT>
|
The result:
This is a table |
This is a table |
This is a table |
This is a table |
This is a table |
This is a table |
This is a table |
This is a table |
This is a table |
Click here for more examples.
|
SOME NOTES
|
-
Don't overuse filters, especially animated
filters. They take up processor time and can slow down page
rendering.
-
Filters are Microsoft extensions, and they do not
work on browsers that do not support them.
<< MORE
TUTORIALS
>>
|
(C) F. Permadi
permadi@permadi.com
|
|