Grafik über css und JavaScript flackern lassen

[Enrico]

Hallo,

ich versuche, den Schriftzug unseres Logos über JavaScript flackern zu lassen.

Hierzu habe ich unser Logo mehrfach abgeändert und in einer einzigen Grafik als Sprite zusammengefasst:

• Original
• Helligkeit + 10
• Helligkeit + 20
• Helligkeit + 30
• Helligkeit + 40
• Helligkeit + 50
• Helligkeit - 10
• Helligkeit - 20
• Helligkeit - 30
• Helligkeit - 40
• Helligkeit - 50

In der zugehörigen css-Datei habe ich für jeden Zustand eine eigene Klasse definiert. Klassen deshalb, weil ich über document.getElementById("Logo") auf den div mit der Logografik zugreife. Den eigentlichen Flacker-Effekt möchte ich nun durch Zuweisung einer zufällig ermittelten Klasse, die einen anderen Ausschnitt des Sprites und damit die Grafik in aufgehellter oder abgedunkelter Version ausgibt. Gleich darauf wird aber wieder der Ausschnitt mit der originalen Grafik angezeigt und die Funktion nach einer zufälligen zeitlichen Verzögerung wieder aufgerufen.

----  
HTML  
----  
  
<div id="Logo" class="LL0"></div>

---  
CSS  
---  
  
.LL0,  
.LL1,  
.LL2,  
.LL3,  
.LL4,  
.LL5,  
.LL6,  
.LL7,  
.LL8,  
.LL9,  
.LL10  
{  
   background: url(../IMG/LayoutLogo.png);  
   height:     222px;  
   width:      346px;  
}  
  
.LL0  
{  
   background-position: 0 0;  
}  
  
.LL1  
{  
   background-position: 0 -222px;  
}  
  
.LL2  
{  
   background-position: 0 -444px;  
}  
  
...usw...

----------  
JAVASCRIPT  
----------  
  
var Logo;  
  
window.onload = function ()  
{  
   Logo = document.getElementById("Logo");  
  
   AnimationLogo();  
}  
  
function AnimationLogo()  
{  
   Logo.className = "LL" + rand (1, 10);  
   Logo.className = "LL0";  
  
   setTimeout("AnimationLogo()", rand (3000, 10000));  
}  
  
function rand (min, max)  
{  
   return Math.floor (Math.random() * (max - min + 1)) + min;  
}

Leider wird mir aber immer nur die Grafik in der Version "LL0", also dem originalen Zustand angezeigt, nicht aber in einer zufällig anderen Aufhellung bzw. Abdunkelung.

Wo liegt mein Denk- oder/und Umsetzungsfehler bei meinem Vorhaben?

Vielen Dank für eure Hilfe und Gruss,
Enrico

[Karl-Franz zu Ferdinand von und bei Dümpelshofen]

Guten Abend.

Leider wird mir aber immer nur die Grafik in der Version "LL0", also dem originalen Zustand angezeigt, nicht aber in einer zufällig anderen Aufhellung bzw. Abdunkelung.

Schuss ins Blaue:

