Advertisement
FastClick Ad Network

  
  

  

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