working with traveling animations
I am working with taveling fish. The fish should swim across the screen from both direction. I am having a little bit hard of understanding how to set up the array so the fish could swim. The array i was thinking was like this
Var fishPos = new Array
fishPos[0] = fish1
fishPos[1] = fish2
fishPos[2] = fish3
then do the function of the fish..I really don't know how to do animated fish swim...i am trying. I guess i am woundering If the array i am looking for is what i just did up there.. Thanks.
Ok this is what I have so far but something is still not right they fish will not swim...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fish tank</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
// <![CDATA[
var fishPos = new Array(3);
var fishPos = 0;
var direction;
var begin;
fishPos[0] = "fish1.gif";
fishPos[1] = "fish2.gif";
fishPos[2] = "fish3.gif";
function fishSwim(fishNumber) {
document.getElementById("fish"+fi开发者_如何学CshNumber).style.left = horizontal[fishPos[fishNumber] + "px";
++fishPos[fishNumber];
if (fishPos[fishNumber] == 49)
fishPos[fishNumber] = 0;
}
function startSwimming() {
setInterval(fish1Swim, 100);
}
// ]]>
</script>
</head>
<body onload="startSwimming();">
<p><span id="fish1" style=
"position:absolute; left:10px; top:10px"><img src="fish1.gif" alt="Image of a fish" /></span></p>
<p><span id="fish2" style=
"position:absolute; left:10px; top:120px"><img src="fish3.gif" alt="Image of a fish" /></span></p>
<p><span id="fish3" style=
"position:absolute; left:10px; top:250px"><img src="fish2.gif" alt="Image of a fish" /></span></p>
</body>
</html>
You are approaching it from the wrong direction. To make it easier for you you should try using animation plugin like http://www.spritely.net/ (require jQuery).
If you wanted to make it by yourself you'd have to write a tweening function which would - over specified time - move your object from point A to B, change its animations frames, offset its Y position to give this fishy/wobbly movement effect etc. Creating array of positions isn't really the way to go.
You will find a lot of tips on how to start working on creating your own animations engine at this fine article at Dev.Opera http://dev.opera.com/articles/view/javascript-animation/
If you are targeting only the modern browsers you could try playing with CSS3 animations - though these aren't widely supported yet.
加载中,请稍侯......
精彩评论