Wie man mit CSS-Übergängen einen realistischen Bewegungsunschärfe-Effekt erstellt

Bevor wir uns damit beschäftigen, wie man einen realistischen Bewegungsunschärfe-Effekt mit CSS erstellt, lohnt es sich, kurz zu untersuchen, was Bewegungsunschärfe *ist*, damit wir eine bessere Vorstellung davon haben, was wir zu reproduzieren versuchen.

Haben Sie jemals ein Foto von etwas aufgenommen, das sich schnell bewegte, besonders bei schwachem Licht, und es wurde zu einem verschwommenen Streifen? Oder vielleicht hat sich die ganze Kamera bewegt und das ganze Bild bestand aus einer Reihe von Streifen? Das ist Bewegungsunschärfe und ein Nebenprodukt der Funktionsweise einer Kamera.

Bewegungsunschärfe 101

Stellen Sie sich eine Kamera vor. Sie hat einen Verschluss, eine Tür, die sich öffnet, um Licht hereinzulassen, und sich dann schließt, um das Eindringen von Licht zu stoppen. Von dem Moment, in dem sie sich öffnet, bis zu dem Moment, in dem sie sich schließt, ist ein einziges Foto oder ein einzelnes Bild eines bewegten Bildes.

Wenn sich das Motiv des Bildes während der geöffneten Belichtungszeit bewegt, nehmen wir ein Foto eines sich durch den Rahmen bewegenden Objekts auf. Auf Film erscheint dies als gleichmäßiger Schmierfilm, wobei das Motiv an unendlich vielen Stellen zwischen seinem Ausgangspunkt und seinem Endpunkt liegt. Das bewegte Objekt erscheint auch halbtransparent, mit Teilen des Hintergrunds, die dahinter sichtbar sind.

Was Computer tun, um dies zu simulieren, ist die Modellierung mehrerer Unterframes, die dann mit einem Bruchteil der Deckkraft zusammengesetzt werden. Wenn viele Kopien desselben Objekts an leicht unterschiedlichen Stellen entlang des Bewegungspfades platziert werden, entsteht ein ziemlich überzeugendes Abbild einer Bewegungsunschärfe.

Video-Compositing-Anwendungen haben oft Einstellungen für die Anzahl der Unterteilungen, die ihre Bewegungsunschärfe haben soll. Wenn Sie diesen Wert sehr niedrig einstellen, können Sie genau sehen, wie die Technik funktioniert, wie hier, ein Frame einer Animation eines einfachen weißen Punktes mit vier Samples pro Frame.

Die Anzahl der Samples, die für eine überzeugende Bewegungsunschärfe benötigt werden, ist vollständig relativ zum Inhalt. Etwas Kleines mit scharfen Kanten, das sich sehr schnell bewegt, benötigt viele Unterframes; etwas Verschwommenes, das sich langsam bewegt, benötigt möglicherweise nur wenige. Im Allgemeinen erzeugt die Verwendung von mehr Samples einen überzeugenderen Effekt.

Das in CSS umsetzen

Um diesen Effekt in CSS zu approximieren, müssen wir eine Menge identischer Elemente erstellen, sie halbtransparent machen und ihre Animationen um einen winzigen Bruchteil einer Sekunde versetzen.

Zuerst richten wir die Basis mit der gewünschten Animation mit einem CSS-Übergang ein. Wir wählen einen einfachen schwarzen Punkt und weisen ihm bei Hover (oder Tippen auf Mobilgeräten) eine Transformation zu. Wir animieren auch den Randradius und die Farbe, um die Flexibilität dieses Ansatzes zu zeigen.

Hier ist die Basis-Animation ohne Bewegungsunschärfe.

Jetzt erstellen wir 20 identische Kopien des schwarzen Punkts, alle an exakt derselben Stelle mit absoluter Positionierung platziert. Jede Kopie hat eine Deckkraft von 10 %, was etwas mehr ist, als mathematisch korrekt wäre, aber ich finde, wir müssen sie undurchsichtiger machen, damit sie solide genug aussehen.

Der nächste Schritt ist, wo die Magie passiert. Wir fügen jedem Klon unseres Punktobjekts einen leicht zunehmenden `transition-delay`-Wert hinzu. Sie alle führen exakt dieselbe Animation aus, werden aber jeweils um drei Millisekunden versetzt.

Das Schöne an diesem Ansatz ist, dass er einen Pseudo-Bewegungsunschärfe-Effekt erzeugt, der für viele verschiedene Animationen funktioniert. Wir können Farbwechsel, Skalierungsübergänge, ungewöhnliche Timings hinzufügen, und der Bewegungsunschärfe-Effekt funktioniert immer noch.

Die Verwendung von 20 Objekt-Klonen funktioniert für viele schnelle und langsame Animationen, aber weniger können immer noch ein vernünftiges Gefühl von Bewegungsunschärfe erzeugen. Möglicherweise müssen Sie die Anzahl der geklonten Objekte, ihre Deckkraft und den Betrag der Übergangsverzögerung an Ihre spezielle Animation anpassen. Die gerade betrachtete Demo hat den Unschärfe-Effekt leicht übertaktet, um ihn stärker hervorzuheben.

---

Mit dem Fortschritt der Computerleistung erwarte ich, dass einige der großen Browser diesen Effekt bald nativ anbieten werden. Dann können wir die Lächerlichkeit aufgeben, 20 identische Objekte zu haben. In der Zwischenzeit ist dies eine vernünftige Methode, um eine realistische Bewegungsunschärfe zu approximieren.