www.webdeveloper.com
Results 1 to 9 of 9

Thread: Jerky animation

  1. #1
    Join Date
    Aug 2007
    Location
    South Africa
    Posts
    51

    Jerky animation

    Hi all. I'm trying to animate with JavaScript, but the whole thing is quite jerky. Here's the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    	<title>Animation Master</title>
    
    	<script type="text/javascript" src="http://localhost/_repository/javascript/browser.js"></script>
    	<script type="text/javascript">
    		function animate(){
    			document.getElementById('something').style.left = 
    				document.getElementById('something').offsetLeft + 1 + "px";
    		}			
    	</script>
    </head>
    <body>
    	<script type="text/javascript">
    		window.setInterval("animate()", 1000/24); 	
    	</script>
    	<h1>Testing animation JavaScript</h1>
    	<div id="something" 
    		style="border:   1px solid red; 
    			   position: absolute; 
    			   width:    10px; 
    			   height:   10px; 
    			   top:      70px; 
    			   left:     10px;">
    	</div>
    </body>
    </html>
    Any suggestions in speeding it up?

  2. #2
    Join Date
    Aug 2007
    Location
    South Africa
    Posts
    51
    I have used Robert Penner's formulas for this snippet, see http://www.robertpenner.com/

    Still jerky, and hoping the flickering can be minimised somehow.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    	<title>Animation Master</title>
    
    	<script type="text/javascript">
    		var twTime = 0;
    		var twBegin = 10; // Starting value of animated property
    		var twFinish = 800; // End value of animated property
    		var twChange = twFinish - twBegin;
    		var twDuration = 50; // Number of frames, I THINK???
    		
    		var twInterval = window.setInterval("animate()", 1000/32); // 32 frames per second (1000 milliseconds / 32 frames)
    	
    		function animate(){
    			document.getElementById('something').style.left = 
    				tween(twTime++, twBegin, twChange, twDuration, twInterval) + 'px'; 
    		}	
    		
    		function tween(time, begin, change, duration, interval){
    			if(time > duration)
    				clearInterval(interval);
    		
    			// Linear
    			// return change * time / duration + begin;
    			
    			// Quadratic
    			if ((time /= duration / 2) < 1)
    				return change / 2 * time * time + begin;
    			else
    				return -change / 2 * ((--time) * (time - 2) - 1) + begin;			
    		}		
    	</script>
    	
    </head>
    <body>
    	<h1>Testing animation JavaScript</h1>
    	<div id="something" 
    		style="border:   1px solid red; 
    			   position: absolute; 
    			   width:    10px; 
    			   height:   10px; 
    			   top:      70px; 
    			   left:     10px;">
    	</div>
    </body>
    </html>
    I'm looking at wrapping this code in a nice class for later reuse. As I've mentioned elsewhere, I am no mathematical genius, so I have no clue what I'm doing here.

    It was mentioned that keeping variable names shorter might optimize the animation, which is apparently true for Flash Actionscript. I don't really know if this is true for JavaScript

    Thanks for geniuses like Mr.Penner.

  3. #3
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    I've found the biggest reasons for jerky animation with JavaScript are slow browser JavaScript interpreters, your computer's graphics card, the visual complexity of your page, and how much of the page must be redrawn in each frame. The more images and borders you have on your page, the slower animations run.

    IE-Win is ok.

    Firefox is horrid.

    Opera is horrid to the extreme. I... simply cannot describe how slow Opera is. My computer literally freezes sometimes longer than the animation runs. Opera is probably the fastest at EVERYTHING but setInterval and setTimeout. My god those functions run slowly in that browser.

    Safari is slick as snot. Incredible. It's performance can compete with Flash's ActionScript. It's just simply amazing.

    And I've got an almost 8 year old computer with a vintage ATI Rage 128 graphics card.

  4. #4
    Join Date
    Aug 2007
    Location
    South Africa
    Posts
    51
    At work I'm working on a Celeron 2.8GHz with 450MB of RAM, with what I think is an onboard gfx card, which shares the main memory. Ouch.

    I'll definitely take this code home tonight and test it on my P4 HT 3.2GHz laptop which has a nifty ATI 9700 Mobility with 256MB dedicated RAM.

    I certainly do hope that more and more browsers will start incorporate techniques such as double buffering etc. to improve JavaScript animation.

    B.T.W. thanks for the reply.

  5. #5
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    No problem. And you'll be happy to know that Firefox is probably going to use Adobe Flash's ActionScript interpreter as the browser's JavaScript interpreter. Kinda handy since the new version of ActionScript is based on ECMA script, which is roughly based on JavaScript. So hopefully JavaScript animations will be blazing fast in Firefox 3.

  6. #6
    Join Date
    Aug 2006
    Location
    England
    Posts
    665
    Quote Originally Posted by josamoto
    Hi all. I'm trying to animate with JavaScript, but the whole thing is quite jerky.
    Any suggestions in speeding it up?
    Start the animation after a three second delay, and you should find that those initial jerks don't occur. (Specifically in Mozilla)
    Last edited by Arty Effem; 09-14-2007 at 12:01 PM.
    Scripterlative.com

    PM = 'PayPal Mode'

  7. #7
    Join Date
    Aug 2007
    Location
    South Africa
    Posts
    51
    Thanks Arty, but I actually want to animate on demand, for effects such as rollovers etc. you don't really want to wait 3 seconds. I have just accepted the fact that Fox is slow and hoping for much better in v3.


  8. #8
    Join Date
    Aug 2006
    Location
    England
    Posts
    665
    Quote Originally Posted by josamoto
    Thanks Arty, but I actually want to animate on demand, for effects such as rollovers etc. you don't really want to wait 3 seconds. I have just accepted the fact that Fox is slow and hoping for much better in v3.

    FireFox appears to do something immediately after page load, that causes it to interrupt animations momentarily. Thereafter there shouldn't be a problem.
    If you animate larger screen areas, don't try to do it more often than about 100 ms, you just won't get what you programmed.
    Scripterlative.com

    PM = 'PayPal Mode'

  9. #9
    Join Date
    Aug 2007
    Location
    South Africa
    Posts
    51

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles