Meta tags:
description= JavaScript-Animationen mit requestAnimationFrame, Easing-Funktionen, Verkettung, der Web Animations API sowie Performance- und Barrierefreiheitstipps lernen.;
Headings (most frequently used words):
animationen, javascript, in, für, verwenden, einführung, grundkonzepte, von, einfaches, animationsbeispiel, fortgeschrittene, techniken, die, web, animations, api, stoppen, und, umkehren, barrierefreiheit, reduzierte, bewegung, respektieren, performance, optimierung, fazit, übungen, warum, requestanimationframe, vs, setinterval, easing, funktionen, verketten, mehrere, eigenschaften, animieren,
Text of the page (most frequently used words):
und (94), die (57), #animationen (55), sie (48), javascript (43), requestanimationframe (29), von (26), api (25), html (24), dom (24), square (24), der (23), das (22), animation (22), style (19), css (18), mit (18), auf (17), lernen (16), für (15), web (15), let (14), ein (14), funktionen (13), oder (13), easing (12), transform (12), function (12), pos (12), methoden (10), des (10), frame (10), beispiel (10), kopieren (10), animate (10), body (10), script (10), div (10), head (10), position (10), color (10), animations (9), eigenschaften (9), wenn (9), wie (9), const (9), eine (9), loop (9), ist (9), document (9), nach (9), performance (8), techniken (8), werden (8), browser (8), events (8), wird (8), diese (8), den (8), verwenden (8), translatex (8), the (8), window (8), quadrat (8), progress (8), ypos (8), einführung (7), was (7), setinterval (7), elemente (7), als (7), können (7), auch (7), dem (7), einen (7), timestamp (7), background (7), tools (6), selbst (6), rechts (6), bewegt (6), funktion (6), w3docs (5), alle (5), probier (5), übungen (5), bewegung (5), verwendet (5), animieren (5), indem (5), erstellen (5), nicht (5), cancelanimationframe (5), opacity (5), object (5), duration (5), box (5), getelementbyid (5), top (5), left (5), absolute (5), height (5), width (5), doctype (5), sich (5), innerwidth (5), verketten (5), moveright (5), xpos (5), string (5), formatter (5), json (4), generator (4), optimierung (4), stoppen (4), easeoutquad (4), settimeout (4), visuelle (4), führt (4), kann (4), sowohl (4), aus (4), bevor (4), rafid (4), bis (4), frames (4), sind (4), keyframes (4), ihnen (4), objekt (4), dieses (4), quadrats (4), math (4), effekte (4), erreicht (4), movedown (4), start (4), move (4), callback (4), shadow (4), fetch (4), async (4), über (3), code (3), encoder (3), editor (3), quizze (3), php (3), barrierefreiheit (3), umkehren (3), fortgeschrittene (3), this (3), page (3), components (3), manipulieren (3), auslösen (3), timer (3), oft (3), verstehen (3), ohne (3), layout (3), styles (3), vermeiden (3), bevorzugen (3), synchronisiert (3), bildwiederholrate (3), flüssige (3), ihre (3), else (3), bewegungen (3), bei (3), bieten (3), reverse (3), element (3), müssen (3), schreiben (3), 2000 (3), kontrolle (3), farbe (3), basierend (3), demonstriert (3), mehrere (3), changecolor (3), green (3), red (3), komplexere (3), erzeugen (3), hier (3), unten (3), rand (3), durch (3), zeit (3), fortschritt (3), aktualisiert (3), dynamische (3), flag (3), data (3), objekte (3), event (3), and (3), promise (3), operatoren (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), bücher (2), beispiele (2), snippets (2), fazit (2), reduzierte (2), respektieren (2), einfaches (2), animationsbeispiel (2), grundkonzepte (2), welche (2), häufig (2), auswählen (2), reaktion (2), benutzerinteraktionen (2), warum (2), deklarative (2), beherrschung (2), grundlegender (2), diesem (2), leitfaden (2), folgen (2), benutzererfahrung (2), verbessern (2), ihren (2), regel (2), siehe (2), info (2), lesen (2), dies (2), berechnen (2), mehr (2), speichern (2), animationid (2), later (2), gpu (2), updates (2), reflows (2), beschleunigung (2), methode (2), 300px (2), apply (2), prefersreducedmotion (2), matchmedia (2), zur (2), sollten (2), direkt (2), zum (2), endzustand (2), weiterhin (2), knoten (2), jedem (2), pause (2), visuals (2), weiter (2), waapi (2), feste (2), abhängt (2), physik (2), argument (2), array (2), fill (2), console (2), gibt (2), hat (2), integrierte (2), möglichkeit (2), sodass (2), animiert (2), eines (2), während (2), links (2), attraktivität (2), return (2), 255 (2), floor (2), mehrerer (2), visuell (2), dann (2), fensters (2), reset (2), einfache (2), einer (2), natürlicher (2), elements (2), ende (2), millisekunden (2), easedprogress (2), elapsed (2), grundlegende (2), bildschirms (2), ruft (2), wir (2), einem (2), use (2), synced (2), repaint (2), tabs (2), screen (2), automatisch (2), tab (2), dieser (2), fps (2), konzepte (2), bietet (2), zurück (2), greifen (2), verändern (2), workers (2), file (2), suche (2), muster (2), quantoren (2), anker (2), flags (2), url (2), microtasks (2), formulare (2), benutzerdefinierte (2), ereignisse (2), klassen (2), arrays (2), generatoren (2), advanced (2), await (2), fehlerbehandlung (2), promises (2), chaining (2), error (2), erweitern (2), handling (2), class (2), prototypes (2), interaktive (2), property (2), arrow (2), new (2), syntax (2), variablen (2), functions (2), objects (2), hash (2), 2026, rechte, vorbehalten, entwickler, gemacht, sprache, datenschutzrichtlinie, kontakt, uns, unternehmen, üben, kostenlose, tutorials, seit, 2014, next, previous, yes, helpful, prüfen, animateelement, moveelement, übung, basierte, planung, bevorzugt, scheduling, performantere, alternative, weiterzugehen, erkunden, verwandten, themen, erfordert, prinzipien, implementierung, fortgeschrittener, ansprechende, reaktionsfähige, experimentieren, verschiedenen, verkettungen, eigenschaftsanimationen, volle, potenzial, webprojekten, entfalten, ausschließlich, besserer, keine, innerhalb, loops, zwingt, mitten, neu, ruckeln, führen, getboundingclientrect, offsetwidth, thrashing, benötigt, rufen, speicherlecks, ordnungsgemäß, begrenzen, häufigkeit, mithilfe, throttling, debouncing, scroll, resize, drosseln, beschleunigte, optimieren, bündeln, repaints, reduzieren, positionsänderungen, nutzen, manipulationen, minimieren, display, liefert, flüssigere, effiziente, gewährleisten, befolgen, optimierungstipps, einzelne, prüfung, macht, interfaces, inklusiver, angenehmer, benutzer, verzichten, möchten, skip, final, state, instantly, matches, prefers, reduced, motion, reduce, starke, schnelle, manchen, benutzern, übelkeit, schwindel, migräne, betriebssysteme, einstellung, reduzierung, berücksichtigen, deaktivieren, entweder, springen, brechen, laufende, immer, entfernen, andernfalls, mutiert, abgetrennten, verursacht, unnötigen, aufwand, lauten, entsprechungen, einfach, cancel, button, click, when, removed, update, läuft, aufhören, neue, planen, sofort, abzubrechen, zurückgibt, übergeben, zeitlinie, eigenschaftsänderungen, reservieren, manuellen, fälle, denen, jeder, live, eingaben, berechnetem, zustand, ziehen, werte, voraus, bekannt, erste, jeweils, zweite, setzt, verhaltensweisen, beibehalten, dieselben, schlüsselwortwerte, akzeptiert, mathematik, gar, hand, cubic, bezier, delay, direction, iterations, currenttime, 1000, done, log, then, finished, returned, gives, you, imperative, control, forwards, ease, out, teal, manuell, totale, aber, meisten, zeitlinienbasierten, bereits, engine, aufruf, abseits, haupt, threads, genau, wiedergabe, erhalten, zurückgegeben, pausieren, anspringen, abwarten, options, hintergrundfarbe, lila, wechselt, seine, rot, grün, berechnet, animationsfortschritt, erzeugt, dabei, gradienteneffekt, gleichzeitig, komplexität, hinzufügt, backgroundcolor, rgb, purple, gleichzeitige, ansprechendere, ändert, grünes, zunächst, sobald, rechten, explizit, zurückgesetzt, aufgerufen, sequentielle, ausführung, kombiniert, ordnungsgemäßem, zustandsmanagement, wiederholte, zyklen, zeigt, man, animationssequenzen, erstellt, for, repeated, cycles, translatey, innerheight, 0px, explicitly, before, downward, phase, ermöglicht, sequenziell, auszuführen, zuerst, verbessert, integration, namens, wirkende, geschwindigkeit, animierten, laufe, anpassen, fall, blaue, startet, schnell, verlangsamt, animationsdauer, eingestellt, eased, min, milliseconds, null, blue, lassen, wirken, animationsgeschwindigkeit, variieren, erwarten, typischerweise, normalisierten, fortschrittswert, zwischen, obwohl, häufige, erfordern, rotes, linken, seite, gewährleistet, displays, schrittweise, kontinuierlich, beginnen, einfachen, bildschirm, alles, drive, pauses, clearinterval, 200, fixed, not, runs, löst, beides, vor, nächsten, etwa, mal, pro, sekunde, passend, anzeige, pausiert, ausgeblendet, erhält, hochauflösendes, tatsächlich, vergangenen, anstatt, framerate, anzunehmen, existierte, wurden, angetrieben, paar, ausführten, ansatz, zwei, probleme, intervall, fehlenden, doppelten, feuert, hintergrund, cpu, akku, verschwendet, definieren, anfangs, end, zwischenzustand, bestimmen, dauer, verzögerung, timing, steuern, verlangsamung, verleihen, natürliche, rate, animationsframes, angezeigt, höherer, wert, flüssigeren, per, second, spezifische, eintauchen, wichtig, einige, zugrunde, liegen, einfachste, option, behandelt, ähnliche, imperativem, zugriff, vollständige, benötigen, daten, benutzergesten, logik, ausdrücken, mauszeiger, positionen, einrasten, viele, schritte, verzweigungsbedingungen, zustandsänderungen, hover, ausblenden, umschalten, optimiert, separaten, compositor, thread, tendenziell, performanteste, wahl, transition, faustregel, gilt, vergleich, flexibilität, ermöglichen, sequenzen, interaktionen, machen, möglich, hochgradig, individualisierte, dynamisch, gesteuert, notwendig, benutzereingaben, reagieren, anderen, funktionalitäten, integrieren, model, verschieben, skalieren, grundprinzipien, performant, ansprechend, webseiten, subtilen, effekten, hin, komplexen, interaktivität, ihrer, projekte, erheblich, steigern, umfassende, eingehende, erkundung, einschließlich, wesentlicher, praktischer, helfen, kompetent, ansprechender, verkettung, sowie, barrierefreiheitstipps, intl, vibration, notifications, audio, webrtc, geolocation, websockets, service, midi, storage, validation, fullscreen, history, orientation, push, webgl, battery, apis, regexp, sticky, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, name, erfassungsgruppen, gierige, faule, sets, ranges, escaping, sonderzeichen, wortgrenze, mehrzeiliger, modus, anfang, unicode, klasse, zeichenklassen, regex, regular, expressions, styling, slots, komposition, template, custom, indexeddb, localstorage, sessionstorage, cookies, cookie, storing, wiederaufnehmbarer, dateiupload, server, sent, xmlhttprequest, ursprungsübergreifende, anfragen, abbruch, download, formdata, network, requests, canvas, references, macrotasks, selection, range, resizeobserver, intersectionobserver, mutation, observer, various, ressourcen, laden, onload, onerror, scripts, defer, domcontentloaded, load, beforeunload, unload, resource, loading, ereignis, submit, clipboard, change, input, cut, copy, paste, fokussierung, focus, blur, formulareigenschaften, forms, controls, scrolling, tastatur, keydown, keyup, drag, drop, mausbewegungen, mausereignisse, grundlagen, standard, browseraktionen, delegation, bubbling, capturing, introduction, koordinaten, fenstergrößen, scrollen, dokument, attribute, knoteneigenschaften, typ, tag, inhalt, getelement, queryselector, browserumgebung, spezifikationen, streams, filereader, blob, textdecoder, textencoder, arraybuffer, binäre, binary, files, fensterübergreifende, kommunikation, popups, windows, polyfills, transpiler, bigint, currying, eval, proxy, reflect, miscellaneous, imports, export, import, module, modules, iteratoren, generators, iteration, promisification, callbacks, fehler, try, catch, mixins, checking, instanceof, eingebaute, private, geschützte, statische, klassenvererbung, grundsyntax, classes, prototyp, __proto__, native, prototypale, vererbung, inheritance, widgets, debugging, kompatibilität, manipulationsbibliotheken, manipulationstechniken, traversieren, arbeiten, getter, setter, deskriptoren, properties, configuration, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, call, nfe, globales, alte, var, scope, rest, parameter, spread, rekursion, stack, tojson, datum, uhrzeit, destructuring, assignment, keys, values, entries, weakmap, weakset, map, set, iterables, strings, zahlen, primitiven, types, optional, konstruktor, operator, primitiv, konvertierung, symbol, typen, garbage, collection, objektmethoden, basics, es6, funktionsausdrücke, schleifen, switch, bedingte, nullish, coalescing, logische, vergleichsoperatoren, typkonvertierungen, datentypen, strict, kommentare, basic, anmelden, durchsuchen, formatters, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, kurse,
Text of the page (random words):
ichen sets und ranges quantoren und n gierige und faule quantoren erfassungsgruppen rückwärtsreferenzen im muster n und k name javascript alternation or lookahead und lookbehind katastrophales backtracking sticky flag y suche an position methoden von regexp und string javascript apis web animations api file api battery api webgl push api screen orientation api history api console api fullscreen api validation api web storage api web midi api js web workers service workers websockets geolocation webrtc web audio api notifications api die vibration api js intl api javascript animationen javascript animationen mit requestanimationframe easing funktionen verkettung der web animations api sowie performance und barrierefreiheitstipps lernen javascript animationen bieten eine dynamische möglichkeit die benutzererfahrung auf webseiten zu verbessern von subtilen effekten bis hin zu komplexen bewegungen kann die beherrschung von javascript animationen die interaktivität und visuelle attraktivität ihrer projekte erheblich steigern dieser umfassende leitfaden bietet eine eingehende erkundung von javascript animationen einschließlich grundlegender konzepte wesentlicher techniken und praktischer beispiele die ihnen helfen kompetent im erstellen ansprechender animationen zu werden einführung in javascript animationen javascript animationen manipulieren dom elemente document object model um visuelle effekte zu erzeugen sie werden verwendet um elemente zu verschieben zu skalieren und zu verändern als reaktion auf benutzerinteraktionen oder automatisch über zeit wenn sie die grundprinzipien und techniken verstehen können sie animationen erstellen die sowohl performant als auch visuell ansprechend sind warum javascript für animationen verwenden javascript animationen bieten im vergleich zu css animationen mehr kontrolle und flexibilität sie ermöglichen komplexere sequenzen und interaktionen und machen es möglich hochgradig individualisierte effekte zu erstellen javascript animationen können dynamisch gesteuert werden und sind oft notwendig wenn sie auf benutzereingaben reagieren oder mit anderen javascript funktionalitäten integrieren müssen als faustregel gilt greifen sie auf css transition keyframes zurück für einfache deklarative zustandsänderungen wie hover effekte ein und ausblenden und umschalten der browser optimiert diese auf einem separaten compositor thread sodass sie tendenziell die performanteste wahl sind siehe css animationen greifen sie auf javascript zurück wenn die animation von daten benutzergesten physik oder logik abhängt die css nicht ausdrücken kann zum beispiel dem mauszeiger folgen auf dynamische positionen einrasten oder viele schritte mit verzweigungsbedingungen verketten für die einfachste javascript option bietet die integrierte web animations api weiter unten behandelt css ähnliche performance mit imperativem zugriff während requestanimationframe ihnen vollständige frame für frame kontrolle gibt wenn sie sie benötigen grundkonzepte von javascript animationen bevor sie in spezifische techniken eintauchen ist es wichtig einige grundlegende konzepte zu verstehen die javascript animationen zugrunde liegen frames per second fps die rate mit der animationsframes angezeigt werden ein höherer fps wert führt zu flüssigeren animationen easing funktionen diese funktionen steuern die beschleunigung und verlangsamung von animationen und verleihen ihnen natürliche bewegung timing funktionen bestimmen die dauer und verzögerung von animationen keyframes definieren den anfangs end und zwischenzustand einer animation requestanimationframe vs setinterval bevor requestanimationframe existierte wurden animationen durch setinterval und settimeout angetrieben die alle paar millisekunden einen callback ausführten dieser ansatz hat zwei probleme das intervall ist nicht mit der bildwiederholrate des bildschirms synchronisiert was zu fehlenden oder doppelten frames führt und der timer feuert weiterhin auch wenn der tab im hintergrund ist was cpu und akku verschwendet requestanimationframe callback löst beides der browser ruft ihren callback direkt vor dem nächsten repaint auf in der regel etwa 60 mal pro sekunde passend zur anzeige und pausiert automatisch wenn der tab ausgeblendet wird der callback erhält ein hochauflösendes timestamp argument mit dem sie den fortschritt basierend auf der tatsächlich vergangenen zeit berechnen anstatt eine feste framerate anzunehmen setinterval fixed timer not synced to the screen runs in background tabs let pos 0 const id setinterval pos 2 if pos 200 clearinterval id 16 requestanimationframe synced to repaint pauses in background tabs function frame timestamp use timestamp to drive the animation requestanimationframe frame requestanimationframe frame kopieren verwenden sie requestanimationframe für alles was die visuals in jedem frame aktualisiert einfaches javascript animationsbeispiel beginnen wir mit einem einfachen beispiel bei dem wir ein quadrat über den bildschirm animieren doctype html html head style square width 50 px height 50 px background color red position absolute left 0 top 50 px style head body div id square div script const square document getelementbyid square let pos 0 function move if pos window innerwidth 50 pos 2 square style transform translatex pos px requestanimationframe move move script body html kopieren probier es selbst dieses beispiel demonstriert eine grundlegende animation bei der ein rotes quadrat von der linken seite des bildschirms nach rechts bewegt wird die animation verwendet die funktion requestanimationframe die eine flüssige bewegung gewährleistet indem sie die animation mit der bildwiederholrate des displays synchronisiert die funktion move aktualisiert die position des quadrats schrittweise und ruft sich selbst kontinuierlich auf bis das quadrat den rand des fensters erreicht i info obwohl js animationen häufige style updates erfordern sollten sie transform und opacity bevorzugen um layout reflows zu vermeiden fortgeschrittene techniken in javascript animationen easing funktionen verwenden easing funktionen lassen animationen natürlicher wirken indem sie die animationsgeschwindigkeit variieren sie erwarten typischerweise einen normalisierten fortschrittswert zwischen 0 und 1 hier ist ein beispiel das eine easing funktion verwendet um das quadrat zu animieren doctype html html head style square width 50 px height 50 px background color blue position absolute left 0 top 50 px style head body div id square div script const square document getelementbyid square let start null const duration 2000 animation duration in milliseconds function easeoutquad t return t 2 t function animate timestamp if start start timestamp let elapsed timestamp start let progress math min elapsed duration 1 let easedprogress easeoutquad progress square style transform translatex window innerwidth 50 easedprogress px if progress 1 requestanimationframe animate requestanimationframe animate script body html kopieren probier es selbst dieses beispiel verbessert die einfache animation durch die integration einer easing funktion namens easeoutquad easing funktionen erzeugen natürlicher wirkende animationen indem sie die geschwindigkeit des animierten elements im laufe der zeit anpassen in diesem fall bewegt sich das blaue quadrat von links nach rechts startet schnell und verlangsamt sich wenn es das ende erreicht die animationsdauer ist auf 2000 millisekunden eingestellt und die position des quadrats wird basierend auf dem eased fortschritt aktualisiert animationen verketten das verketten von animationen ermöglicht es mehrere animationen sequenziell auszuführen hier ist ein beispiel eines quadrats das sich zuerst nach rechts und dann nach unten bewegt doctype html html head style square width 50 px height 50 px background color green position absolute left 0 top 0 style head body div id square div script const square document getelementbyid square let xpos 0 let ypos 0 function moveright if xpos window innerwidth 50 xpos 2 square style transform translatex xpos px requestanimationframe moveright else xpos 0 ypos 0 explicitly reset ypos before downward phase square style transform translatex 0px requestanimationframe movedown function movedown if ypos window innerheight 50 ypos 2 square style transform translatey ypos px requestanimationframe movedown else ypos 0 reset for repeated cycles requestanimationframe moveright moveright script body html kopieren probier es selbst dieses beispiel demonstriert das verketten von animationen indem ein grünes quadrat zunächst nach rechts und dann nach unten bewegt wird die funktion moveright bewegt das quadrat nach rechts bis es den rand des fensters erreicht sobald es den rechten rand erreicht wird ypos explizit auf 0 zurückgesetzt bevor movedown aufgerufen wird diese sequentielle ausführung kombiniert mit ordnungsgemäßem zustandsmanagement für wiederholte zyklen zeigt wie man komplexere animationssequenzen durch das verketten mehrerer animationen erstellt mehrere eigenschaften animieren das gleichzeitige animieren mehrerer eigenschaften kann komplexere und visuell ansprechendere effekte erzeugen hier ist ein beispiel das sowohl position als auch farbe ändert doctype html html head style square width 50 px height 50 px background color purple position absolute left 0 top 0 style head body div id square div script const square document getelementbyid square let pos 0 function changecolor progress let red math floor 255 progress let green math floor 255 1 progress return rgb red green 0 function animate if pos window innerwidth 50 pos 2 let progress pos window innerwidth 50 square style transform translatex pos px square style backgroundcolor changecolor progress requestanimationframe animate animate script body html kopieren probier es selbst dieses beispiel animiert sowohl die position als auch die hintergrundfarbe eines lila quadrats während sich das quadrat von links nach rechts bewegt wechselt seine farbe von rot zu grün die funktion changecolor berechnet die farbe basierend auf dem animationsfortschritt und erzeugt dabei einen gradienteneffekt dies demonstriert wie mehrere eigenschaften gleichzeitig animiert werden können was komplexität und visuelle attraktivität zu animationen hinzufügt die web animations api ein requestanimationframe loop manuell zu schreiben gibt ihnen totale kontrolle aber für die meisten zeitlinienbasierten animationen hat der browser bereits eine integrierte engine die web animations api waapi der aufruf von element animate keyframes options führt die animation nach möglichkeit abseits des haupt threads aus genau wie css sodass sie flüssige wiedergabe erhalten ohne selbst einen frame loop schreiben zu müssen es wird auch ein animation objekt zurückgegeben das sie pausieren umkehren anspringen oder abwarten können doctype html html head style box width 50 px height 50 px background color teal position absolute left 0 top 50 px style head body div id box div script const box document getelementbyid box const animation box animate transform translatex 0 opacity 1 transform translatex 300px opacity 0 3 duration 2000 easing ease out fill forwards the returned object gives you imperative control animation finished then console log done animation pause animation reverse animation currenttime 1000 script body html kopieren das erste argument ist ein array von keyframes jeweils ein object aus css eigenschaften das zweite setzt duration easing und verhaltensweisen wie fill endzustand beibehalten iterations direction und delay da easing dieselben cubic bezier und schlüsselwortwerte wie css akzeptiert müssen sie easing mathematik oft gar nicht von hand schreiben bevorzugen sie waapi wenn ihre animation eine feste zeitlinie von eigenschaftsänderungen ist reservieren sie einen manuellen requestanimationframe loop für fälle in denen jeder frame von live eingaben oder berechnetem zustand abhängt wie physik ziehen oder werte die nicht im voraus bekannt sind animationen stoppen und umkehren ein requestanimationframe loop läuft weiter bis sie aufhören neue frames zu planen um einen sofort abzubrechen speichern sie die id die requestanimationframe zurückgibt und übergeben sie sie an cancelanimationframe let rafid function loop timestamp update visuals rafid requestanimationframe loop rafid requestanimationframe loop later e g on a button click or when the element is removed cancelanimationframe rafid kopieren brechen sie laufende animationen immer ab bevor sie ihre elemente aus dem dom entfernen andernfalls mutiert der loop weiterhin einen abgetrennten knoten und verursacht in jedem frame unnötigen aufwand mit der web animations api lauten die entsprechungen einfach animation cancel animation pause und animation reverse barrierefreiheit reduzierte bewegung respektieren starke oder schnelle bewegungen können bei manchen benutzern übelkeit schwindel oder migräne auslösen betriebssysteme bieten eine einstellung zur reduzierung von bewegungen an und sie sollten diese berücksichtigen in javascript lesen sie sie mit matchmedia aus und deaktivieren entweder die animation oder springen direkt zum endzustand const prefersreducedmotion window matchmedia prefers reduced motion reduce matches if prefersreducedmotion skip the animation apply the final state instantly square style transform translatex 300px else requestanimationframe animate kopieren diese einzelne prüfung macht ihre interfaces sowohl inklusiver als auch angenehmer für benutzer die auf bewegung verzichten möchten performance optimierung für javascript animationen um flüssige und effiziente animationen zu gewährleisten befolgen sie diese performance optimierungstipps requestanimationframe verwenden diese methode synchronisiert mit der display bildwiederholrate und liefert flüssigere animationen dom manipulationen minimieren bündeln sie dom updates um reflows und repaints zu reduzieren bevorzugen sie transform und opacity für positionsänderungen um gpu beschleunigung zu nutzen css optimieren verwenden sie gpu beschleunigte css eigenschaften wie transform und opacity events drosseln begrenzen sie die häufigkeit von events wie resize oder scroll mithilfe von throttling oder debouncing techniken animationen ordnungsgemäß stoppen verwenden sie cancelanimationframe um animationen zu stoppen wenn sie nicht mehr benötigt werden speichern sie die animations id und rufen sie cancelanimationframe id auf um speicherlecks zu vermeiden beispiel let animationid requestanimationframe animate later cancelanimationframe animationid kopieren layout thrashing vermeiden lesen sie keine layout eigenschaften z b offsetwidth getboundingclientrect innerhalb des animations loops da dies den browser zwingt styles mitten im frame neu zu berechnen was zu ruckeln führen kann i info sie können animationen auch ausschließlich mit css erstellen ohne javascript was in der regel zu besserer performance führt siehe css animationen fazit die beherrschung von javascript animationen erfordert das verstehen grundlegender ...
|
