Jeder Frame perfekt

• Die UI ist fast die einzige Oberfläche, über die Nutzer die Qualität einer App beurteilen, und Vertrauen entsteht nur, wenn der Zustand des Bildschirms in jedem beliebigen Moment, in dem man einen Screenshot macht, sinnvoll wirkt
• Eine hochwertig ausgearbeitete UI signalisiert, dass Entwickler Zeit ins Feintuning investiert haben, und dient als plausible Heuristik dafür, dass auch die Codequalität ähnlich sorgfältig ausgearbeitet wurde
• Der eigentliche Maßstab ist, weißes Flackern zwischen Bildschirmen, teilweises Laden, Neu-Anordnungen während des Ladens, widersprüchliche Statustexte und ungenaue Animationen zu beseitigen
• Selbst wenn Anfangs- und Endzustand gut sind, erzeugen fehlerhafte Zwischenframes den Eindruck, dass Komponenten nicht synchronisiert sind, und können wie im Photos-Beispiel sogar ein falsches Gefühl vermitteln, obwohl sich tatsächlich nichts ändert
• Animationen sollten helfen, Übergänge zu verstehen, und nur wenn nicht nur Anfang und Ende, sondern auch alle Frames dazwischen kontrolliert werden, wirkt die UI wie ein präzises Werkzeug

---

Kernprinzipien

• Das explizite Ziel von Wayland, „every frame is perfect“, ist ein technisches Ziel, um in der Komplexität moderner GPU-Stacks die Kontrolle zurückzugewinnen
• Dasselbe Prinzip gilt auch für UIs: Egal in welchem Moment man von einer App einen Screenshot macht, der Bildschirm sollte natürlich und konsistent wirken
• Nutzer können den Code nicht sehen, daher ist die UI die einzige Oberfläche, über die sie die Qualität einer App beurteilen
• Wenn eine UI sauber ausgearbeitet ist, signalisiert das, dass Entwickler Zeit in die Politur investiert haben, was zur Annahme führt, dass auch der Code ähnlich sorgfältig ausgearbeitet wurde

Konkrete Maßstäbe und Beispiele

• Für perfekte Frames darf es kein weißes Flackern zwischen Bildschirmen geben, keine teilweise geladenen Inhalte und keine Layout-Verschiebungen während des Ladens
• Der interne Zustand der UI muss konsistent sein: Wenn ein Teil „1 update available“ sagt, darf ein anderer nicht „Checking for updates...“ anzeigen
• Animationen werden oft vergessen; selbst wenn Start- und Endzustand gut sind, werden Screenshots aus der Mitte zu Frames, die keinen Sinn ergeben, wenn der Übergang dazwischen unnatürlich ist
• Im Safari-Beispiel bewegt sich der Platzhaltertext aus der Mitte, während der Cursor von einer linken Position aus animiert wird, wodurch die beiden Komponenten unsynchronisiert wirken
• Im Photos-Beispiel springt das Foto beim Wechsel zwischen Crop- und Adjust-Modus sofort an seine Stelle, während der Crop-Rahmen animiert wird, was während des Moduswechsels das falsche Gefühl erzeugt, dass sich subtil etwas verändert
• Im Such-UI-Beispiel erschwert die Animation, die eigentlich beim Verständnis des Übergangs helfen sollte, stattdessen das Verfolgen der Bewegung der Lupe
• Im Youtube-Beispiel entsteht selbst bei der einfachen Aufgabe, ein Rechteck von einer Position an eine andere zu bewegen, eine seltsame Bewegung, und unabhängig vom Grund ist das Ergebnis ein nicht perfekter Frame
• Selbst mit der Zoom-Animation der Preview-App bleibt der Kernpunkt derselbe: Nicht nur Anfangs- und Endzustände, sondern auch jeder Moment dazwischen verdient Aufmerksamkeit

[GN⁺]

Hacker-News-Kommentare

