Speeding Up Frame Rates For DHTML Animation in Win98 - DHTML Lab | 2
Speeding Up Frame Rates For DHTML Animation in Win98
A Case Study
DHTML is often used to move page elements and create Web page animation. To achieve smooth, strobe free motion, a browser (in conjunction with its operating system and hardware) must update the screen at rates both fast enough and regular enough to avoid strobe effects.
Television uses a rate of 30 images per second (30 Hz). Film uses 24 frames per second (24 Hz). To achieve a display of natural motion, a regular update rate of 16 Hz is considered the minimum for many moving things. However, a good update rate will depend on two other factors: the velocity and the sharpness of the items that are moving. For a fast moving sharp object 100 Hz is not enough! You can see this by waving a finger back and forth in front of your monitor. You'll see a strobe effect rather than smooth motion. Say your monitor updates at 100 Hz (10 ms per frame) and an image element is incrementally moved at 5 pixels-per-frame. Each 5 pixel displacement between positions will then be associated with a physical jump on the retina and this temporal update converts into a spatial duplication of the image element that the brain picks up. When one sees strobe motion, one sees multiple "copies" of a moving element at once. Decreasing the size of each movement step will bring the copies closer together and smooth the animation, but this then decreases the maximum speed at which you can smoothly move an element around. Therefore, increasing update rates beyond 16 Hz will increase the maximum speed at which you can smoothly move elements.
Sharpness of the moving image is another factor that relates to strobe motion and frame rates. Take a video movie and run it one frame at a time. You will see that there are huge jumps taking place all the time that aren't noticed in complex scenes. The background masks jumps. However, with simpler backgrounds, like a finger moving on a static background of a monitor, the same motion is seen with strobe effects.
Even though you may have a fast enough frame rate for the velocity you need on the background you're using, the result might still be unacceptable animation. The stability of the rate needs to be considered. A fast enough but unstable frame update rate could cause jerkiness or unwanted decelerations or accelerations during image movement. An adequate series of updates followed by a slow update or series of updates could cause jerkiness or deceleration if the slower rate falls too low or accelerations if the series rate goes too high. In other words, an update rate also needs to remain within a critical range often enough to produce a good effect.
Morten Wang's earlier DHTML Lab article , demonstrated one of the limitations of standard DHTML animation techniques on Win9x systems. That is, they don't achieve update rates greater than 18 Hz, limiting how fast you can smoothly move elements on your web page.
All tests for this single system case study were performed on a Windows 98 2nd ed, 90 MHz Pentium P54CS machine with a Number 9 GXE64 Pro 2Mb graphics card. The browser versions used were IE 5.01 and NN 4.7.
Let's start by viewing a classic animation problem.
Produced by Mark Szlazak andAll Rights Reserved. Legal Notices.
Created: July 11, 2000
Revised: July 11, 2000