Witam
Mam do zrobienia animacje w JS.
wrzucam kod:
<html>
<head>
<title>Javascript animation</title>
<style type="text/css">
body {
background-image:url('tlo2.jpg');
}
h1, h2 {
font-size:1em;
}
#Bullet {
/* simple box */
position:absolute;
left:0px;
bottom:0px; //pozycja poczatkowa
width:100px;
line-height:100px; //wielkosc kwadratu
background:#99ccff;
white-space:nowrap;
padding:0.5px;
-o-transform: rotate(0deg);
}
</style>
<script type="text/javascript">
var object = null;
function init()
{
object = document.getElementById('Bullet'); // get the object
object.style.left = '22px'; // set its initial position
object.style.bottom = '34px'; // set its initial position
object.style.OTransform = 'rotate(0deg)';
onClickHandler();
}
var transX = new Array();
var transY = new Array();
var angle = new Array();
transX[0] = 0;
transY[0] = 0;
angle[0] = 0;
transX[1] = 10; transY[1] = 10; angle[1] = 0;
transX[2] = 11; transY[2] = 11; angle[2] = 0;
transX[3] = 10; transY[3] = 10; angle[3] = 0;
transX[4] = 10; transY[4] = 10; angle[4] = 0;
transX[5] = 9; transY[5] = 10; angle[5] = 0;
transX[6] = 10; transY[6] = 11; angle[6] = 0;
transX[7] = 9; transY[7] = 10; angle[7] = 0;
transX[8] = 10; transY[8] = 9; angle[8] = 0;
transX[9] = 9; transY[9] = 10; angle[9] = 0;
transX[10] = 9; transY[10] = 10; angle[10] = 0;
transX[11] = 8; transY[11] = 9; angle[11] = 0;
transX[12] = 9; transY[12] = 9; angle[12] = 1;
transX[13] = 8; transY[13] = 10; angle[13] = 1;
transX[14] = 9; transY[14] = 9; angle[14] = 1;
transX[15] = 8; transY[15] = 9; angle[15] = 1;
transX[16] = 8; transY[16] = 9; angle[16] = 1;
transX[17] = 8; transY[17] = 8; angle[17] = 1;
transX[18] = 7; transY[18] = 9; angle[18] = 1;
transX[19] = 8; transY[19] = 8; angle[19] = 1;
transX[20] = 7; transY[20] = 8; angle[20] = 1;
transX[21] = 8; transY[21] = 9; angle[21] = 1;
transX[22] = 7; transY[22] = 8; angle[22] = 1;
transX[23] = 7; transY[23] = 7; angle[23] = 1;
transX[24] = 7; transY[24] = 8; angle[24] = 1;
transX[25] = 7; transY[25] = 8; angle[25] = 1;
transX[26] = 6; transY[26] = 7; angle[26] = 1;
transX[27] = 7; transY[27] = 8; angle[27] = 1;
transX[28] = 6; transY[28] = 7; angle[28] = 2;
transX[29] = 7; transY[29] = 7; angle[29] = 2;
transX[30] = 6; transY[30] = 7; angle[30] = 2;
*/
function onClickHandler() //zadzialalo po usunieciu tablicy angle...
{
object.style.left = '25px';
object.style.bottom = '34px';
object.style.OTransform = 'rotate(0deg)';
var i = 0;
var interval = setInterval(
function()
{
object.style.left = parseInt(object.style.left)+transX[i]+'px';
object.style.bottom = parseInt(object.style.bottom)+transY[i]+'px';
object.style.OTransform = 'rotate(-'+angle[i]+'deg)';
i++;
if( i >= 30) clearInterval(interval);
} , 20);
}
window.onload = init;
</script>
</head>
<body>
<h1>Symulacja</h1>
<h2>strzalu</h2>
<input
type="button" style="width:100px"
value="Replay"
onclick="onClickHandler();"
/>
<div id="Bullet">
<img src="kula1.jpeg" alt="kula6"/>
</div>
</body>
</html>
animacja dziala tylko w wypadku gdy usune calkiem parametr: -o-transform z warstwy Bullet, usune cala definicje i deklaracje tablicy angle zawierajacej kąty i
object.style.OTransform = 'rotate(-'+angle[i]+'deg)'; z funkcji setInterwal
Wtedy sie elegancko wyswietla.
Nie chce dzialac nawet gdy tablica angle jest zdefiniowana, a nie uzyta przez nic...
Co jest nie tak?