CSS-Tipps: Sprechen Sie über Zufallszahlen in CSS

Kürzlich bin ich zufällig auf ein interessantes Problem gestoßen. Ich möchte den Wert für die Animationsdauer zufällig festlegen. Hier ist ein nicht zufälliges Beispiel:

Schauen Sie sich dieses Beispiel für CSS-Zufallszahlen Nr. 1 von Robin Rendle (@robinrendle) auf CodePen an.

Dies ist eine Animation, die ich in CSS geschrieben habe:

@keyframes flicker {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }}#red {
  animation: flicker 2s ease alternate infinite;}

Sie funktioniert derzeit gut, aber es gibt hier keine Randomisierung und die Ausführungszeit der Animation ist auf 2 Sekunden festgelegt.

Die Animation, die ich möchte, ist eine Zufallszahl, deren Ausführungszeit innerhalb von 2 Sekunden liegt. Der gewünschte Effekt ist wie folgt:

.element {
  animation: flicker $randomNumber alternate infinite;}

Die $randomNumber hier ist eine Zufallszahl, die von einer bestimmten Funktion generiert wird.

CSS-Präprozessoren wie Sass bieten eine solche Funktion:

$randomNumber: random(5);.thing {
  animation-duration: $randomNumber + s;}

Das ist vielleicht das, was Sie wollen, aber es ist nicht das, was ich will. Der Präprozessor generiert einen offensichtlichen Fehler der Nummerierungsprozess:

In Sass ist der Prozess der Zufallszahlengenerierung wie der Prozess, bei dem ein Name aus einer Geschichte ausgewählt wird. Er wird nach dem Schreiben nur zufällig herausgenommen und ändert sich dann nicht mehr.

Mit anderen Worten: Sobald der CSS-Präprozessor ausgeführt wird, ist der Randomisierungsprozess beendet und die generierte Zufallszahl wird für immer auf einen Wert festgelegt (dh bis der CSS-Präprozessor erneut ausgeführt wird) Es wird neu generiert . )

Es werden keine Zufallszahlen generiert, wenn JavaScript ausgeführt wird, wie dies bei den Zufallsfunktionen in JavaScript der Fall ist (z. B. Math.random()).

Obwohl es mir sehr leid tat, wurde mir auch klar, dass dies eine perfekte Gelegenheit war, CSS-Variablen (CSS-eigene Eigenschaften) zu verwenden! Obwohl es keine leichte Aufgabe ist, damit Zufallszahlen zu generieren, können sie uns dennoch helfen.

Wenn Sie mit ihnen nicht vertraut sind, machen Sie sich keine Sorgen. Tatsächlich sind CSS-Variablen integriert und unterscheiden sich von den Variablen, die Sie bereits von CSS-Präprozessoren wie SASS und LESS kennen. Sehen Sie sich hier die vielen Vorteile an, die Chris auflistet:

Sie können sie ohne Vorverarbeitung nutzen.

Sie sind kaskadiert. Sie können den Wert dieser Variablen festlegen oder die aktuelle Variablenreferenz in jedem Selektor überschreiben.

Wenn sich ihre Werte ändern (z. B. Medienabfragen oder andere Statusänderungen), wird der Browser neu gerendert.

Sie können auf sie zugreifen und sie mit JavaScript bearbeiten.

Der letzte Punkt ist für uns wichtig. Wir generieren Zufallszahlen in JavaScript und setzen die generierten Werte auf CSS-Variablen.

Legen Sie eine benutzerdefinierte CSS-Eigenschaft fest und geben Sie ihr einen Standardwert (dies ist nützlich, falls JavaScript beim Schreiben des Werts aus irgendeinem Grund fehlschlägt):

/* 设置默认的动画执行时间 */:root {
  --animation-time: 2s; }

Jetzt können wir diese Variable verwenden CSS wie dieses:

#red {
  animation: flicker var(--animation-time) ease alternate infinite;}

