Web-Entwicklung ist heute einer der gefragtesten Berufe. Und wenn Sie Animationen und Spiele mit CSS erstellen, haben Sie beim Rendern geplanter Frames wahrscheinlich ein Problem mit schlechter Leistung festgestellt. Einer der Hauptfaktoren, die die Leistung beeinflussen, ist die Anzahl der Bilder pro Sekunde (FPS).
Was ist FPS? FPS ist die Anzahl der Bilder, die in einer Sekunde auf dem Bildschirm angezeigt werden. Je höher die FPS, desto glatter und realistischer wird die Animation. Eine hohe Anzahl von Bildern pro Sekunde erfordert jedoch mehr Ressourcen und kann bei Geräten mit begrenzten Ressourcen zu Leistungseinbußen führen.
Um FPS in CSS einzurichten, müssen Sie einige einfache Schritte befolgen. Stellen Sie zunächst sicher, dass Ihre Animation keine ständig neuen Frames lädt. Verwenden Sie stattdessen CSS-Transformationen und Animationen, die vom Browser durch Hardwarebeschleunigung ausgeführt werden. Dadurch werden die Renderprozesse optimiert und die Leistung verbessert.
Anstatt beispielsweise die Eigenschaft "left" zu ändern, um die Bewegung eines Elements zu animieren, ist es besser, die Eigenschaft "transform: translateX()" zu verwenden. Dadurch kann der Browser die GPU verwenden, um Animationen auszuführen, was die FPS erheblich verbessert.
Zweitens verwenden Sie CSS-Übergänge und Keyframes, um flüssige und realistische Animationen zu erstellen. Vermeiden Sie jedoch eine große Anzahl von Keyframes, da dies zu Leistungseinbußen führen kann. Es ist am besten, die wichtigsten Frames zu verwenden, um die wichtigsten Bewegungen und Zustände der Animation zu übertragen, und die restlichen Änderungen können mit CSS-Transformationen und Übergängen abgerufen werden.
Abschließend müssen Sie Ihre Animationen testen und optimieren. Verwenden Sie die Browser-Entwicklertools, um Engpässe in der Leistung Ihrer Animation zu erkennen. Ändern Sie die Parameter und experimentieren Sie mit dem Code, bis Sie den gewünschten FPS-Wert erreicht haben.
Was ist FPS in CSS
Je höher der FPS-Wert ist, desto glatter und realistischer sehen die Animationen und Bewegungen aus. Ein zu hoher FPS-Wert kann jedoch zu Leistungseinbußen führen, insbesondere bei schwachen Geräten oder bei komplexen Effekten und Animationen.
Sie können FPS in CSS mit verschiedenen CSS-Eigenschaften und Attributen festlegen, z. B. transition-duration anpassen der Übergangszeiten, animation-timing-function um die Interpolation von Animationen und anderen zu definieren. Die Anwendung der richtigen Werte und die Optimierung der Bildanzeige können die Benutzererfahrung erheblich verbessern und die Webseite attraktiver und dynamischer machen.
Schritt 1: Verwenden Sie die richtigen Werte
Die Einstellung von FPS (Frames pro Sekunde) in CSS beinhaltet die korrekte Definition eines Werts, der bestimmt, wie oft die Animation aktualisiert werden soll. Wenn Sie einen zu niedrigen Wert einstellen, kann die Animation verlangsamt werden, während die Einstellung eines zu hohen Werts die CPU und den Akku des Geräts übermäßig belasten kann.
Der optimale FPS-Wert hängt möglicherweise von den Eigenschaften des Geräts ab, auf dem die Animation ausgeführt wird. Es wird normalerweise empfohlen, einen Wert zwischen 24 und 60 Bildern pro Sekunde zu verwenden. Der 60-FPS-Wert ist Standard und bietet eine glatte und realistische Animation.
Verwenden Sie die animation-duration-Eigenschaft, um den FPS-Wert in CSS zu bestimmen, der die Dauer der Animation in Sekunden oder Millisekunden angibt. Um den FPS-Wert zu bestimmen, muss die Dauer der Animation berechnet werden. Wenn Sie beispielsweise eine Animation mit 60 FPS wünschen, muss der Wert für Animation-duration 1s/60 = 0.0167s oder 16.7ms betragen.
Es ist wichtig zu verstehen, dass der Wert animation-duration nur die Dauer der Animation bestimmt, aber nicht garantiert, dass der angegebene FPS eingehalten wird. Um einen bestimmten FPS-Wert zu erreichen, müssen möglicherweise zusätzliche Methoden verwendet werden, z. B. die Codeoptimierung und die Verwendung von Hardwarebeschleunigung über die transform- Eigenschaft.
Auswählen des richtigen FPS-Werts
Berücksichtigen Sie bei der Auswahl eines FPS-Werts die folgenden Faktoren:
- Geräteleistung: Verschiedene Geräte können Animationen mit unterschiedlichen FPS-Werten verarbeiten. Sie müssen einen Wert auswählen, der auf den meisten Geräten gut funktioniert.
- Komplexität der Animation: komplexe Animationen mit vielen sich bewegenden Elementen erfordern möglicherweise einen höheren FPS-Wert, um eine Glätte zu erzielen.
- Benutzererwartungen: Wenn der Benutzer eine schnelle und dynamische Animation erwartet, sollte der FPS-Wert höher sein.
Normalerweise liegen die FPS-Werte zwischen 24 und 60. Der optimale FPS-Wert für die meisten Websites beträgt 30 oder 60. Wenn eine Website komplexe Animationen enthält oder eine hohe Bildrate erfordert, kann der FPS-Wert auf 60 eingestellt werden.
Stellen Sie jedoch keinen sehr hohen FPS-Wert ein, da dies zu einer unnötigen Belastung der Geräteressourcen des Benutzers führen kann. Es lohnt sich auch, auf den Stromverbrauch des Geräts zu achten, wenn es mit einem hohen FPS-Wert arbeitet.
Wenn Sie also den richtigen FPS-Wert auswählen, müssen Sie die Leistung des Geräts, die Komplexität der Animation und die Erwartungen des Benutzers berücksichtigen. Ein FPS-Wert von 30 oder 60 ist für die meisten Websites die optimale Wahl, aber die endgültige Lösung sollte auf den spezifischen Anforderungen und Zielen Ihres Projekts basieren.
Schritt 2: Optimieren Sie Animationen
Hier sind einige Möglichkeiten, Animationen zu optimieren:
| 1. | Verwenden Sie CSS-Transformationen, anstatt Elemente zu positionieren. |
| 2. | Vermeiden Sie die Verwendung der Eigenschaft position: absolute; beim Animieren von Elementen. |
| 3. | Verwenden Sie die Hardwarebeschleunigung, indem Sie die Eigenschaft transform: translateZ(0) hinzufügen; oder transform: translate3d(0,0,0); für animierte Elemente. |
| 4. | Vermeiden Sie es, Elemente neu zu zeichnen, die sich während der Animation nicht ändern, indem Sie die will-change: transform; -Eigenschaft verwenden. |
| 5. | Verwenden Sie nach Möglichkeit Animationen mit CSS-Transitionen anstelle von CSS-Animationen. |
Optimiere Animationen für bessere FPS
Wenn Sie Animationen in CSS erstellen, müssen Sie berücksichtigen, dass sie erhebliche Auswirkungen auf die Seitenleistung haben können. Niedrige Bilder pro Sekunde (FPS) können zu Ruckeln und Verzögerungen bei der Animation führen, was sich negativ auf die Benutzererfahrung auswirkt.
Um Animationen zu optimieren und höhere FPS zu erzielen, sollten Sie einige wichtige Punkte beachten:
- Verwenden Sie transform und opacity für Animationen: die Transform- und Opacity-Eigenschaften haben eine viel geringere Leistungsbelastung als die Größenänderungs- und Positionierungseigenschaften von Elementen. Daher ist es am besten, sie nach Möglichkeit zum Erstellen von Animationen zu verwenden.
- Beschränken Sie die Verwendung der Position-Eigenschaft: die position-Eigenschaft, insbesondere der Wert "fixed" oder "absolute", kann dazu führen, dass die Seite bei jedem Frame der Animation neu gezeichnet wird. Um dies zu vermeiden, sollten Sie die position-Eigenschaft nur bei Bedarf verwenden und ihre Anwendung auf animierte Elemente beschränken.
- Verwenden Sie Hardwarebeschleunigung: wenn Sie komplexe Animationen erstellen, z. B. das Verschieben mit vielen Elementen oder das Verwenden von Schatten und Unschärfe, wird empfohlen, die Hardwarebeschleunigung mithilfe der transform: translateZ(0) -Eigenschaft oder der will-change: transform-Eigenschaft zu verwenden. Dies ermöglicht dem Browser, Animationen mit der GPU anstelle der CPU auszuführen, und verbessert die Leistung.
- Optimieren Sie die Aktualisierung der Elementposition und -größe: wenn Sie die Position oder Größe der Elemente während der Animation ändern, muss der Browser die Seite neu zeichnen. Um die Leistungsbelastung zu reduzieren, sollten Sie die Eigenschaften transform und opacity für die Animation verwenden und nicht die Eigenschaften, die zum Neuzeichnen der Seite führen.
- Verwenden Sie requestAnimationFrame: anstelle von setInterval oder setTimeout wird empfohlen, die requestAnimationFrame-Methode zum Starten der Animation zu verwenden. Es ist effizienter, da es die Animation mit der Bildschirmaktualisierung synchronisiert und es dem Browser ermöglicht, den Prozess entsprechend der Aktualisierungsrate des Bildschirms zu optimieren.
Wenn Sie diese Richtlinien befolgen, können Sie Animationen auf Ihrer Webseite optimieren, um die Leistung zu verbessern und eine angenehme Benutzererfahrung zu schaffen.
Schritt 3: Optimieren Sie Ihre Bilder
Hier finden Sie einige Tipps zur Bildoptimierung:
1. Wählen Sie das richtige Format aus
Die Auswahl des richtigen Bildformats kann die Dateigröße erheblich reduzieren. Für Fotos ist es besser, das JPEG-Format zu verwenden und für Bilder mit Transparenz das PNG-Format. Vermeiden Sie die Verwendung von nicht leeren Formaten wie BMP oder TIFF.
2. Bildkompression
Es gibt viele Tools und Online-Dienste zum Komprimieren von Bildern ohne Qualitätsverlust. Verwenden Sie diese Tools, um die Dateigröße zu reduzieren, bevor Sie sie auf Ihre Website hochladen. Dadurch wird das Laden der Seite beschleunigt und die Leistung verbessert.
3. Verwenden Sie CSS-Sprites
Das Erstellen von CSS-Sprites ist eine Methode, mit der Sie mehrere Bilder in einer einzigen Datei zusammenführen können. Dieser Ansatz reduziert die Anzahl der Anfragen an den Server, was dazu beiträgt, die Ladezeit der Seite zu reduzieren und die FPS in CSS zu erhöhen.
4. Optimieren der Bildgrößen
Beachten Sie die Bildgrößen, die in Ihren CSS-Regeln verwendet werden. Wenn das Bild in einer kleinen Größe angezeigt wird, sollten Sie ein kleineres Bild verwenden. Dies wird dazu beitragen, das Seitengewicht zu reduzieren und die Leistung zu verbessern.
Wenn Sie diese Tipps befolgen, können Sie die Bilder auf Ihrer Website optimieren und die Leistung in CSS verbessern.
Reduzieren der Bildgröße, um FPS zu verbessern
Hier sind einige einfache Schritte, die Ihnen helfen, die Bildgröße zu reduzieren und die FPS zu verbessern:
1. Wählen Sie das richtige Bildformat aus
Verschiedene Bildformate haben unterschiedliche Komprimierungsstufen und Qualität. Zum Beispiel wird das JPEG-Format normalerweise für Fotos mit hoher Bildqualität verwendet, während das PNG-Format normalerweise für Bilder mit transparentem Hintergrund verwendet wird. Wählen Sie das Format aus, das für Ihre spezielle Situation am besten geeignet ist.
2. Verwenden Sie Werkzeuge, um Ihre Bilder zu optimieren
Es gibt viele Online-Tools und Programme, mit denen Sie die Bildgröße optimieren können, ohne dass die Qualität sichtbar wird. Einige von ihnen ermöglichen es Ihnen auch, den Komprimierungsgrad und andere Parameter anzupassen, um die besten Ergebnisse zu erzielen.
3. Reduzieren Sie die Größe der Bilder
Wenn Sie keine Tools von Drittanbietern verwenden möchten, können Sie die Größe von Bildern manuell mit Bildbearbeitungsprogrammen wie Adobe Photoshop oder GIMP reduzieren. Durch die Reduzierung der Bildgröße können Sie die Dateigröße reduzieren und das Laden der Seite beschleunigen.
Die Reduzierung der Bildgröße ist eine Möglichkeit, die FPS in CSS zu erhöhen. Optimierte Bilder werden schneller geladen, was zu einem reibungslosen und schnellen Betrieb der Webseite beiträgt.
Schritt 4: Verwenden Sie die richtigen Eigenschaften
Wenn Sie FPS in CSS einrichten, ist es wichtig, die richtigen Eigenschaften zu verwenden, um das gewünschte Ergebnis zu erzielen:
-moz-appearance: Wird verwendet, um das Erscheinungsbild eines Elements in Firefox festzulegen.
-webkit-appearance: Wird verwendet, um das Erscheinungsbild eines Elements in Browsern festzulegen, die die WebKit-Engine verwenden (z. B. Safari und Chrome).
animation: Ermöglicht das Erstellen einer Elementanimation mithilfe von Keyframes.
animation-delay: Legt die Verzögerung fest, bevor die Animation gestartet wird.
animation-duration: Legt die Dauer der Animation fest.
animation-iteration-count: Gibt an, wie oft die Animation wiederholt werden soll.
animation-name: Gibt den Namen der Animation an, die mit Keyframes erstellt wurde.
animation-timing-function: Legt fest, wie sich die Animation im Laufe der Zeit ändern soll (z. B. gleichmäßig oder verlangsamt).
transform: Ermöglicht es Ihnen, die Transformationen eines Elements zu ändern, z. B. das Skalieren, Drehen oder Verschieben eines Elements.
transition: Ermöglicht es Ihnen, glatte Änderungen an Elementeigenschaften zu erstellen, wenn Sie von einem Wert zum anderen wechseln.
transition-delay: legt die Verzögerung fest, bevor der Übergang beginnt.
transition-duration: Legt die Dauer des Übergangs fest.
transition-property: Gibt an, welche Elementeigenschaften verschoben werden sollen.
transition-timing-function: Legt fest, wie sich die Eigenschaften eines Elements während des Übergangs ändern sollen.
Beachten Sie, dass einige dieser Eigenschaften möglicherweise nicht von allen Browsern unterstützt werden und Präfixe für verschiedene Engines erfordern.
