0.1 pixel ikke mulig? (smooth animasjon)

[Met_Fredrik]

Hvis jeg sier at javascript kan alt flash kan, så tar jeg vel ikke helt feil? Utenom lyd.

Er vel ikke så mye tregere heller, flash krever utrolig mye når det begynner å bli litt grafisk innhold.

[LostOblivion]

Ikke sånn type animering da. Flash er jo lett!

[Met_Fredrik]

Du LostOblivion, hva mener du med at jeg skal beregne antall operasjoner pr sekund med date objektet?

[LostOblivion]

Hvis du vil at objektene dine skal bevege seg med f eks 20 piksler per sekund bortover, og ikke 20 per loop, så kan du finne ut hvor mange piksler objektet skal bevege seg per loop, ved å dele på antall ganger loopen kjører på et sekund. Dette kan du finne en god tilnærming av ved å ha to variable. En som inneholder siste loop's tid, og en som inneholder denne loopens tid, så deler du et sekund på denne tiden og du vil få antall loops per sekund. Hvis tegne-loopen og kalkulasjonloopen er den samme, vil dette også være frameraten på animasjonen din.

 

I JS kan dette gjøres med Date-"objektet" slik.

 

var sisteTid = new Date();
var denneTid, n, kalkPerSek;
<loop> // eller den koden som repeterer seg
{
  denneTid = new Date();
  n = denneTid.getTime() - sisteTid.getTime();
  sisteTid = denneTid;
  if (n == 0)
  n = 1;
  kalkPerSek = 1000 / n;
  obj.pos.x += obj.vel.x / kalkPerSek;
  obj.pos.y += obj.vel.y / kalkPerSek;
  objHandle.style.left = parseInt(obj.pos.x) + "px";
  objHandle.style.top = parseInt(obj.pos.y) + "px";
}

 

Evt hvis du har en tidsakselerator (time compression 1x, 2x, 0.5x, 4x f eks), så kan du øke hastigheten på animimasjonen ved å dele kalkPerSek på denne.

 

tidKomp = 0.5;
var sisteTid = new Date();
var denneTid, n, kalkPerSek, kalkPerAniSek;
<loop> // eller den koden som repeterer seg
{
  denneTid = new Date();
  n = denneTid.getTime() - sisteTid.getTime();
  sisteTid = denneTid;
  if (n == 0)
  n = 1;
  kalkPerSek = 1000 / n;
  kalkPerAniSek = kalkPerAniSek / tidKomp;
  obj.pos.x += obj.vel.x / kalkPerAniSek;
  obj.pos.y += obj.vel.y / kalkPerAniSek;
  objHandle.style.left = parseInt(obj.pos.x) + "px";
  objHandle.style.top = parseInt(obj.pos.y) + "px";
}

 

Gudd løkk.

Endret 12. oktober 2007 av LostOblivion

[Met_Fredrik]

Nå føler jeg meg ganske dum her, men det ble plutselig ganske avansert:P

 

var sisteTid = new Date();
var denneTid, n, kalkPerSek;
<loop> // eller den koden som repeterer seg
{
  denneTid = new Date();
  n = denneTid.getTime() - sisteTid.getTime();
  sisteTid = denneTid;
  if (n == 0)
     n = 1;
  kalkPerSek = 1000 / n;
  obj.pos.x += obj.vel.x / kalkPerSek;
  obj.pos.y += obj.vel.y / kalkPerSek;
  objHandle.style.left = parseInt(obj.pos.x) + "px";
  objHandle.style.top = parseInt(obj.pos.y) + "px";
}

 

Hvis jeg da setter en for loop der nå. Hvordan går jeg fram?

Jeg ser ikke sammenhengen mellom objHandle.style.left = parseInt(obj.pos.x) + "px"; og det jeg skal flytte på.

Er vel egentlig obj, som gjør at jeg ikke skjønner.

 

Takk for all hjelp så langt!

[LostOblivion]

Du har et instans av et objekt. Kall det obj, ball, dings, whatever. "Objekter" i JS kan lages på denne måten.

 

