Mobile Animationen mit CSS3 erreichen 60 fps

Schlüsselpunkte

• Smooth Mobile Animation erfordert Aufmerksamkeit auf die Syntheseschritte im Critical Rendering Path (CRP) und verwenden Attribute wie transform und opacity, um zu vermeiden, dass die Belastung der vorherigen Schritte erhöht wird.
• Vermeiden Sie die Verwendung left, top, right, bottom, transform Attribute für Animationsübergänge, sie verursachen unberührte Animationen. Die Animation zu Beginn der Animation bestimmt die Schichtstabilität zuvor.
• Um eine stabile Bildrate von 60 Bildern pro Sekunde zu erzielen, verwenden Sie die GPU, um die Animation zu rendern und das Element durch das Attribut will-change zu einer anderen Ebene zu fördern, wodurch das Browser -Handling -Layout -Rendering oder die Zeichnung vermieden wird.

Dieser Artikel wurde ursprünglich in Outsystems veröffentlicht. Vielen Dank an die Partner, die SitePoint unterstützen.

Es ist einfach, Animationen in mobilen Apps zu erstellen. Es ist auch einfach, in mobilen Apps korrekt zu animieren, wenn Sie die folgenden Tipps befolgen. Obwohl jeder heutzutage CSS3 -Animationen auf Mobilgeräten verwendet, verwenden viele Menschen sie falsch. Best Practices werden oft von Entwicklern übersehen. Dies liegt daran, dass Menschen nicht verstehen, warum diese Praktiken existieren und warum sie so stark unterstützt werden. Die Gerätespezifikationen sind sehr breit. Wenn der Code nicht optimiert ist, bietet er den meisten Benutzern ein substandardisches Erlebnis. Denken Sie daran: Einige High-End-Flaggschiff-Geräte sind leistungsstark, aber die meisten Menschen auf der Welt verwenden Geräte, die wie ein Abakus mit einem LCD-Bildschirm im Vergleich zu diesen Hochleistungsgeräten sind. Wir möchten Ihnen helfen, die Kraft von CSS3 richtig auszunutzen. Dazu müssen wir zuerst etwas verstehen.

Verständnis der Zeitleiste

Was macht der Browser beim Rendern und Verarbeiten von Elementen? Diese Zeitleiste wird als wichtiger Rendering -Pfad bezeichnet:

Bildquelle: www.csstriggers.com

Um eine reibungslose Animation zu erreichen, müssen wir uns darauf konzentrieren, die Eigenschaften zu ändern, die den Syntheseschritt beeinflussen, anstatt die Belastung für den vorherigen Schritt zu erhöhen.

1. Stil Der Browser beginnt den Stil zu berechnen, der auf das Element angewendet werden soll - den Stil neu berechnen.

2. Layout In den nächsten Schritten erzeugt der Browser die Form und Position jedes Elements - das Layout. Hier setzt der Browser Seiteneigenschaften wie Breite und Höhe und beispielsweise seine Ränder oder left, top, right, bottom,

   , .

3. Zeichnen Der Browser füllt die Pixel jedes Elements in die Schicht. Es bezieht sich auf diese Eigenschaften: box-shadow, border-radius, color, background-color,

   usw.

4. Komposition Hier möchten Sie Animationen ausführen, da der Browser alle Ebenen auf den Bildschirm zeichnet. transform moderne Browser können vier Stilattribute mithilfe von opacity und

   Attributen gut animieren.
   • transform: translateX(n) translateY(n) translateZ(n); Position -
   • transform: scale(n); Zoom -
   • transform: rotate(ndeg); Rotation -
   • opacity: n; Opazität -

wie man 60 Bilder pro Sekunde erzielt

app-menu Denken Sie daran, es ist Zeit, Ihre Ärmel hochzukrempeln und hart zu arbeiten. Beginnen wir mit HTML. Wir werden eine sehr einfache Struktur erstellen und unsere layout in eine

-Klasse einfügen.

<div>
  <div></div>
  <div>
    <div></div>
  </div>
</div>

Falsche Methode

.app-menu {
  left: -300px;
  transition: left 300ms linear;
}

.app-menu-open .app-menu {
  left: 0px;
  transition: left 300ms linear;
}

left Haben Sie die Eigenschaften gesehen, die wir geändert haben? Verwenden Sie top, right, bottom,

,

Attribute für den Übergang sollten vermieden werden. Diese erstellen keine reibungslosen Animationen, da sie den Browser jedes Mal dazu zwingen, Layout -Pässe durchzuführen, was die Kinderelemente aller Elemente beeinflusst. Das Ergebnis ist Folgendes:

Diese Animation ist nicht glatt genug. Wir haben die Devtools -Zeitleiste verwendet, um zu überprüfen, was hinter den Kulissen geschah, und die Ergebnisse sind wie folgt:

