CSS-Tipps: 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:

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 2s 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:

Sass中，随机数生成过程就像是从一个故事中选择名字的过程，它仅仅在写完之后随机取出，然后它就不再变化了。
— jake albaugh (@jake_albaugh) 2016年12月29日

Mit anderen Worten, sobald der CSS-Präprozessor ausgeführt wird, ist der Randomisierungsprozess beendet und die generierte Zufallszahl wird immer auf einen Wert festgelegt (das heißt, dies ist nicht der Fall). wird neu generiert, bis der CSS-Präprozessor erneut ausgeführt wird.)

Es ist nicht wie die Zufallsfunktion in JavaScript (wie Math.random()), die Zufallszahlen generiert, wenn JavaScript ausgeführt wird.

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 damit 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 die vielen Vorteile an, die Chris hier 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 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, wir Der Wert einer benutzerdefinierten Variablen 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: Schauen Sie sich dieses Beispiel für CSS-Zufallszahlen #4 von Robin Rendle (@robinrendle) auf CodePen an.

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 Verbesserungsanimation 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 hat.

---

Zum Glück sind CSS-Variablen nicht die einzige Möglichkeit, zufällige Werte für die Animationsdauer 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();

---

Wollen Sie Ist CSS selbst in der Lage, dies zu tun? Ich habe bisher keine relevanten Informationen gesehen. Selbst wenn, kann es eine Weile dauern, bis ich sie tatsächlich verwenden kann.