работа с анимацией путешествий - PullRequest
Новая
       14

работа с анимацией путешествий

0 голосов
/ 22 апреля 2011

Я работаю с рыбой.Рыба должна плавать по экрану с двух сторон.У меня немного сложнее понять, как настроить массив так, чтобы рыба могла плавать.Массив, о котором я думал, был примерно таким: 

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>

1 Ответ

2 голосов
/ 22 апреля 2011

Вы приближаетесь к ней с неправильного направления. Чтобы вам было проще, попробуйте использовать плагин анимации, например http://www.spritely.net/ (требуется jQuery).

Если бы вы захотели сделать это самостоятельно, вам нужно было бы написать функцию анимации, которая бы - за указанное время - переместила ваш объект из точки A в B, изменила его кадры анимации, сместила бы его позицию Y, чтобы придать этому подозрительному / эффект колебания и т. д. Создание массива позиций - не самый лучший способ.

В этой замечательной статье на Dev.Opera http://dev.opera.com/articles/view/javascript-animation/

вы найдете множество советов о том, как начать работу над созданием собственного движка анимации.

Если вы ориентируетесь только на современные браузеры, вы можете попробовать поиграть с CSS3-анимацией - хотя они пока не получили широкой поддержки.

...