Der grüne Bereich zeigt die Zeit an, die die Animation benötigt. Diese Daten zeigen unregelmäßige Bildraten und langsame Leistung. "Die grüne Balken bedeutet fps. Die hohe Balken bedeutet, dass die Animation bei 60 fps gerendert wird. Die niedrige Balken bedeutet unter 60 fps. So idealerweise möchten Sie, dass die grüne Balken immer über die gesamte Timeline bleibt. Die rote Stange bedeutet auch stottern, also zu stottern. Eine andere Möglichkeit, den Fortschritt zu messen, besteht darin, diese roten Balken zu beseitigen. “Danke Kayce Basken!

Verwenden von Transformation

.app-menu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: transform 300ms linear;
}
.app-menu-open .app-menu {
  -webkit-transform: none;
  transform: none;
  transition: transform 300ms linear;
}

transform

Attribute beeinflussen den Syntheseschritt, nicht das Layout. Hier informieren wir den Browser, dass unsere Ebenen stabil sind, bevor die Animation beginnt. Bei der Rendern der Animation gibt es also weniger Hindernisse.

<🎜> <🎜>

So reflektiert die Zeitleiste:

Die Ergebnisse beginnen besser zu werden, die Bildrate scheint stabil zu sein, sodass die Animation reibungsloser läuft.

Animation in gpu

ausführen

Dann bringen wir es auf die nächste Stufe. Um es wirklich reibungslos zu machen, werden wir die GPU verwenden, um die Animation zu rendern.

<div>
  <div></div>
  <div>
    <div></div>
  </div>
</div>

Obwohl einige Browser noch translateZ() oder translate3d() als Fallback benötigen, ist das will-change Attribut die Zukunft. Diese Eigenschaft fördert das Element für eine andere Ebene, sodass der Browser nicht das Layout -Rendering oder die Zeichnung in Betracht ziehen muss.

Sehen Sie, wie glatt es ist? Die Zeitleiste bestätigt dies:

Die Bildrate der Animation ist konstanter und die Animationsrendernungsgeschwindigkeit ist schneller. Aber am Anfang läuft noch ein langer Rahmen: Am Anfang gibt es ein bisschen Engpass. Erinnerst du dich an die HTML -Struktur, die wir am Anfang erstellt haben? Mal sehen, wie wir app-menu div:

in JavaScript kontrollieren

.app-menu {
  left: -300px;
  transition: left 300ms linear;
}

.app-menu-open .app-menu {
  left: 0px;
  transition: left 300ms linear;
}

ahhh! Wir verursachen hier ein Problem, indem wir layout div Klassen hinzufügen. Dies zwingt den Browser, unseren Stilbaum zu regenerieren - was sich auf die Rendernleistung auswirkt.

Lösung von Buttery Glatt bei 60 Bildern pro Sekunde

Was ist, wenn wir das Menü außerhalb des Ansichtsfensterbereichs erstellen? Wenn Sie das Menü in den Quarantänebereich einstellen, wird sichergestellt, dass wir nur die Elemente beeinflussen, die wir animieren möchten. Daher empfehlen wir die folgende HTML -Struktur:

.app-menu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: transform 300ms linear;
}
.app-menu-open .app-menu {
  -webkit-transform: none;
  transform: none;
  transition: transform 300ms linear;
}

Jetzt müssen wir den Status des Menüs auf etwas andere Weise steuern. Wir werden die transitionend -Funktion in JavaScript verwenden, um Animationen in Klassen zu manipulieren, die am Ende der Animation gelöscht werden.

.app-menu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: transform 300ms linear;
  will-change: transform;
}

Lassen Sie uns alles zusammenfügen und die Ergebnisse überprüfen. Hier ist ein vollständiges CSS3 -fähiges Beispiel: Alles ist am richtigen Ort:

function toggleClassMenu() {
  var layout = document.querySelector(".layout");
  if(!layout.classList.contains("app-menu-open")) {
    layout.classList.add("app-menu-open");
  } else {
    layout.classList.remove("app-menu-open");
  }
}
var oppMenu = document.querySelector(".menu-icon");
oppMenu.addEventListener("click", toggleClassMenu, false);

Was zeigt uns die Timeline?

Es sind alles grüne Streifen, Baby. Möchten Sie ein praktisches Beispiel sehen? Klicken Sie hier. (Der tatsächliche Link sollte hier eingefügt werden)

(Der FAQ -Abschnitt zur mobilen Animation sollte hier hinzugefügt werden. Der Inhalt steht im Einklang mit dem FAQ -Abschnitt im Originaldokument)

Das obige ist der detaillierte Inhalt vonMobile Animationen mit CSS3 erreichen 60 fps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!