• Es stimmt zwar, dass einige der vom Autor gezeigten Beispiele schlechte Animationen sind, aber der Grundannahme des Artikels kann ich nur schwer zustimmen.
  Computergrafik ist ein Feld, das die Eigenschaften des menschlichen visuellen Systems ausnutzt, und Bewegung wird anders wahrgenommen als Stillstand. Ein für sich betrachtet „falscher“ Frame kann im tatsächlichen zeitlichen Ablauf sogar am besten aussehen.
  Als Filmvergleich: Bei schnellen Tracking-Shots können einzelne Frames wegen Motion Blur schlecht aussehen, und Weitwinkelaufnahmen können wegen Verzerrung Objekte „falsch“ erscheinen lassen. Wenn sie im Kino aber den beabsichtigten künstlerischen Effekt erzielen, dann ist das die richtige Wahl.

  • Zuerst dachte ich, „Every Frame Perfect“ bedeute, Ruckler oder Stottern in der Bewegung strikt zu vermeiden, und dem würde ich voll zustimmen. Aber aus Sicht von Film, Video und 3D-Technik sind zeitliche Artefakte wie Motion Blur nicht nur das, was für das menschliche visuelle System am „richtigsten“ aussieht, sondern auch am leichtesten zu interpretieren ist.
    Wenn man Bewegung mit dem richtigen Blur versieht, wirkt sie schärfer, obwohl sie in einem Standbild natürlich nicht schärfer aussieht. Der Punkt ist, dass korrektes Motion Blur sicherstellt, dass es nur so scharf wirkt wie die bewegten Details, die Menschen bei dieser Geschwindigkeit überhaupt wahrnehmen können. Deshalb ist es falsch, einen eingefrorenen Motion-Blur-Frame nach Schärfe oder Interpretierbarkeit zu bewerten.
    Der Rest des Artikels konzentriert sich zwar auf Implementierungsdetails, verpasst aber die Gelegenheit zu fragen, ob einige dieser Animationen überhaupt existieren sollten. Bewegung kann, sparsam eingesetzt, eine gute Affordance sein, wird inzwischen aber oft so übertrieben, dass sie in das Sichtfeld der Nutzer und ihre kognitive Last eingreift. Designer und PMs sehen darin ein Zeichen von „raffinierter moderner UX“, aber in Wirklichkeit ist vieles davon zu modischer Dekoration verkommen, die gutes Design nur nachahmt, statt es zu sein.
  • Der Artikel hätte seine Argumentation wohl stärker gemacht, wenn er auch gute Anwendungsfälle gezeigt hätte. Trotzdem stimme ich zu, dass eher das Gesamtgefühl des Übergangs wichtig ist als jeder einzelne Frame.
    Einige der gezeigten Animationen lassen sich eindeutig verbessern. Für solche kleinen Freuden scheint mir AI ziemlich gut geeignet zu sein, weil das früher oft zu niedrig priorisiert war, um Zeit dafür aufzuwenden.
  • Diese Analogie geht mir einen Schritt zu weit. Anders als im Film zeichnet UI nicht die Realität auf, sondern jedes Pixel auf dem Bildschirm ist das Ergebnis dessen, was wir platziert haben; die passendere Analogie wäre also eher ein Cartoon. Zwischenbilder in Cartoons sind keine unvollkommenen Frames, sondern tatsächlich sorgfältig gemachte, hochwertige Frames.
    Es ist ein Unterschied, ob ein Zwischenframe in einer Animation etwas „seltsam“ aussieht, aber logisch korrekt ist, oder ob ein Zwischenzustand tatsächlich keinen Sinn ergibt und einfach das Resultat davon ist, dass niemand darauf geachtet hat, was während der Animation passiert. Wenn Letzteres der Fall ist, wäre es meiner Meinung nach besser, die Animation ganz wegzulassen oder zu vereinfachen.
  • Die letzte Preview-App-Zoom-Animation zeigt auch ein Gegenbeispiel. Dort ist jeder einzelne Frame isoliert betrachtet perfekt, aber das Problem wird erst sichtbar, wenn man die Bewegung als Ganzes sieht.
  • Die Vorstellung, dass Animationen immer konsistent sein müssten, wenn man sie Frame für Frame zerlegt, überzeugt mich nicht besonders. So sehen Nutzer sie in der Praxis nicht.
    Die Sichtweise des Artikels, UI-Politur als Stellvertreter-Metrik für Softwarequalität zu betrachten, finde ich gut, und auch das Benennen schlechter Animationen ist berechtigt. Nur ist Frame-Konsistenz nicht das beste Kriterium dafür, ob eine Animation „gut“ ist.

