Wie kann die Verzögerung beim Starten von CSS Animationen / Übergängen in Android WebView verringert werden?

8

Ich versuche, CSS3-Animationen in Android WebView zu verwenden, aber ich bekomme eine sehr nervige Verzögerung beim Starten der Animation (ungefähr 500ms).

Die Animation läuft flüssig, ohne Verzögerung, aber sie hat die Verzögerung beim Start. Da es keine Verzögerung gibt, nehme ich an, dass dies kein Leistungsproblem ist. Oder könnte es sein?

Es ist nicht die Standardeinstellung von 300 ms onclick delay, ich habe mich bereits in ontouchstart geändert und wenn ich etwas anderes als Animationen / Übergänge mache, gibt es keine Verzögerung. Nur mit diesen beiden.

Es ist auch nicht die Animation-Delay-Eigenschaft, ich habe es bereits auf 0 gesetzt.

Jede mögliche Erklärung / Lösung?

PS: Die Animation / Transition, die ich ausführen möchte, ist mit transform: translateX() property. Vorher habe ich versucht mit left: Xpx , aber es war während der Animation hinken. Bei der Transformation gibt es keine Verzögerung, aber es gibt die Verzögerung.

    
Pedro Barros 27.03.2013, 12:11
quelle

3 Antworten

4

Ich hatte das gleiche Problem und konnte keine vernünftige Lösung finden. Ich habe verschiedene Ansätze ausprobiert und das sind meine Schlussfolgerungen:

  • Animation länger macht es glatter aussehen, aber nicht die Verzögerung am Anfang reduzieren
  • Wenn die Hardwarebeschleunigung ausgeschaltet wird, wird die Animation schneller (die Verzögerung wird ebenfalls reduziert), aber einige Frames werden gelöscht und die Animation ist nicht mehr glatt.
  • Ändern aller translate3d in translateX / translateY / translateZ - kein visueller Unterschied
  • Das Ändern der Animation in mehrere Übergänge, die über JavaScript gesteuert werden ( transitionEnd event), macht es langsamer mit mehreren Schluckauf auf dem Weg (jedes Mal, wenn transitionEnd ausgelöst wird).

Meine Vermutung ist, dass CSS-Animationen auf Android nur langsam sind und einige Vorberechnungen erfordern, um sie anzuzeigen; daher die Verzögerung am Anfang. Wir müssen wahrscheinlich warten, bis Chrome zum Standardbrowser für Android wurde.

    
Konrad Dzwinel 17.06.2013 07:35
quelle
0

Ich bin mir nicht sicher, ob es mit der Verzögerung helfen würde, aber vielleicht sollten Sie translate3d(x,0,0) anstelle von translateX verwenden, da die 3D-Umwandlung auf Hardware ausgeführt wird.

Ich kann den Verweis dafür jetzt nicht finden, aber ich erinnere mich, einen Artikel darüber auf der Google Android HTML-Entwicklerseite gelesen zu haben.

    
Itai Bar-Haim 16.05.2013 18:51
quelle
0

Ich hatte dieselben Probleme mit dem Aktien-Browser. Es stellt sich heraus, dass Sie dies zu dem Block hinzufügen können, den Sie animieren:

%Vor%

Dies sollte die Animationen glätten, so dass sie früher starten und auch ein Flimmern vor und nach der Animation entfernen.

    
Chris Bishop 29.08.2014 00:55
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Falsches SSL-Zertifikat wird für eine Azure-Website zurückgegeben