0.1 pixel ikke mulig? (smooth animasjon)

[Met_Fredrik]

Sitter å leker meg med en liten animasjon i javascript.

 

Har da en funksjon:

function doMove() {
 foo.style.left = parseInt(foo.style.left)+1+'px';

 

Som kalles hvert 20'ende ms med

 

setTimeout(doMove,20);

Dette funker fint det, men når jeg prøver å dele opp pixlene med "0.1" f.eks, så skjer det ingen ting.

foo.style.left = parseInt(foo.style.left)+0.1+'px';

Grunnen til at jeg gjør dette er for å få til en "smoothere" animasjon hvis noen lurte.

Noen som har en forklaring på dette, evt erfaring med andre måter å animere i javascript?

 

Har holdt på litt til nå, og det ser ut til at pixler ikke kan ha verdier under 1? Stemmer dette? Hvordan kan jeg da isåfall dele opp animasjonen min for å få en glattere "avspilling"?

 

EDIT: Haha, ja mente selvfølgelig under 1 og ikke under 0.

Hvis pixler ikke kan deles kommer vi over på den andre delen av spm. mitt, noen andre måter å få til glatte animasjoner med javascript.

For å ta et eksempel, Scottschiller

Men .js filene som er brukt her lå en smule over mitt nivå.

Endret 7. oktober 2007 av Met_Fredrik

[humbuq]

0.1 er ikke under 0.

Jeg tror du kommer til å slite med å dele piksler, da det er visse fysiske begrensninger du må forholde deg til.. En piksel kan bare vise en farge om gangen.

[Arve Systad]

1. 0.1 er ikkje mindre enn null

 

2. Du kan ikkje dele ein pixel

 

[magicgunnar]

2. Du kan ikkje dele ein pixel

9589553[/snapback]

Det sa de om atomet også

 

Men jeg må nok dessverre si meg enig, men kanskje du kan prøve å leke med gjennomsiktigheten, slik at du får en slags overgang:

function setOpacity(e, opacity){
var o=e.style;
o.filter="alpha(opacity="+opacity+")"; //IE
o.opacity=(opacity/100); //Opera
o.MozOpacity=(opacity/100); //Mozilla+Firefox
o.KhtmlOpacity=(opacity/100); //Konqueror
}

[Wattengård]

Det er ikke helt korrekt at man ikke kan dele en pixel. Man kan dele en pixel i 3. Rød, Grønn og Blå. Også kallt Subpixel Rendering. Men det er vel tvilsomt om man får nytte av dette med javascript

 

Det er denne evnen som benyttes i ClearView og andre typer font-smoothing.

 

http://en.wikipedia.org/wiki/Subpixel_rendering

 

-C-

[LostOblivion]

Haha, de folka her skjønner ikke hva du faktisk er ute etter. Men det gjør jeg! Har laget mange animasjoner i JavaScript. =) Du må bare gjør noe liknende under.

 

obj.style.left = parseInt(x) + "px";
obj.style.top = parseInt(y) + "px";
x += 0.1; // etc
y += 0.1; // etc

 

Da kan x og y være hva som helst, men siden piksler er kvantisert så må du bruke parseInt metoden. Så du var inne på noe. =) Nå vil den bli "smooth".

 

Lykke til!

Endret 6. oktober 2007 av LostOblivion

[Wattengård]

parseInt() skal ha en streng som input da. Så jeg skjønner ikke helt hvorfor det skulle være noe poeng i å bruke den... Hvis målet er å runde av så skal man bruke Math.round()

 

-C-

[Met_Fredrik]

Haha, de folka her skjønner ikke hva du faktisk er ute etter. Men det gjør jeg! Har laget mange animasjoner i JavaScript. =) Du må bare gjør noe liknende under.

 

obj.style.left = parseInt(x) + "px";
obj.style.top = parseInt(y) + "px";
x += 0.1; // etc
y += 0.1; // etc

 

Da kan x og y være hva som helst, men siden piksler er kvantisert så må du bruke parseInt  metoden. Så du var inne på noe. =) Nå vil den bli "smooth".

 

Lykke til!

9648965[/snapback]

 

Hvis jeg da gjør noe som:

function doMove() {
foo.style.left = parseInt(x) + 'px';
x += 0.1;
 setTimeout(doMove,10);
}

Så blir dette noe veldig rart noe, vet egentlig ikke hva som skjer.

En sakte hakkete animasjon.Er jeg helt på jordet?

[LostOblivion]

Skal legge meg nu... Zzz. Men du kan ta en titt på denne.

index.html

[Met_Fredrik]

Skal legge meg nu... Zzz. Men du kan ta en titt på denne.

9653779[/snapback]

 

Dette er hva jeg er ute etter ja, selv om koden ligger et par hakk for høyt for meg. Var ganske artig for de formelene for radianer osv har jeg akkurat hatt på skolen

 