• Auf einigen Geräten läuft noch Sonoma, und man kann nur sagen, dass es kontinuierlich rückläufig wird.
  Der Speicherdialog wackelt zwar ein wenig, ist aber nicht so chaotisch wie im Beispiel. Die Buttons in Notes bewegen sich vollkommen geschmeidig zwischen den Panels. Wenn man die Safari-Leiste wiederholt fokussiert und den Fokus wieder entfernt, bricht die Animation manchmal, aber der Cursor ist exakt mit dem Text synchronisiert, und der Text blendet erst ein, nachdem seine Bewegung nach links abgeschlossen ist. Der Preview-Bug scheint auch ein neueres Problem zu sein; ich kann ihn nicht reproduzieren.
  https://streamable.com/kx7op6
  Ich vermisse die Zeiten, in denen Firmen wie Apple, Sony und IBM auf winzige Details geachtet haben. Gerade Apple hat seinen heutigen Wert durch das iPhone bekommen, und verglichen mit damaligen Windows-Mobile- oder Symbian-PDAs hat es funktional nichts besonders Großartiges getan, in mancher Hinsicht war es sogar unterlegen, aber es war ein All-Touch-Gerät, das man nicht schon nach ein paar Minuten gegen die Wand werfen wollte. Diese Animationen heute wecken exakt wieder das Gefühl von Windows Mobile und Symbian.
  Ich erinnere mich daran, wie sehr Steve die OS-X-Animationen mochte. Auf der Bühne hat er sie oft mehrfach gezeigt und in Zeitlupe nochmals abgespielt. Die heutigen wären auf einem Niveau, bei dem es nicht überraschen würde, wenn die Verantwortlichen dasselbe Schicksal erleiden wie die Person, die für die iPhone-4-Antenne zuständig war.

  • Die Animationen im kurzen Video sehen tatsächlich geordneter und weniger chaotisch aus. Vielleicht hat Apple in Sonoma noch AppKit verwendet und inzwischen auf SwiftUI umgestellt.

• Eine UI ohne solche unvollkommenen Frames würde sich wahrscheinlich besser anfühlen, aber inzwischen hätte ich gern, dass jemand die einzelnen Clips überarbeitet und zeigt, wie es tatsächlich aussehen würde.
  Gleichzeitig frage ich mich, warum überhaupt alles Bewegung braucht. Soweit ich es verstehe, sollte Bewegung eingesetzt werden, wenn sich die UI subtil in einem anderen Bereich verändert als dort, wo der Nutzer die Aktion ausgelöst hat, ähnlich wie bei Toasts.
  Viele der hier gezeigten Übergänge wirken unnötig, und es würde wahrscheinlich völlig gut funktionieren, wenn sich die Dinge sofort änderten und eine unmittelbare Neuordnung stattfände.

  • Der „unvollkommene Frame“ in der Safari-Suchleiste ist praktisch gesehen völlig in Ordnung, und eine Variante, die in Screenshots besser aussieht, könnte sogar schlechter sein.
    Der Cursor erscheint links, weil der Nutzer dort tatsächlich mit dem Tippen beginnt. Wer mit der UI vertraut ist, wird wahrscheinlich genau dorthin schauen. Den Cursor erst in der Mitte erscheinen zu lassen und ihn dann zu verschieben wäre unnötig und ablenkend.
    Dass der Platzhaltertext nach links gleitet, dient dazu, die Aufmerksamkeit unerfahrener Nutzer zu lenken.
  • Ein Spielautomat muss immer irgendetwas in Bewegung halten, und übermäßig dynamische Apple-Animationen erfüllen dieselbe Funktion. Gewöhnliche UI-Animationen helfen normalen Nutzern, denen plötzliche Änderungen auf dem Bildschirm schwerfallen, und sie helfen auch dabei, Frameraten glatter wirken zu lassen oder Verzögerungen bei API-Aufrufen und Backend-Verarbeitung zu verbergen.
  • Wenn man ein Spiel mit guter UI spielt, sieht man, dass Animationen überall eingesetzt werden. Sofortige Übergänge sind nur in der Theorie gut.
  • Nicht alles braucht Bewegung. Das meiste braucht sie nicht. Solche Scheinarbeit schafft ein paar Jobs und gibt ein paar Leuten einen Vorwand, damit anzugeben, dass die Designsprache von $BRAND überlegen sei.
    Die meisten Beispiele würden sich wahrscheinlich ohne Animation besser anfühlen. Wenn ich einen Button gedrückt habe, will ich einfach das Ergebnis sehen. Es soll nicht erst tanzen und es mir dann zeigen, sondern es einfach zeigen.
  • Für die Wiederherstellung der Orientierung nach einem Übergang ist Bewegung wichtig.
    Ohne Bewegung muss das Gehirn bei jeder Aktualisierung oft die ganze Seite erneut abscannen.