function Ball(pos, vel, radius)
{
  this.pos = pos;
  this.vel = vel;
  this.radius = radius;
}

function Vector(x, y)
{
  this.x = x;
  this.y = y;
}

...så kan du bruke "objektene" dine med...

obj = new Ball(new Vector(50, 50), new Vector(3, 0.5), 5); // posisjon 50, 50, fart 3, 0.5

 

Men JS er ikke veldig flink med objekter, så du trenger ikke bruke det, du kan bare bruke variabler på "vanlig" måte. F eks.

 

ballPosX = 50;
ballPosY = 50;
ballVelX = 3;
ballVelY = 0.5;
ballRadius = 5;

[LostOblivion]

Jeg innså akkurat at det du spurte om i starten ikke har noe som helst med "animering" sånn som jeg tenkte på det. Du er ute etter innhold på siden som flyter rundt, ikke animeringer av baller som kolliderer etc? I så fall, kan du glemme alt jeg har sagt om kalkulasjoner per sekund og alt det derre. Haha, for en tosk jeg er, haha.

 

Du burde kanskje se litt på nodes, ellers virker det som du har nok info til å gjøre som han fyren du lenket til i første post gjør.

[Met_Fredrik]

Ja, altså det jeg skal animere i denne omgang er bevegelse og resizing av divs.

Dette skal skje med en tålelig fps.

Så det jeg har vært ute etter er javascript animasjon med god fps hvis jeg ikke har vært klar nok på dette

 

Tusen takk for all hjelp!

[LostOblivion]

Burde ikke være noe problem med FPS...hvis det bare er snakk om flytting av divs etc. Bare sjekk ut codebox-funksjonen som nylig ble lagt til i Diskusjon.no... =D

[Met_Fredrik]

Codebox funksjonen? Hva er det du snakker om?

[LostOblivion]

At du kan dra den rundt etc. Det du mener ikke sant? Noe lignende blir det hvertfall... "Sett inn spesialelement", "Sett inn: CODEBOX"...

Endret 15. oktober 2007 av LostOblivion

[Met_Fredrik]

Nja, altså alt fra en div som resizer seg til en ball som fyker fra punkt x til punkt y. Dette skal bare skje med en tålelig fps, noe som ikke gikk med det eksemplet jeg startet denne tråden med:P

[LostOblivion]

<script type="text/javascript">
ramme = new Object();
ramme.x = 50;
ramme.y = 20;
ramme.handle;

knapp;

running = 0;

knapp.onClick = function()
{
if (running != 0)
	run();
else
	clearTimeout(running);
}

window.onLoad = function()
{
ramme.handle = document.getElementById("minDiv");
knapp = document.getElementById("startKnapp");
}

function setLoc(node, x, y)
{
node.style.left = parseInt(x) + "px";
node.style.top = parseInt(y) + "px";
}

function run()
{
ramme.x++;
ramme.y++;
setLoc(document.getElementById("minDiv"), ramme.x, ramme.y);
running = setTimeout("run()", 1);
}
</script>

 

Poenget er å kalle run så ofte som mulig. Argh, skulle aldri begynt med JavaScript...

Endret 15. oktober 2007 av LostOblivion

[Met_Fredrik]

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<link href="css/mincss.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

ramme = new Object();

ramme.x = 200;

ramme.y = 200;

ramme.handle;

knapp;

running = 0;

knapp.onClick = function(){

if (running != 0)

run();

else

clearTimeout(running);

}

window.onLoad = function(){

ramme.handle = document.getElementById("obj");

knapp = document.getElementById("button1");

}

function setLoc(node, x, y){

node.style.left = parseInt(x) + "px";

node.style.top = parseInt(y) + "px";

}

function run(){

ramme.x++;

ramme.y++;

setLoc(document.getElementById("obj"), ramme.x, ramme.y);

running = setTimeout("run()", 1);

}

</script>

</head>

 

<body>

<div id="obj"></div>

<input id="button1" value="Trykk her" name="Knapp" type="button" />

</body>

</html>

 

 

Hva gjør jeg galt? Ingen ting skjer.