DHTML Lab - dhtmlab.com - Smooth animation using DHTML | 11

Smooth animation using DHTML
summary

One of the most powerful features of DHTML is its ability to move positioned content in a Web page. Repeat the movement several times and you'll get animation. With JavaScript's capabilities of continued function calls with specific delays you have an easy method of animated movement at a predefined pace. (For an introduction to animation, see Doc JavaScript's JavaScript Animations.)

After creating a couple of simple scripts to perform animation I was amazed by the appalling performance I saw. The movement was slow and rough. What I wanted was at least 25 frames per second, which makes the movement appear smooth to the viewer. I tried various delay-settings in my scripts, but I saw no better result.

Due to this lack of smoothness I sat down and created several scripts that would test various ways of moving a layer around and time how long it would take. Once I had functions I was satisfied with, I tested them with several browser versions on five platforms: Windows 95, Windows 98, Windows NT, Linux and Apple Macintosh. Some of these results were positive, others were greatly disappointing.

Most home computers today run either Windows 95 or Windows 98. It is also the operating systems that Microsoft wants the home users to have. My tests found that the users running this operating system would never see a smooth animation done in DHTML. According to a simple test these two operating systems are incapable of working with delays less than 53ms, which in turn means 18 frames per second. The other three systems tested were easily capable of producing 50 or more frames per second.

While trying to get the maximum performance out of my Windows 98 system I also compared animation using the setTimeout() method and the setInterval() method. I found that there was no increase in performance under Windows 98, but there was significant increase on the other operating systems used. The primary advantage of using setInterval() was that it gave more control over script execution speed.

This article demonstrates all tests performed, and lists all test results (even several not mentioned in the report). Tests run under Netscape Navigator 4.x, and Microsoft Internet Explorer 4 & 5.

We will begin with the acknowledgments and a quick introduction to DHTML animation.

Produced by Morten Wang and

All Rights Reserved. Legal Notices.
Created: Jan 03, 2000
Revised: Jan 03, 2000

URL: https://www.webreference.com/dhtml/column28/summary.html