• Ich finde, die Argumentation dieses Textes ist schwach vorgebracht. Es gibt keine bessere Alternative, und es wird auch nicht wirklich erklärt, warum das Vorgeschlagene für Nutzer negativ ist. Es mag negativ sein, aber es ähnelt einer hohlen Art der Kritik, die auf Smear Frames in Medien oder auf Übergangsmomente zeigt.
  Auch der Maßstab „Jeder einzelne Frame muss sinnvoll sein“ ist kaum zu bewältigen. Ich halte das für unmöglich und würde gern fragen, wie man während einer Größenänderung des Fensters jeden einzelnen Frame perfekt erhalten soll
  Sogar für den Autor selbst scheint es leichter zu sein, fehlerhafte Frames aufzuzeigen, als den eigenen Maßstab umzusetzen. Wenn man auf den Header-Link des Blogs klickt, läuft die Animation erst nach Abschluss des Klicks ab. Schaut man sich die UI-Projekte des Autors an, gibt es auch Stellen, an denen Text und Objekte nicht innerhalb des Containers bleiben. Wenn man sagt, man solle solchen Prinzipien folgen, sollte man es auch selbst zeigen können
  Ein besser geschriebener Text hätte sich darauf konzentriert, warum das Vorgestellte für Endnutzer schlecht ist und wie man stattdessen damit umgehen sollte. Gute Kritik sollte nicht nur das Was, sondern auch Warum und Wie enthalten

  • Diese Kritik wirkt ihrerseits hier am hohlsten.
    Der Text präsentiert keine Lösung, sondern eine Idee. Wer das nicht sieht, kritisiert mit mehreren Strohmann-Argumenten
    Wichtiger ist, dass der Text nicht apodiktisch geschrieben ist. Er ist vorsichtig formuliert, mit Wendungen wie „I think“, „Next thought:“, „Probably“ und „So yeah.“. In diesem Text teilt eine Person ihre Gedanken, und diese Gedanken sind durchaus weit genug ausgearbeitet, dass mehrere vernünftige Menschen in eine ähnliche Richtung denken könnten
    Nur weil der Autor keine Lösung präsentiert hat, heißt das nicht, dass er das zwingend müsste. So ein Maßstab ist seltsam und unvernünftig
    Auch den Webauftritt des Autors anzugreifen, wirkt nicht besonders gut. Geschmacksunterschiede sind wohlbekannt, und jemanden dafür zu bestrafen, dass ein konzeptioneller Beitrag seiner praktischen Technik vorausgeht, ist ziemlich unerquicklich
    Eine bessere Kritik wäre dem Geist dieser Community entsprechend großzügiger gewesen