function AnimationLogo()
{
   Logo.className = "LL" + rand (1, 10);
   Logo.className = "LL0";

Ich würde nichts darauf verwetten, irgendeine Änderung zu sehen zu bekommen, wenn ohne programmierte Verzögerung vom Normalzustand LL0 zum Aufblinkebildchen LLx und wieder zurückgeschaltet wird.
Vielleicht probierst du es mal auf einem alten 486er, der könnte für sowas langsam genug sein.

Gute Nacht.

[Der Martin]

Hallo,

Schuss ins Blaue:

Treffer, versenkt.

function AnimationLogo()
{
   Logo.className = "LL" + rand (1, 10);
   Logo.className = "LL0";

Ich würde nichts darauf verwetten, irgendeine Änderung zu sehen zu bekommen, wenn ohne programmierte Verzögerung vom Normalzustand LL0 zum Aufblinkebildchen LLx und wieder zurückgeschaltet wird.

Ich würde stattdessen viel darauf wetten, dass man nichts davon sieht.

Vielleicht probierst du es mal auf einem alten 486er, der könnte für sowas langsam genug sein.

Das hilft nicht. Ein Browser reagiert erst dann auf Änderungen, wenn man ihm Zeit dafür gibt. Während der Ausführung einer Javascript-unktion wird aber nichts aktualisiert.

So long,
 Martin

[MudGuard]

Hi,

Javascript-unktion

Ach, selbst das Unken wird heute schon automatisiert ...

cu,
Andreas

[Der Martin]

Hallo,

Javascript-unktion
Ach, selbst das Unken wird heute schon automatisiert ...

tja, manchmal bin ich wohl ein bissl unkenzentriert.
Im Ernst: Mir fällt in letzter Zeit auf, dass ich mit zunehmender Häufigkeit Großbuchstaben am Wortanfang "verliere". Anscheinend konzentriert sich mein Kleinhirn mehr auf "Kleiner Finger: Shift drücken!", als auf den anderen Finger, der den Buchstaben dazu liefern soll.

Ciao,
 Martin

[Enrico]

Hallo,

Ein Browser reagiert erst dann auf Änderungen, wenn man ihm Zeit dafür gibt.
Während der Ausführung einer Javascript-unktion wird aber nichts aktualisiert.

Heißt das, der Code wird zu schnell ausgeführt, um eine Änderung sehen zu können?

Enrico

[Der Martin]

Hi,

Ein Browser reagiert erst dann auf Änderungen, wenn man ihm Zeit dafür gibt.
Während der Ausführung einer Javascript-unktion wird aber nichts aktualisiert.
Heißt das, der Code wird zu schnell ausgeführt, um eine Änderung sehen zu können?

ähmmm, das ist nicht ganz richtig erklärt. Deswegen habe ich die Anspielung auf den 486er aufgegriffen und gesagt, selbst das würde nicht helfen.

Der Javascript-Code macht ja nur Zuweisungen an browser-interne Variablen. Die finden natürlich statt, genau so wie es im Code steht. Aber die Reaktion darauf, also das Aktualisieren der Anzeige, erfolgt erst dann, wenn alle momentan laufenden Javascripts wieder beendet sind.

Und das heißt eben in diesem Fall: Am Ende der _F_unktion (so besser, Andreas?) haben die relevanten Objekteigenschaften wieder dieselben Werte wie am Anfang, also passiert nichts. Du musst also nach der Änderung des Wertes die Funktion zunächst verlassen und dann kurze Zeit später den Wert wieder zurücksetzen - eventuell mit einer zweiten Funktion, die zeitverzögert mit setTimeout() aufgerufen wird.

Ciao,
 Martin

[Enrico]

Hallo,

Du musst also nach der Änderung des Wertes die Funktion zunächst verlassen
und dann kurze Zeit später den Wert wieder zurücksetzen

Ah, das war's, da muss man aber erst einmal drauf kommen. ^^

Danke Dir an dieser Stelle!

Ich habe es jetzt wie folgt gelöst:

var Logo;  
  
window.onload = function ()  
{  
   Logo = document.getElementById("Logo");  
  
   AnimationLogo(0);  
}  
  
function AnimationLogo (Status)  
{  
   if (Status == 0)  
   {  
      Logo.className = "LL" + rand (1, 10);  
      Dummy();  
   }  
   else  
      Logo.className = "LL0";  
  
   setTimeout("AnimationLogo(0)", rand (3000, 10000));  
}  
  
function rand (min, max)  
{  
   return Math.floor (Math.random() * (max - min + 1)) + min;  
}  
  
function Dummy()  
{  
   setTimeout("AnimationLogo(1)", 30);  
}

Ist der Code so in Ordnung?

Funktionieren tut er auf jeden Fall. Dennoch habe ich den Eindruck, dass er nicht gerade zimperlich mit Ressourcen umgeht und den PC verlangsamt.

Enrico

[bleicher]

Grüße,

Funktionieren tut er auf jeden Fall. Dennoch habe ich den Eindruck, dass er nicht gerade zimperlich mit Ressourcen umgeht und den PC verlangsamt.

Mit kurzen Zyklen die im Hintergrund laufen wirst du, je nach Browser und meiner Erfahrung nach, nicht glücklich. Kannst aber versuche die HW-beschleunigung anzuzapfen - evtl?
Wenn möglich greif bei reinen Design-Animationen zu einer GIF oder Flash - die sind für sowas gedacht.
Wenn es eine JS sein muss -
ich empfehle dir das ganze in die Methode vom Bild selbst zu packen, code in der Timeoutdefinition als anonyme Funktion unterbringen und Zyklus verlängern. 30ms sind doch ganz wenig. Es ist überhaupt NICHT gesagt dass der Browser so oft refresht (33 fps?). Ich rate dir von Annahmen zur realen refreshzeit des Browsers auch ab - was passiert wenn man die zu unterschreiten versucht, musst du die Gurus fragen.

MFG
bleicher

[Enrico]

Servus bleicher,

ich glaube, ich werde wohl wirklich eine oder mehrere gif-Grafiken erstellen, weil mir jedesmal, wenn ich die Seite aufrufe, früher oder später der Browser fast einfriert.

Gruß,
Enrico

[Karl-Franz zu Ferdinand von und bei Dümpelshofen]

Guten Morgen.

Ich habe es jetzt wie folgt gelöst:

var Logo;

window.onload = function ()
{
   Logo = document.getElementById("Logo");

AnimationLogo(0);
}

function AnimationLogo (Status)
{
   if (Status == 0)
   {
      Logo.className = "LL" + rand (1, 10);
      Dummy();
   }
   else
      Logo.className = "LL0";

setTimeout("AnimationLogo(0)", rand (3000, 10000));
}

function rand (min, max)
{
   return Math.floor (Math.random() * (max - min + 1)) + min;
}

function Dummy()
{
   setTimeout("AnimationLogo(1)", 30);
}

>   
> Ist der Code so in Ordnung?  
  
Schön ist das nicht.  
  
- Du brauchst eine Krücke (Dummy()).  
- Du schleppst eine Statusvariable mit dir rum, anstatt einfach den Zustand von .className heranzuziehen.  
- Du klemmst unnötigerweise vier Objekte in den globalen Namensbereich (Logo, AnimationLogo, rand, Dummy).  
- Du benutzt Code in setTimeout(), anstatt einfach eine Funktion zu übergeben.  
  
Für das Fleißsternchen:  
- Benutze immer geschweifte Klammern, auch wenn der Block nur aus einer Zeile besteht.  
- Setze beim Funktionsaufruf entweder immer Leerzeichen zwischen Funktionsname und runder Klammer, oder nie, aber nicht mal so (setTimeout), mal so (Math.floor, rand).  
- Benne Funktionen zumindest einheitlich, nicht mal mit großem ersten Buchstaben (AnimationLogo), mal mit kleinem (rand). Gleiches für alle anderen Sachen.  
  
~~~javascript
  
window.onload = function () {  
    var logo = document.getElementById("Logo"); // lokale Variable  
  
    var rand = function (min, max) { // Funktion auch lokal  
        return Math.floor(Math.random() * (max - min + 1)) + min;  
    }  
  
    var logoblinken = function () { // auch noch lokal  
        if (logo.className == "LL0") { // Zustand von .className direkt nutzen  
            logo.className = "LL" + rand(1, 10);  
            window.setTimeout(logoblinken, 75); // vielleicht reichen ja 75 ms?  
        }  
        else {  
            logo.className = "LL0";  
            window.setTimeout(logoblinken, rand(3000, 10000));  
        }  
    }  
  
    logoblinken(); // erstmalig aufrufen, dann läuft's von selber  
}  

Funktionieren tut er auf jeden Fall. Dennoch habe ich den Eindruck, dass er nicht gerade zimperlich mit Ressourcen umgeht und den PC verlangsamt.

Ein Hintergrundwechsel alle drei bis zehn Sekunden kann dafür nicht verantwortlich sein.

[Matthias Apsel]

Om nah hoo pez nyeetz, Enrico!

ich versuche, den Schriftzug unseres Logos über JavaScript flackern zu lassen.

Hierzu habe ich unser Logo mehrfach abgeändert und in einer einzigen Grafik als Sprite zusammengefasst:

• Original
• Helligkeit + 10
  …
• Helligkeit - 50

Möglicherweise geht es auch ohne JavaScript. opacity ist animierbar, zusätzlich lässt sich auch mit text- bzw. box-shadow arbeiten. Ergänzend könnte man auch die Abmessungen des Logos animieren.

Matthias