Lassen Sie uns ohne weitere Umschweife sofort loslegen. Obwohl diese wie eine der vorherigen SVG-Animationen aussieht, ist sie mit CSS-Variablen geschrieben. Sie können den Wert der Variablen ändern, um zu testen, wie sie funktioniert. Und sehen Sie sich den Effekt in Echtzeit in der Vorschau an.

Jetzt verwenden wir JavaScript, um auf diese Variable zuzugreifen und sie zu bearbeiten:

var time = Math.random();

Hier können wir den mit SVG erstellten roten Kreis finden und den Wert von --animation-time mit setProperty ändern.

var red = document.querySelector('#red');red.style.setProperty('--animation-time', time +'s');

Schauen Sie hier! Eine Zufallszahl wurde für das SVG-Animationselement festgelegt:

Sehen Sie sich dieses Beispiel einer CSS-Zufallszahl Nr. 3 an, die von Robin Rendle (@robinrendle) auf CodePen geschrieben wurde.

Dies ist eine große Verbesserung gegenüber dem vorherigen, da sein Wert eine Zufallszahl ist, die bei der Ausführung von JavaScript generiert wird und sich jedes Mal ändert. Dadurch wird der gewünschte Effekt erfolgreich erzielt, aber wir haben immer noch ein wenig Schwierigkeiten damit: periodische Animationsdauer einer Zufallszahl zur Laufzeit.

Glücklicherweise können wir jetzt JavaScript verwenden, um den Wert einer benutzerdefinierten Variablen zu ermitteln kann nach unseren Wünschen aktualisiert werden. Hier ist ein Beispiel, in dem wir den Wert der Animationsdauer jede Sekunde aktualisieren:

var red = document.querySelector('#red');function setProperty(duration) {
  red.style.setProperty('--animation-time', duration +'s');}function changeAnimationTime() {
  var animationDuration = Math.random();
  setProperty(animationDuration);}setInterval(changeAnimationTime, 1000);

Das ist genau das, was ich will: Sehen Sie sich dieses Beispiel für CSS-Zufallszahlen an, das Robin Rendle (@robinrendle) auf CodePen geschrieben hat# 4.

Aber denken Sie daran, dass die Unterstützung für CSS-Variablen (benutzerdefinierte Attribute) immer noch nicht sehr gut ist, seien Sie also vorsichtig, wenn Sie sie verwenden. Wir können eine progressive Erweiterungsanimation wie folgt implementieren:

#red {
  animation: flicker .5s ease alternate infinite;
  animation: flicker var(--animation-time) ease alternate infinite;}

Wenn CSS-Variablen nicht unterstützt werden, können wir auch einen Teil der Animation sehen, obwohl es meiner Meinung nach nicht das perfekte Aussehen ist.

Zum Glück sind CSS-Variablen nicht die einzige Möglichkeit, zufällige Animationsdauerwerte zu generieren. Wir können JavaScript verwenden, um das DOM zu manipulieren und den Wert direkt auf den Stil festzulegen:

var red = document.querySelector('#red');red.style.animationDuration = Math.floor(Math.random() * 5 + 1) + "s";

Wir können sogar warten, bis die Animation abgeschlossen ist, bevor wir eine neue Zeit festlegen, wenn wir einen solchen Effekt wünschen:

var red = document.querySelector('#red');function setRandomAnimationDuration() {
  red.style.animationDuration = Math.floor(Math.random() * 10 + 1) + "s";}red.addEventListener("animationiteration", setRandomAnimationDuration);

Dies ist nur eine Liste möglicher Möglichkeiten, dies zu erreichen. Sie können EQCSS auch verwenden, um diesen Effekt zu erzielen:

@element '#animation' {
  .element {
    animation-duration: eval('rand')s;
  }}

var rand = Math.random();EQCSS.apply();

Möchten Sie, dass CSS selbst dazu in der Lage ist? Korrekte Zufallszahlen generieren? Ich habe bisher keine relevanten Informationen gesehen, aber es kann eine Weile dauern, bis ich sie tatsächlich verwenden kann.

Für weitere CSS-Kenntnisse: Sprechen Sie bitte über Zufallszahlen Achten Sie auf PHP für verwandte Artikel auf der chinesischen Website!