• Ich habe einige Reaktionen gesehen, die meinten, der Autor hätte gern Beispiele für Lösungen einbauen sollen. Er hat vor Kurzem einen sehr ähnlichen Text geschrieben und dort wie hier die Probleme von Animationen ausführlich behandelt und anschließend erklärt, wie er sie verbessert hat
  Falls es jemanden interessiert, hier kann man das sehen: https://www.thisischris.dev/projects/project-6/

  • In mobilem Chrome auf Android scheinen die Animationen nicht zu funktionieren

• Ich halte unvollkommene Frames jetzt für besser als perfekte Frames später. In jeder UI sollte Latenz oberste Priorität haben. Wenn die Latenz niedrig genug ist, fühlt es sich wie ein Teil des eigenen Körpers an und die kognitive Last sinkt. Animationen sind hier besonders schlecht, weil sie Hunderte Millisekunden an Verzögerung hinzufügen

  • Ich halte das für eine falsche Dichotomie. Die vom Autor genannten Beispiele würden auch bei korrekter Implementierung überhaupt nicht langsamer sein
  • Man hätte denken können, der Titel handle von Wayland, und dieser Gedanke wäre nicht falsch gewesen. Aber hier geht es nicht um Wayland

• Ich fände es gut, wenn es neben den negativen Beispielen auch positive Beispiele gäbe. Im Moment nehme ich daraus nur mit, dass man Animationen vermeiden sollte, aber das ist wahrscheinlich nicht die eigentliche Aussage des Autors

  • Die Schlussfolgerung „Man sollte Animationen vermeiden“ ist keine ganz schlechte Lehre. Im Allgemeinen sollte man Animation um der Animation willen vermeiden. Man kann sich zum Beispiel vorstellen, dass auf einer Handy-Tastatur bei jedem getippten Buchstaben das Zeichen in das Texteingabefeld hinauffliegt

• Gute Animationen sehen nicht unbedingt in jedem einzelnen Frame perfekt aus; nicht selten tricksen sie während der Bewegung ein wenig. Wie bei Smear Frames in Cartoons: Wenn man sie im falschen Moment anhält, wirken sie seltsam, aber innerhalb der Gesamtanimation machen sie die Bewegung visuell überzeugend

  • Smear Frames sind keine Technik, die häufig auf Animationen dieser Art angewendet wird. Sie sind fast ganz auf framebasierte Animation spezialisiert, und in diesem Text kommen keine Smear Frames vor
  • Der Unterschied ist, dass Blur-Frames absichtlich für den Gesamteffekt eingesetzt werden. Die hier gezeigten Animationen sind eher unbeabsichtigtes Ruckeln, das eine unausgereifte App offenlegt
  • Ich finde diese Analogie unpassend. Blur-Frames sehen in Bewegung gut aus, aber die Frames im Blogpost sehen selbst in Bewegung schrecklich aus. Das erste Beispiel war so schlecht, dass ich beim ersten Ansehen dachte, oben würden drei Buttons übrig bleiben, und als mir klar wurde, dass es am Ende nur zwei sind, fühlte es sich seltsam und desorientierend an
  • Auf macOS hatte ich das Gefühl, dass sich die visuelle Qualität und die Qualität der Animationen stark verändert haben, als Apple anfing, SwiftUI für das OS und die Apps zu verwenden
    Ich bin kein Entwickler, aber ich hatte den Eindruck, dass es Bereiche gab, in denen Icons oder Fenster nicht mehr so platziert oder bewegt wurden wie früher oder wie es eigentlich selbstverständlich sein sollte
    Dieses Gefühl von Flickwerk hat sich auch mit der Zeit nicht verändert. Es gibt im gesamten OS und in den Apps genug Beispiele, dass man fast sagen möchte: „So war es schon immer“, aber das stimmt eben nicht. Apple hat Maßstäbe gesetzt, und diese Maßstäbe waren hoch, die Qualität war hervorragend
    Es fühlt sich an, als wären viele Hacks nötig, um mit SwiftUI dieselbe Platzierung oder Animation von UI-Elementen zu erreichen
    Und zuletzt denke ich oft daran, dass analoges Schaffen wirklich schwer war und es noch immer ist. Im Digitalen hat man immer gedacht, man könne später noch einmal daran arbeiten, aber in Wirklichkeit passiert das oft nicht, und stattdessen stapelt man Schlechtes auf noch Schlechteres, was ich bedauerlich finde
  • Overwatch ist ein ziemlich gutes modernes Beispiel [1]. Es hat sehr flüssige Animationen, aber wenn man die Frames anhält, sehen sie wirklich seltsam aus
    [1]: https://youtu.be/vIdeGmN__Pw?t=550

• Eine App ganz ohne Animationen würde sich furchtbar anfühlen. Wenn man ein Android-Gerät hat, kann man das selbst ausprobieren, indem man in den Entwickleroptionen die Animationsgeschwindigkeit auf 0x stellt. Die unmittelbare Veränderung wirkt störend, und das Gehirn braucht eher etwa eine Sekunde, um zu verarbeiten, was passiert ist — dieser Prozess kann sogar langsamer sein als mit Animationen
  Bei mir steht es auf 0.5x, und das fühlt sich ausreichend an. Es ist immer noch schnell, aber man kann weiterhin sehen, wie Apps geöffnet und geschlossen werden

  • Ich habe Animationen auf Android deaktiviert und nutze es zufrieden so. Das ist die einzige Möglichkeit, wie es sich überhaupt „unmittelbar“ anfühlt. Im Kontext von Eingabe und darauf folgender UI-Veränderung ist Latenz meiner Meinung nach immer schlimmer als das Fehlen eines schicken Übergangszustands
  • Für mich nicht. Ich schalte Animationen immer aus. Das ist völlig in Ordnung, und ich kann das Telefon viel schneller bedienen, weil ich nicht warten muss, bis eine Animation zu Ende ist
  • Ich nutze auch 0.5x
    Das Problem mit 0x ist, dass es anscheinend nur auf etwa 90 % der UI angewendet wird. Manche Dinge haben weiterhin Animationen, und dadurch fühlt sich das Timing sehr seltsam an
    Bei 0.5x stören die Dinge weniger, die seltsamerweise nicht richtig von der Einstellung der Animationsgeschwindigkeit beeinflusst werden
    Wenn es korrekt funktionieren würde, würde ich 0x verwenden
  • Ich habe fast 10 Jahre lang Android genutzt und bin dann, als das iPhone 12 Mini neu war, darauf umgestiegen. Ich vermisse immer noch, dass man dort wie bei Android Animationen abschalten kann. Ich bin mir zu 110 % sicher, dass mein aktuelles Telefon 200 % schneller wäre, wenn ich einfach alle Animationen deaktivieren könnte, die nur um ihrer selbst willen existieren
    Wenn nötig, warte ich lieber eine Sekunde auf die Verarbeitung, und ich glaube nicht einmal, dass das wirklich nötig ist. Das ist immer noch viel besser, als dass Apps bei jedem Seitenwechsel wegen Animationen eine Sekunde langsamer werden und sich beim Navigieren alles wie zäher Sirup anfühlt
  • Alle Animationen sind nur vergeudete Zeit, in der man nicht richtig mit der UI interagieren kann, also ist es viel besser, sie komplett abzuschalten

• Ich konnte den Gedanken des Artikels nachvollziehen, aber ich hätte mir auch positive Beispiele gewünscht. Der Ton las sich für mich nicht wie bloßes Gemecker, aber als jemand, der nicht viel über gutes UI-Design weiß, hatte ich danach nicht das Gefühl, dem Nordstern dessen, woran man sich orientieren sollte, näher gekommen zu sein

  • Ich habe kürzlich genau über so etwas geschrieben. Zuerst gehe ich ausführlich auf ähnliche Unzulänglichkeiten ein, die diesem Artikel konzeptionell ähneln, und erkläre dann den Verbesserungsprozess, den ich selbst umgesetzt habe
    Falls es dich interessiert, kannst du es hier lesen: https://www.thisischris.dev/projects/project-6/
  • Oder der Autor hätte zu jedem schlechten Beispiel ein Mockup zeigen können, wie es bei korrekter Umsetzung hätte aussehen sollen

