Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum>Entwickler>Javascript Problem: Animation einer wachsenden Zahl

Javascript Problem: Animation einer wachsenden Zahl

flowgrow
flowgrow28.11.0914:59
Hey,
ich bräuchte mal wieder ein bisschen hilfe beim gebiet javascript.
ich möchte das wachstum einer zahl "animieren".
soll heißen: zuerst ist die zahl 1, dann 2, dann 3, bis 100
so circa halt.

mein versuch bis jetzt war (die "-" sind nur hier auf MTN damit man die einrücke auch sieht):
var x = 0.1;
function differNumber(a,b,c) {
- - b=parseFloat(b);
- - if (x==0.1) {c=document.getElementById(c.id);}
- - console.log(b+"->"+a+": "+(a-b)+" | "+x.toFixed(1));
    
- - if (b!=a) {
- - - - b = b+(a-b)*Math.pow(Math.sin(x*Math.PI/2),2);
- - - - b = b.toFixed(2);
- - - - console.log(b);
- - - - c.innerHTML = b;
- - - - console.log(c);
- - - - x+=0.1;
- - - - setTimeout("differNumber("+a+","+b+","+c+")",50);
- - }
}

und die html datei dazu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
- - <head>
- - - - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- - - - <script src="script.js" type="text/javascript" charset="utf-8"></script>
- - - - <title>test</title>
- - </head>
- - <body>
- - - - <div id="test" onclick="differNumber(200,this.innerHTML,this)">123.00</div>
- - </body>
</html>

wenn ich jetzt auf die zahl 123.00 klicke fängt es gut an, einmal wird sie geändert auf 124.88
aber dann bekomme ich einen fehler, nämlich: "SyntaxError: Parse Error" auf test.html zeile 1

ich bin mit meinem latein am ende, kann mir vllt jemand sagen wo mein fehler liegt?

lg Flo
„Chuck Norris hat mehr Kreditkarten als Max Mustermann!“
0

Kommentare

bmc desgin28.11.0915:31
Ich würde die timeout höher ansetzen - 50 ms sind für JavaScript zu wenig
Einen stop würde ich auch noch einfügen, sonst läufts bis ins unendliche...
„Ask your questions...“
0
flowgrow
flowgrow28.11.0915:37
ein stopp ist ja eingefügt:
if (b!=a)
sobald b und a den gleichen wert haben wird nicht mehr weiter gemacht.
aber das problem ist ja nicht das setTimeout und auch nicht die 50 ms

es liegt wohl irgendwie am c parameter...
ohne den hats funktioniert
„Chuck Norris hat mehr Kreditkarten als Max Mustermann!“
0
dreyfus28.11.0916:29

Also, wenn ich in dem differNumber Aufruf im Skript die doppelten Anführungszeichen um +a+, +b+ und +c+ durch Einfache ersetze... ist der Parse Error schonmal weg.
0
dreyfus28.11.0916:53

Unfug, vergiss dass letzte. Du brauchst gar keine Anführungszeichen.

setTimeout(differNumber(a,b,c),50);

Allerdings bewirkt setTimeout vielleicht nicht das, was Du meinst. Das div im Browser wird nicht aktualisiert, solange das Skript läuft - erst wenn 200 erreicht sind ändert sich die Anzeige.
0
dreyfus28.11.0917:03

Oh Backe... ich brauche Kaffee. Eigentlich ganz einfach:

setTimeout(differNumber, 1000, a , b, c);

Dann funktionieren auch die Updates.
0
flowgrow
flowgrow28.11.0918:35
danke für die hilfe!
„Chuck Norris hat mehr Kreditkarten als Max Mustermann!“
0
flowgrow
flowgrow28.11.0919:10
puh.... jetzt gehts ans eingemachte.
ich möchte jetzt mehrere zahlen gleichzeitig animieren.
die haben zwar den gleichen anfangswert (0.00) aber alle haben andere zielwerte und dann wird das mit meiner funktion nicht wirklich schön...

ich schreib mal schnell wo ich jetzt mit meinem code bin:
function initShowNumbers() {
- - differNumber(1000.00, document.getElementById("budget"));
- - differNumber(608.79, document.getElementById("currentNumber"));
- - differNumber(25.48, document.getElementById("intersectionNumber"));
}

