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
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.
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.
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.
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.
Reply With Quote
Originally Posted by josamoto
Bookmarks