Question

我正在使用taveling fish。鱼应该从两个方向游过屏幕。我有点难以理解如何设置阵列以便鱼可以游泳。我想的阵列是这样的

Var fishPos = new Array
fishPos[0] = fish1
fishPos[1] = fish2
fishPos[2] = fish3

然后做鱼的功能..我真的不知道怎么做动画鱼游...我正在努力。我想我在挣扎如果我正在寻找的阵列就是我刚刚在那里做的...谢谢。

好的，这就是我到目前为止所做的一些事情仍然不对，鱼儿不会游泳......

 <!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"+fishNumber).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>

Answer 1

你正从错误的方向接近它。为了方便您，您应该尝试使用像http://www.spritely.net/这样的动画插件（需要jQuery）。

如果你想自己做，你必须编写一个补间函数，它会在指定的时间内将你的对象从A点移动到B，改变它的动画帧，偏移它的Y位置以使这个可疑/摇摆不定的运动效果等。创造阵地阵列并不是真正的方法。

您可以在Dev.Opera http://dev.opera.com/articles/view/javascript-animation/

的精彩文章中找到有关如何开始创建自己的动画引擎的大量提示。

如果您只定位现代浏览器，可以尝试使用CSS3动画 - 尽管这些尚未得到广泛支持。

使用旅行动画

1 个答案: