Ich entschuldige mich, wenn dies in der falschen Community ist, ich konnte keine bessere Anpassung finden.
Mit dem Push-in-UX-Design zum Erstellen interaktiver Symbole, die nahtlos zwischen Zuständen animieren, habe ich mich gefragt, ob es eine bessere Lösung für das Web als SVG-basierte Grafik in Bezug auf Leistung, Kompatibilität und Anpassung geben könnte.
>Ich hatte eine Idee, einige dieser Icons mit gestylten HTML-Elementen und CSS-Übergängen neu zu erstellen. Durch Definieren der Start- und Stopp-Punkte für das Symbol können wir viele Eigenschaften wie die Farbe, die Rundheit und die Übergangsbeschleunigung und -verzögerung anpassen, um sehr angepasste Animationen mit einer einzigen Codebasis zu erstellen. Da zur Berechnung von Frames nur CSS-Eigenschaften und nicht JavaScript verwendet werden, sollte Hardware effizienter verwenden als SVG-Grafiken.
Sehen Sie sich das Beispiel an, das ich gemacht habe und das eine Benutzeroberfläche zum Ändern von Farbe, Rundheit, Drehung und Opazität jedes Teils (zum Debuggen) bietet. Es zeigt das Symbol in verschiedenen Größen.
Im Wesentlichen werden beim Hover Eigenschaften auf jeden einzelnen Balken angewendet:
%Vor%Es gibt ein paar Nachteile, die ich von dieser Methode sehe.
IE8 & amp; Opera Mini ... Nun, auch IE9 macht keine Übergänge, aber es hat zumindest Transformationen, so dass es ein nicht animiertes Symbol wäre. IE8 könnte mit einigen Hacky-Filtern behoben werden und dafür sorgen, Breite oder relative Positionierung anstelle von Transformationen zu verwenden, aber das wird den Code etwas aufblähen.
Es wird ein zusätzliches Markup im HTML-Code geben. Ich hoffe, dass in Zukunft eine Lösung (ähnlich wie Shadow DOM) zur Verfügung steht, die dabei helfen wird, dies zu beheben. Einige Icons könnten rein mit einem Element und Pseudoelementen erstellt werden, aber ich möchte nicht alle Icons auf 3 Teile beschränken.
Es wird schwierig sein, alle Icons in kleinen Größen gut aussehen zu lassen. Ich bin mir nicht sicher, wie das mit der Verwendung von SVG-Grafiken bei kleinen Größen verglichen wird, aber ich würde annehmen, dass native Elemente schlechter aussehen würden, da dies nicht ihr primärer Zweck ist. Das Symbol in meinem Beispiel sieht bei 16px jedoch ziemlich gut aus.
Überwiegen diese Nachteile und andere, die mir fehlen, die positiven?