Speeding Up Frame Rates For DHTML Animation in Win98 - DHTML Lab | 2

Speeding Up Frame Rates For DHTML Animation in Win98
A Case Study

Introduction

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 [1], 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.

This present article explains and demonstrates some multithread techniques in JavaScript that speed up element position updates by 50% to 27 Hz. The scripts are simple, work in both Internet Explorer (IE) and Netscape Navigator (NN), and have the same structures as existing DHTML animation scripts, allowing for easy modification. At 27 Hz with a movement increment of 1 pixel, the method can produce motion nearly as smooth as the standard, 18 Hz, 1 pixel increment, technique and many times smoother animation than the standard 18 Hz technique incrementing at 2 pixels. However, this performance is not consistent. Runs can vary in jerkiness on the same browser and difference between browsers is significant with IE out-performing NN on all versions of multithreaded code looked at here.

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 and

All Rights Reserved. Legal Notices.
Created: July 11, 2000
Revised: July 11, 2000

URL: https://www.webreference.com/dhtml/column34/2.html