var x = -9.1; // .1 damit schon beim ersten durchgang die ease-in/out funktion wirkt
function differNumber(a,b) {
- - var i = x/10;
- - var j = x/10;
- - var pause = 50*Math.pow(Math.sin((1-j)*Math.PI/2),2);
- - var multi = 1;
- - c=document.getElementById(b.id);
- - b=parseFloat(b.innerHTML);
- - if (x < 0) { // vorher paar mal um 0.1 erhöhen damit es noch langsamer startet
- - - - pause = 90+(-10.1-x)*10;
- - - - if (b!=a) {
- - - - - - if (b>a) {multi = -1}
- - - - - - b = b+0.01*multi
- - - - - - b = b.toFixed(2);
- - - - - - c.innerHTML = b;
- - - - - - x++;
- - - - - - setTimeout(differNumber, pause, a, c);
- - - - } else {
- - - - - - x = -9.1;
- - - - }
- - } else {
- - - - if (x > 5) {j=1-j;}
- - - - console.log(b+" -> "+a+": "+(a-b).toFixed(2)+" -> "+((a-b)*Math.pow(Math.sin(i*Math.PI/2),2)).toFixed(2)+" | Durchgang: "+x+" | Pause: "+(20+pause));
- - - - 
- - - - 
- - - - if (b!=a) {
- - - - - - b = b+(a-b)*Math.pow(Math.sin(i*Math.PI/2),2);
- - - - - - b = b.toFixed(2);
- - - - - - c.innerHTML = b;
- - - - - - x++;
- - - - - - setTimeout(differNumber, 20+pause, a, c);
- - - - } else {
- - - - - - x = -9.1;
- - - - }
- - }
}

window.addEventListener('load', initShowNumbers, false);

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
- - <head>
- - - - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- - - - <script src="script.js" type="text/javascript" charset="utf-8"></script>
- - - - <title>test</title>
- - </head>
- - <body>
- - - - <div id="budget">0.00</div>
- - - - <div id="currentNumber">0.00</div>
- - - - <div id="intersectionNumber">0.00</div>
- - </body>
</html>
„Chuck Norris hat mehr Kreditkarten als Max Mustermann!“
0
flowgrow
flowgrow29.11.0913:20
schade, dass mir keiner weiterhelfen kann...
„Chuck Norris hat mehr Kreditkarten als Max Mustermann!“
0
dreyfus29.11.0917:14
flowgrow
schade, dass mir keiner weiterhelfen kann...

Würde ich ja gerne, wenn Du deine Beispiele einmal ohne hunderte von Bindestrichen posten würdest ... dann könnte man das mit copy/paste einfach testen.
0
kefek
kefek29.11.0917:29
Wofür gibt es überhaupt die
[code]-Tags
wenn das mit dem einrücken dann eh nicht klappt ... zzz

„Die Ewigkeit dauert lange, besonders gegen Ende ...“
0
flowgrow
flowgrow29.11.0918:11
oh hmm naja das mit dem einrücken via bindestriche lässt sich ja leicht wieder rückgängig machen.
einfach in den editor deiner wahl kopieren, nach "- - " suchen und mit einem tabulator ersetzen.
dann auf alles ersetzen klicken und schon ist man fertig.

aber @kefek ich find auch, dass das ein bisschen idiotisch ist diese tags zu machen, wenns dann nicht klappt

eine lösung hab ich leider noch immer nicht gefunden.
ich glaub ich muss irgendwie pro animierter zahl eine eigene variabel machen, die dann immer um 1 addiert wird. also im jetztigen fall ist es das x was ich sozusagen verdreifachen muss.
das einzige problem was ich habe ist, dass es in zukunft eine beliebige anzahl sein muss.
da muss was automatisiertes hin.
„Chuck Norris hat mehr Kreditkarten als Max Mustermann!“
0
dreyfus29.11.0918:28

Hm, Du müsstest wohl erstmal die Anzahl der Schritte ermitteln (ohne Ausgabe) und dann den Pausenwert dynamisch so anpassen, dass Alle gleichzeitig ankommen... d.h. die Paarung mit der größten Schrittanzahl definiert den Pausenwert für die Anderen.
0
flowgrow
flowgrow29.11.0918:31
zum testen:

(auf dropbox "gehostet")
„Chuck Norris hat mehr Kreditkarten als Max Mustermann!“
0
dreyfus29.11.0918:34
Forstsetzung...