Kunne du tenke deg å hjelpe meg å bryte ned en del av koden til en litt mer konsentrert animasjonsdel?

 

Takker for svar så langt!

[magicgunnar]

Haha, de folka her skjønner ikke hva du faktisk er ute etter. Men det gjør jeg!

9648965[/snapback]

Jeg skal ikke skryte på meg at jeg skjønner noen verdens ting , og skriptet ditt er fint det, men for meg ser det ikke ut som du bruker noe mindre enn hele piksler.

[LostOblivion]

Gjør ikke det. Piksler består ikke av kvarker.

[Met_Fredrik]

LostOblivion, svar meg istedet for magicgunnar! =D

[LostOblivion]

Du vil egentlig bare plassere all koden som skal kjøres hele tiden inni en metode du kaller f eks run. Så kan du kalle en setTimeout metode inni denne for å gjenta seg selv så ofte som mulig. Du kan så beregne hvor mange kalkulasjoner per sekund som faktisk foregår ved bruk av Date "objektet", og på en svært enkel måte få objektene dine til å bevege seg med så godt som 5 meter per sekund bortover skjermen hvis det er farten. Uansett, så lenge du holder x og y koordinatene til objektets posisjon i flyt-tall, kan du runde de ned til nærmeste hel-tall for hver loop, og oppdatere objektets posisjon. Du kan lage en variabel, scale f eks, som er forholdet mellom piksler og meter f eks. Dvs antall pixler per meter som skal vises. Du kan så bruke denne variabelen til å regulere størrelser på skjermen. Men seriøst, lær deg heller Java hvis du vil animere. Det jeg gjorde når JavaScript ble treigt og kjedelig å jobbe med...

[Met_Fredrik]

Du vil egentlig bare plassere all koden som skal kjøres hele tiden inni en metode du kaller f eks run. Så kan du kalle en setTimeout metode inni denne for å gjenta seg selv så ofte som mulig. Du kan så beregne hvor mange kalkulasjoner per sekund som faktisk foregår ved bruk av Date "objektet", og på en svært enkel måte få objektene dine til å bevege seg med så godt som 5 meter per sekund bortover skjermen hvis det er farten. Uansett, så lenge du holder x og y koordinatene til objektets posisjon i flyt-tall, kan du runde de ned til nærmeste hel-tall for hver loop, og oppdatere objektets posisjon. Du kan lage en variabel, scale f eks, som er forholdet mellom piksler og meter f eks. Dvs antall pixler per meter som skal vises. Du kan så bruke denne variabelen til å regulere størrelser på skjermen. Men seriøst, lær deg heller Java hvis du vil animere. Det jeg gjorde når JavaScript ble treigt og kjedelig å jobbe med...

 

Takker for svar:)

Skal prøve på det her nå.

 

Men det er animering på en webside jeg holder på med, blir mye ekstra styr med applets på siden, og å kreve av brukeren at de har java.

(Eller tar jeg feil?)

[LostOblivion]

Nei er riktig det, må ha applet. De fleste har en eller annen versjon av Java (for tiden som regel 1.5). Jeg mener, du har vel sikkert LimeWire? Det bruker Java. =) Så jeg sier hvis du synes animasjon er gøy, burde du lære deg litt Java. Da har du tilgang til rastere og alt annet du trenger for å tegne og ikke bare redigere ting i HTML koden. =) For ikke snakke om hvor mange millioner ganger raskere det er. Drev med JavaScript til animering før jeg fant ut at det var for treigt. Kan du JavaScript eller hva som helst annet scripting- eller programmeringsspråk, tar det ikke lange tiden for å lære seg et annet språk. =)

Endret 11. oktober 2007 av LostOblivion

[Wattengård]

@LostOblivion

Du som driver å klager på JavaScript. Jeg regner med at du er klar over at det er skrevet både en assembler http://www.xpounded.netfirms.com/jasm/jasm.html og flere emulatorer http://jsmsxdemo.googlepages.com/jsmsx.html i javascript...

 

-C-

[LostOblivion]

Veit ikke hva du snakker om, men veit at hvis trådstarter skal animere i JavaScript på måten han gjør det på, er det bedre om han gjør det i et programmeringsspråk som har en grafikk-api som gjør det lettere for han å animere. Det er det jeg mener, ikke hva JavaScript kan gjøre...

[Met_Fredrik]

Det virker som om veldig mange tar seg nær av nedsettende kommentarer om et språk de er glade i:D

Var vel kanskje dere som hadde den diskusjonen på java forumet og:P

 

Men uansett, til dette prosjektet holder jeg meg til javascript, er bare et par div's som skal forstørres og flyttes i første omgang:)

 

Takker for svar

[Wattengård]

Canvas gir Javascript et lett grafikk-api. Skal det være mere animert så er flash et bedre valg en java...

 

-C-