[GN⁺]

Lobste.rs-Kommentare

• Ich halte die Grundannahme dieses Artikels für falsch. Solche Apps benutzt man nicht Frame für Frame.
  Schon in einem grundlegenden Animationskurs lernt man, dass Bewegung anders wahrgenommen wird als Standbilder. Wenn man nach einer „squash and stretch“-Demo sucht, sieht man, dass die Abmessungen eines Objekts in einzelnen Frames für sich betrachtet völlig absurd wirken können, in der Bewegung aber wunderbar funktionieren.

  • Die Beispiele im Artikel sehen auch in Bewegung nicht schön aus.
  • Der Punkt ist nicht, dass die Animation hässlich ist, sondern dass hier ein Zeitraum geschaffen wurde, in dem eine benutzbare UI durch eine nicht funktionsfähige Animationssequenz ersetzt wird.
    Im Fall des Zuschneide-Beispiels kann dabei sogar der Programmzustand falsch dargestellt werden. Der Nutzer muss sein Gehirn für etwa ein Drittel einer Sekunde abschalten und warten, bis sich die UI wieder zusammensetzt, bevor er das Programm weiter benutzen kann.

• Ich denke überhaupt nicht, dass Frame-Perfektion im Sinne des Wayland-Projekts das hier bedeutet.
  Gemeint sind eher technische Details auf niedrigerer Ebene, etwa bei der Größenänderung von Fenstern. Zum Beispiel, dass Inhalte asynchron skaliert werden, dass Vertical Sync ausfällt und dadurch Tearing oder seltsame diagonale Artefakte entstehen, oder dass das Reporting beschädigter Bereiche als rechteckige Teilbereiche erfolgt.
  Natürlich wäre es schön, wenn sowohl Details auf niedriger Ebene als auch Animationen auf höherer Ebene beide framegenau perfekt wären.

  • Stimme zu. Und ich glaube, der Autor sieht das genauso.

    Wayland is talking about the technical side of things (modern GPU stacks are very complex and Wayland is trying to take control back) but it could be applied to UI too.

• Nehmen wir an, man möchte solche Animationen testen und Tests schreiben, die sicherstellen, dass diese Eigenschaften nicht mit der Zeit kaputtgehen.
  Was sind heute bei Web-Apps und nativen Apps die modernsten Verfahren, um solche Eigenschaften zu testen? Gibt es Kategorien von Tests, die praktisch unmöglich oder sehr schwer zu schreiben sind, weil man die Event Loop nicht kontrollieren kann?

  • Ich kann nur für native Android-Apps sprechen. Mit dem UI-Toolkit Jetpack Compose kann man die Uhr selbst steuern, die die UI antreibt, und so an jedem beliebigen Punkt eines Übergangs statische Screenshot-Tests aufnehmen.
    Oder man kann mit Tools wie Paparazzi den gesamten Übergang als Animated PNG aufzeichnen und automatische Regressionstests dafür ausführen.
  • Im Idealfall sollten Größeninformationen offengelegt werden, eine allgemeine Layout-Engine sollte unabhängig testbar sein, und auch Animationen sollten getrennt sein.
    Dann kann man beide Stellen jeweils separat prüfen und am Ende nur noch den Endzustand verifizieren. Animationen sollten nicht starr an Zeiteingaben gebunden sein, sondern sich von außen schrittweise antreiben lassen.

• Ich denke, das YouTube-Beispiel trifft ziemlich genau auf View Transitions zu.
  Man deklariert dabei gewissermaßen: „Wenn sich dieses Element ändert, verwandle es automatisch.“ Das Ergebnis ist technisch beeindruckend, wirkt aber auch etwas wabbelig: Elemente schweben herum und morphen ineinander.
  Das ist eine sehr coole Technik, aber abgesehen von kleinen Hervorhebungseffekten bei der Navigation habe ich sie nur selten wirklich gelungen gesehen. Man muss sie sehr sparsam einsetzen, damit sie nicht zu ablenkend wird.