Da es keinen Sinn macht, die Berechnungen doppelt durchzuführen, wäre es wohl einfacher, die Zahlenfolgen erstmal in drei Arrays zu schreiben. Dann kannst Du einfach die Array-Längen auswerten und die Pausenwerte ermitteln. Also in etwa:

- Für alle drei Zahlen die Berechnungen durchführen und Werte/Schritte in array1, array2, array3 schreiben
- Ermitteln welches Array die meisten Werte hat, diese Anzahl mal Pausendauer ergibt die Gesamtdauer
- Für die beiden Arrays mit weniger Werten ist der Pausenwert Gesamtdauer/Anzahl der eigenen Werteanzahl
0
flowgrow
flowgrow29.11.0919:08
ich bin gerade ein bisschen überfordert haha
ganz verstanden hab ich es nicht...

also zuerst mit einer for schleife die zahlensteigerungs- und pausenwerte in arrays notieren.
und dann via setTimeout die animation starten oder wie?
„Chuck Norris hat mehr Kreditkarten als Max Mustermann!“
0
dreyfus29.11.0919:26

Äh, fast... Die Pausenwerte brauchst Du nicht in die Arrays schreiben, die kannst Du ausrechnen bevor Du die Animation startest.

Sagen wir:

Dein Pausenwert ist 50 ms.
Array1 enthält [1,3,5,7,9,11]
Array2 enthält [5,17,33]
Array3 enthält [2,4,6,8,10,12,14,16,18,20]

Wenn Du jetzt Array1.length abfragst, erhältst du 6 als Anzahl der enthaltenen Werte, 3 für Array2 und 10 für Array3. Also ist 10 die maximale Anzahl und die Animation dauert 10*50 = 500 ms. Also startest Du die Animation von Array3 mit 50 ms als Pausenwert. Array2 braucht einen Pausenwert von 500/3 = 167 ms und Array1 einen Pausenwert von 500/6 = 83 ms. Dann sollten sie so gleichzeitig wie möglich ankommen... die zu verwendende Pausendauer musst Du halt wieder als Argument in den Aufruf von differNumber einbauen.
0
flowgrow
flowgrow29.11.0921:01
habs jetzt gelöst, aber mit meinem ansatz (dass man immer eine neue variable braucht) war eig eh ganz einfach
function easeInOut(x,y) {
- - var result = Math.pow(Math.sin(x*Math.PI/2),2);
- - 
- - if (y == 1) {
- - - - result = x-(Math.sin(2*x*Math.PI)/(2*Math.PI));
- - }
- - return result;
}

var pause = 50;
function differNumber(a,b,x) {
- - if (!x) {x=-9.9;}
- - var i = x/10;
- - var multi = 1;
- - c=document.getElementById(b.id);
- - b=parseFloat(b.innerHTML);
- - if (x < 0) { // vorher paar mal um 0.1 erhöhen damit es noch langsamer startet
- - - - if (b!=a) {
- - - - - - if (b>a) {multi = -1}
- - - - - - b = b+0.01*multi
- - - - - - b = b.toFixed(2);
- - - - - - c.innerHTML = b;
- - - - - - x++;
- - - - - - setTimeout(differNumber, pause, a, c, x);
- - - - - - //console.log(b+" -> "+a+": "+(a-b).toFixed(2)+" -> "+((a-b)*easeInOut(i,1))+"/"+((a-b)*easeInOut(i))+" | Durchgang: "+x.toFixed(1));
- - - - } else {
- - - - - - x = -9.9;
- - - - }
- - } else {
- - - - //console.log(b+" -> "+a+": "+(a-b).toFixed(2)+" -> "+((a-b)*easeInOut(i,1))+"/"+((a-b)*easeInOut(i))+" | Durchgang: "+x.toFixed(1));
- - - - 
- - - - if (b!=a) {
- - - - - - b = b+(a-b)*easeInOut(i,1);
- - - - - - b = b.toFixed(2);
- - - - - - c.innerHTML = b;
- - - - - - x++;
- - - - - - setTimeout(differNumber, pause, a, c, x);
- - - - } else {
- - - - - - x = -9.9;
- - - - }
- - }
}
siehe:

trotzdem danke für die hilfe!
„Chuck Norris hat mehr Kreditkarten als Max Mustermann!“
0

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.