Med fremkomsten af ​​CSS3-animationer er HTML-dokumenter blevet meget mere attraktive og lettere at udvikle. Ved at bruge @keyframes-reglen kan du nemt definere forskellige parametre, herunder positionen og størrelsen af ​​et HTML-element. Animationsparameteren er til gengæld ansvarlig for at starte og flytte keyframes afhængigt af visse parametre. Uden behov for javascript og plugins kan vi nemt skabe selv de mest komplekse animationer, der vil køre meget glat i alle moderne browsere.

Der opstår problemer, når du skal bruge javascript til at udvikle CSS3-animationer. Vi ved alle, at javascript i de fleste tilfælde er den første nødvendighed, der giver os mulighed for at beregne individuelle værdier eller animationsprocessen som helhed.

Kombination af CSS og javascript ved hjælp af den nye animate() metode

Den nye javascript animate() metode giver os mulighed for at styre animationer gennem et script. Selvfølgelig skal vi stadig bruge en hel masse CSS-parametre til at definere vores keyframes.

(højde: "0"),
(højde: "100 %")
], {
varighed: 3000,
iteration: 2,
forsinkelse: 1000
});
I ovenstående eksempel vedhæfter vi en animate()-metode til elementet. Inden for firkantede parenteser definerer vi så mange tilstande for en given parameter, som vi har brug for, og i vores eksempel vil vi arbejde med højden. Hver værdi skrives som et objektbogstav, og værdierne bruges kun til én individuel parameter. Kombinationer som bredde og højde er ikke tilladt. Bemærk, at værdierne i sig selv skal citeres og formateres i javascript-kompatibel syntaks, hvilket betyder at bruge "baggrundsfarve" i stedet for "baggrundsfarve". I et andet bogstav i objektet, umiddelbart efter at have lukket firkantede parenteser, definerer vi yderligere animation. Vi ønsker at ændre længden af ​​animationen ved hjælp af varighed, hyppigheden af ​​gentagelser ved hjælp af iteration, og kan valgfrit definere en forsinkelse ved hjælp af forsinkelsesparameteren - denne parameter bestemmer det øjeblik, hvor animationen skal starte. Alle tidsværdier er angivet i millisekunder.

Vi administrerer sættet af nøglerammer og deres varighed

Vi skal køre animate()-metoden separat fra hver parameter, vi skal ændre. Det betyder, at hvis vi vil ændre både højden og bredden, bliver vi nødt til at køre animate() igen.

Document.getElementById("element").animate([
(bredde: "0", offset: 0),
(bredde: "10%", offset, 1/3),
(bredde: "100%", offset: 1)
], {
varighed: 3000,
iteration: 2,
forsinkelse: 1000
});
I ovenstående eksempel ændrer vi elementets bredde. Bredden bør variere begyndende ved 0, gå op til 10 procent og derefter slutte, når den når 100 procent. Alt dette vil naturligvis blive ledsaget af jævn animation. Den ekstra offset-parameter angiver, at ændringer fra 0 til 10 procent vil tage 1/3 af den samlede animationstid, og en overgang fra 10 til 100 vil tage 2/3 af den samlede animationstid. Og samtidig bestemmes den samlede varighed af animationen af ​​varighedsparameteren. I dette tilfælde vil den første del finde sted i løbet af et sekund, og den anden - i løbet af 2.

I stedet for at definere værdien som brøker, kan du også bruge decimaler. Du skal bruge tal fra 0 til 1. For eksempel kan du i stedet for 1/3 bruge 0,33.

Flere animationsmuligheder

Hvis du er bekendt med CSS3-animationsparameteren, så ved du sikkert, at animate()-metoden giver dig mulighed for at styre animationsprocessen. Du kan ændre retningen, hastigheden af ​​animationen og dens acceleration. Hvis du vil angive, at animationen skal vende tilbage til begyndelsen efter endt, kan du gøre det.

Document.getElementById("element").animate([
…
], {
varighed: 3000,
iteration: 2,
forsinkelse: 1000,
retning: "omvendt",
easing: "ease-in",
udfyld: "fremad"
});
Retningsværdien indeholder information om animationens retning. Hvis du indstiller den til omvendt, afspilles animationen baglæns. Den alternative værdi giver dig mulighed for at afspille animationen i standardretningen og derefter i den modsatte retning. Og den alternative-omvendte værdi kombinerer de sidste to værdier.

Lempelsesværdien giver dig mulighed for at bruge de mest almindelige modifikationsfunktioner, som allerede er velkendte fra CSS3, da du kan finde ease-in, ease-out og så videre. Som standard er hver animation indstillet til at køre lineært uden acceleration eller deceleration. Fyldværdien bestemmer, hvad der vil blive præsenteret efter animationen slutter. Som standard skal animationen vende tilbage til udgangspunktet. Når du bruger fremadgående værdi, stopper animationen ved sidste keyframe.

Animation kontrol

Brug af animate() på en variabel giver os mulighed for at styre animationen ved hjælp af javascript. Vi kan starte og stoppe det efter eget skøn.

Var animation = document.getElementById("element").animate([
(højde: "0"),
(højde: "100 %")
], {
varighed: 3000,
iteration: 2,
forsinkelse: 1000
});

document.getElementById("animation_start").addEventListener("klik", function() (
animation.play();
), falsk);

document.getElementById("animation_pause").addEventListener("klik", function() (
animation.pause();
), falsk);
I vores eksempel vedhæfter vi animationen til animationsvariablen, mærkeligt nok. Derefter knytter vi 2 eventlyttere til elementerne med id animation_start og animation_pause. Disse lyttere sørger for at udføre visse funktioner, når der klikkes på dem. Afspilning starter animationen, pause er allerede klar, hvad den gør, og omvendt vil straks tage dig til det sidste nøglebillede og stoppe animationen fuldstændigt.

Hej, det er javascript. Selvfølgelig har vi en event-lytter, der giver os mulighed for at reagere på slutningen af ​​animationen. Vi kan implementere dette ved hjælp af finish. Indvendig finish skal du definere den passende funktion.

Animation.addEventListener("finish", function() (
alert("Animationen er afsluttet.");
), falsk);
I ovenstående eksempel affyrer vi blot en besked, der indikerer, at animationen er fuldført.

Browser support

animate() er i øjeblikket i tidlig udvikling og er i øjeblikket beklædt med den "eksperimentelle" etiket. Understøttelse af denne mulighed vises i Chrome fra og med version 36. Hvis du vil prøve det nu, kan du downloade og installere Chrome Canary.

Anmærkning: Et simpelt eksempel: den gule fading-metode. Animation ved hjælp af JavaScript-biblioteker. Et mere komplekst eksempel: flytning og ændring af størrelse. CSS-overgange.

Princippet bag fading er, at baggrundsfarven på fading-elementet indstilles til gul, og derefter, gennem en række trin, vender dets farve tilbage til sin oprindelige farve. Så hvis den oprindelige baggrundsfarve var rød, så indstilles farven til gul, derefter orange-gul, derefter orange, så rød-orange og derefter rød. Antallet af anvendte trin bestemmer, hvor jævnt farveændringen sker, og tiden mellem trinene bestemmer, hvor længe farveændringen fortsætter. Når du skifter farver, kan et nyttigt faktum fra CSS bruges: en farve kan defineres som en tredobbelt af regulære tal eller som en hexadecimal streng. Derfor kan #FF0000 (rød farve) også defineres som rgb(255,0,0) . At skifte fra gul til rød i fem trin betyder derfor at gå fra rgb(255,255,0) (gul) til rgb(255,0,0) i de følgende fem trin:

rgb(255,255,0) rgb(255,192,0) rgb(255,128,0) rgb(255,64,0) rgb(255,0,0)

Mere komplekst eksempel: flytning og ændring af størrelse

Selvom den gule fading-metode demonstrerer animation, er den noget kedelig. Når de fleste mennesker tænker på animation, tænker de normalt på bevægelse. En interessant teknik til at advare brugeren om, at der er sket noget uden at afbryde ham workflow, består af en modelløs besked. I stedet for at vise en advarsel()-dialogboks, der kræver, at brugeren klikker Okay før han kan fortsætte, skal du blot placere beskeden i en flydende div på siden, der diskret bliver der, indtil den modtager bekræftelse. En anden ret interessant ting kunne så være at give brugeren mulighed for at vende tilbage til en besked, som de har bekræftet, at de gerne vil læse den igen. Så lad os implementere en flydende besked, der, når der klikkes på den, falder sammen til hjørnet af skærmen og derefter kan gendannes igen, når der klikkes. Du kan se en kort demo af denne "kollapsende besked" (http://dev.opera.com/articles/view/javascript-animation/moving_messages_jq.html) for at få den generelle idé.

Hvis du laver seriøst animationsarbejde eller seriøst JavaScript-arbejde, er det næsten altid værd at bruge et JavaScript-bibliotek. Dette giver dig mulighed for at skabe den ønskede præsentation for brugere uden at skulle bekymre dig om de matematiske forviklinger, der kræves for at udføre animationen. (Med det første eksempel ovenfor ved du nu, hvordan du regner ud, og hvordan du bruger setInterval , men du vil spare tid og kræfter ved at bruge færdige løsninger.)

Demoen ovenfor bruger jQuery-biblioteket (http://jquery.com/) for at få det til at fungere, men som nævnt giver de fleste biblioteker et lignende nok animationskoncept til, at du burde være i stand til at implementere principdelen ved hjælp af dit foretrukne bibliotek. Grundlæggende skal du gøre følgende:

1. Vis en flydende besked i midten af ​​skærmen
2. Når der klikkes:
   1. Flyt dens vandrette position til den yderste højre position
   2. Flyt dens lodrette position op
   3. Indstil dens bredde til 20px
   4. Indstil dens højde til 20px
   5. Gør dens tæthed lig med 20%, så den bliver næsten gennemsigtig, og skjul teksten i den
3. Når der klikkes på denne "mini"-version af beskeden, skal du gendanne den til midten af ​​skærmen (dvs. det modsatte af, hvad vi gjorde for at komprimere den), og så brugeren får et klart billede af, hvad der skete med deres besked, og hopper fra fuld størrelse Meddelelserne til mini-beskeden skal være animerede (så de kan se beskeden "krympe" ind i hjørnet af vinduet).

Animering med jQuery er meget let: brug blot . animere() og giv det ønskede slutresultat af animationen (og hvor længe den skal køre):

$(ourObject).animate(( width: "20px", højde: "20px", top: "20px", højre: "20px", marginRight: "0px", opacitet: "0.2" ), 300);

Funktionen tager ourObject og erstatter på 300 millisekunder dens bredde og højde med 20px, dens øverste og højre positioner med 20px, dens margin-højre stilegenskab med 0px og dens tæthed (i browsere, der understøtter billedtæthed) med 20%. Så er det bare med at programmere med stil

Dengang brugte de fleste udviklere jQuery til at animere elementer i browseren. Misfarv dette, stræk det - simple ting. Men efterhånden som interaktive projekter blev mere aggressive, og mobile enheder bragede ind på scenen, blev ydeevne den vigtigste faktor.

Flash faldt gradvist i unåde, og talentfulde animatorer fik HTML5 til at gøre ting, den aldrig havde gjort før. De havde brug for mere effektive værktøjer til komplekse effekter og førsteklasses ydeevne.

jQuery var bare ikke designet til dette. Browsere er modnet og begyndt at tilbyde løsninger.

Den mest kendte løsning er CSS-animationer. CSS-animation, som it-branchens elskede, har været uendeligt diskuteret på konferencer i flere år, hvor sætninger som " hardwareacceleration"og" mobilvenlig" kærtegnede publikums ører.

JavaScript-baserede animationer blev set som forældede og "obskøne". Men er det virkelig sådan?

Som en, der er fascineret (i virkeligheden grænseoverskridende) med animation og performance, sprang jeg ivrigt i armene på CSS. Og inden jeg var nået rigtig langt, dukkede der mange alvorlige problemer op, som ingen havde talt om. Jeg var chokeret.

Denne artikel er beregnet til at øge bevidstheden om nogle af de væsentligste ulemper ved CSS-baserede animationer, så du kan undgå den hovedpine, jeg oplevede, og træffe en mere informeret beslutning om, hvornår du skal bruge JS til animationer, og hvornår du skal bruge CSS.

Ingen uafhængig skala/rotation/positionskontrol

Animering af et elements skala, rotation og position er ekstremt almindeligt. I CSS er alle disse parametre fyldt ind i transform-egenskaben, hvilket gør det umuligt at lave en separat animation for hver parameter i et element.

Hvad hvis du for eksempel vil lave rotation og skalering af animationer uafhængigt af hinanden, med forskellige runtime-beregninger og lette funktioner?

Måske er elementet konstant pulserende (oscillerende skala), og du vil gerne rotere det ved at svæve. Dette er kun muligt med JavaScript.

HTML:

CSS:

body (baggrundsfarve:sort; margin: 0; polstring: 0; font-familie: Signika Negative, sans-serif; font-weight: 300; ) html, body ( højde: 100%; ) #demo ( display:table ; width:100%; height:100%; ) #field (position:relative; display:table-cell; height: 100%; overflow:hidden; text-align: center; vertical-align: middle; ) #box ( farve: sort; font-size:24px; polstring: 10px 16px; kant: 2px ensfarvet sort; baggrund: #9af600; baggrund: linear-gradient(til bund, #9af600 0%,#71B200 100%); display:inline- blok; kant-radius: 10px; ) #felt p (position: absolut; farve: #999; top: 0px; polstring: 0px 20px; tekstjustering: venstre; z-indeks: -1000; ) #kontroller (position: absolut; farve: #999; bredde: 100%; bund: 20px; tekstjustering: center; ) knap ( margin: 2px; )

JS:

var $box = $("#box"), $field = $("#field"), rotation = 0, rotationX = 0, rotationY = 0, wanderTween, ignoreRollovers; //anvend perspektiv på beholderen, så vi kan se 3D. TweenLite.set($field, (perspektiv: 500)); //Skift kilden langs z-aksen for at gøre rotationen mere interessant. TweenLite.set($box, (transformOrigin:"center center -150px")); //få rektanglet til at pulsere ved hjælp af scaleX og scaleY TweenMax.to($box, 1.2, (scaleX:0.8, scaleY:0.8, force3D:true, yoyo:true, repeat:-1, ease:Power1.easeInOut)); //hvis vi svæver, vender vi rektanglet, men for at undgå overdreven //rotation reducerer vi svævefølsomheden i det første sekund af //animationen. $box.hover(function() ( if (!ignoreRollovers) ( rotation += 360; ignoreRollovers = true; TweenLite.to($box, 2, (rotation:rotation, ease:Elastic.easeOut)); TweenLite.delayedCall( 1, function() ( ignoreRollovers = falsk; )); ) ), function() ()); $("#rotation").click(function() (rotation += 360; TweenLite.to($box, 2, (rotation:rotation, ease:Elastic.easeOut)); )); $("#rotationX").click(function() (rotationX += 360; TweenLite.to($box, 2, (rotationX:rotationX, ease:Power2.easeOut)); )); $("#rotationY").click(function() (rotationY += 360; TweenLite.to($box, 2, (rotationY:rotationY, ease:Power1.easeInOut)); )); $("#move").click(function() ( if (wanderTween) ( wanderTween.kill(); wanderTween = null; TweenLite.to($box, 0.5, (x:0, y:0)); ) else ( vandre(); ) )); //vælg tilfældigt et sted på skærmen og start animationen der, og gentag derefter dette //igen og igen. funktion wander() ( var x = (($field.width() - $box.width()) / 2) * (Math.random() * 1,8 - 0,9), y = (($field.height() - $box.height()) / 2) * (Math.random() * 1,4 - 0,7); wanderTween = TweenLite.to($box, 2,5, (x:x, y:y, ease:Power1.easeInOut, onComplete:wander)); )

Dette er klart et svagt punkt ved CSS efter min mening, men hvis du laver enklere animationer, der involverer hele transformationer på et givet tidspunkt, så vil dette ikke være et problem for dig.

Ydeevne

De fleste sammenligninger på internettet sætter CSS-animation mod jQuery-biblioteket, da det er meget almindeligt (som om "JavaScript" og "jQuery" var synonyme), men jQuery er almindeligt kendt for at være ret langsom med hensyn til animationsydelse.

Det nyere GSAP-bibliotek er også baseret på JavaScript, men det er bogstaveligt talt 20 gange hurtigere end jQuery.Så en af ​​grundene til, at JavaScript får et dårligt rap, er det, jeg kalder "jQuery-faktoren".

Det mest almindeligt citerede argument for at bruge CSS til animation er " hardwareacceleration" Lyder lækkert, ikke?

Lad os dele det op i to dele:

GPU involvering

Graphics Processing Unit (GPU) er meget optimeret til opgaver som at flytte pixels, anvende gennemsigtighed og transformationsmatricer, så moderne browsere forsøger at overføre sådanne opgaver fra den centrale behandlingsenhed (CPU) til GPU'en.

Hemmeligheden er at adskille de animerede elementer i deres egne GPU-lag, for når først laget er oprettet (så længe dets originale pixels ikke ændres), er det nemt for GPU'en at flytte rundt på disse pixels og kombinere dem sammen.

I stedet for at beregne hver enkelt pixel 60 gange i sekundet, kan GPU'en gemme grupper af pixels (som lag) og blot sige: Flyt denne gruppe med 10 pixels og 5 pixels ned" (Eller noget i den stil).

Bemærk: Det er ikke klogt at give hvert element sit eget lag, fordi GPU'en har begrænset videohukommelse. Hvis du går ud over det, vil alt bremse dramatisk.

Erklæring af animationer i CSS giver browseren mulighed for at bestemme, hvilke elementer der skal modtage GPU-lag og distribuere dem i overensstemmelse hermed. Store!

Men vidste du, at med JavaScript kan du også gøre dette? Indstilling af en transformation med en 3D-karakteristik (såsom translate3d() eller matrix3d() ) får browseren til at oprette et GPU-lag for dette element. Så GPU-hastighedsboostet virker ikke kun for CSS-animationer – JavaScript-animationer kan også drage fordel af det!

Bemærk også, at ikke alle CSS-egenskaber er GPU-accelererede i CSS-animationer. Faktisk modtager de fleste af dem ikke denne acceleration. Transformationer (skala, rotation, forskydning og skævhed) og gennemsigtighed er de vigtigste operationer, der drager fordel af GPU-acceleration.

Så tro ikke, at hvis du laver animationer med CSS, vil alt på magisk vis blive GPU-accelereret. Dette er simpelthen ikke sandt.

Omfordeling af beregninger til en anden tråd

Anden del" hardwareacceleration" relaterer til evnen til at bruge forskellige CPU-tråde til beregninger relateret til animation. Igen, det lyder godt i teorien, men det kommer ikke uden omkostninger, og udviklere overvurderer ofte de opnåede fordele.

Først og fremmest kan kun de egenskaber, der ikke påvirker dokumentets flow, rent faktisk overføres til en anden tråd.

Så igen er transformation og gennemsigtighed de største fordele. Når tråde er gaflet, er der en overhead forbundet med at styre denne proces.

Da grafikgengivelse og dokumentlayout æder det meste af processorkraften (meget mere) op i de fleste animationer (bortset fra mellemliggende animationsegenskabsværdier), er fordelen ved at bruge en separat tråd til interpolation minimal.

For eksempel, hvis 98 % af arbejdet under en bestemt animation er gengivelse af grafik og dokumentlayout, og 2 % er at finde ud af ny position/rotation/gennemsigtighed/hvad som helst værdier, selv beregner dem 10 gange hurtigere, vil du samlet set kun se ca. 1 % hastighedsforøgelse.

Præstationssammenligning

Stresstesten nedenfor skaber et vist antal billedelementer (prikker) og sætter dem i bevægelse fra midten til et tilfældigt sted nær kanterne ved hjælp af tilfældige forsinkelser, og skaber derved effekten af ​​at flyve gennem stjernerne.

Indstil et stort antal point og se en sammenligning af jQuery, GSAP og Zepto.

Da Zepto bruger CSS-transformationer til alle animationer, burde dens ydeevne være den bedste, ikke?

HTML:

CSS:

body (baggrundsfarve: sort; margin:0; polstring:0; farve:#eee; font-family: Signika Negative, sans-serif; font-weight: 300; font-size: 1.15em; user-select:none ; -webkit-user-select:none; ) html, body (højde: 100%; overflow:hidden; ) h1 ( font-weight: 400; font-size:2em; line-height:1em; margin-bottom:0.1 em; farve: hvid; ) a, a:hover, a:besøgt (farve:#71B200; ) #controls (display:table-row; background-color:#555; background: linear-gradient(to bottom, #777) 0%,#444 100%); polstring:10px 10px 10px 5px; z-index:1000; ) #kontroller fra li (display:table-cell; polstring:12px 6px 10px 6px; vertikal-align:middle; text-shadow : 1px 1px 1px #000; ) #instructions ( width:82%; margin-left:8%; padding-top:1em; line-height: 1.5em; color:#ccc; ) #demo (display:tabel; width :100%; højde:100%; ) #felt (position:relativ; display:tabelcelle; bredde:100%; højde: 100%; overløb:skjult; z-indeks:-100; border-top: 1px solid #777; ) #start (farve: sort; kant-radius: 6px; polstring: 5px 18px; kant: 2px ensfarvet sort; baggrund: #9af600; baggrund: lineær gradient(til bund, #9af600 0%,#71B200 100%); markør: pointer; tekst-skygge: ingen; skrifttype-vægt: 400; )

JS:

var $start = $("#start"), $dotQtyInput = $("#dotQuantity"), $engineInput = $("#engine"), $propertiesInput = $("#properties"), $instructions = $( "#instructions"), $field = $("#field"), $window = $(vindue), $inputs = $("vælg"), inProgress = falsk, tests = (), varighed, radius, centerX, centerY, dots, rawDots, currentTest, startCSS; /** * Formålet med denne test er at sammenligne, hvordan forskellige animationsværktøjer klarer sig under belastning, ved at tage relativt almindelige animationsopgaver og køre dem i stort antal for at se rå ydeevne. Målet er ikke at finde ud af den mest effektive måde at flytte point på i et stjernefeltmønster. * * Den samme kode bruges i alt undtagen selve animationerne. Hver test i "test"-objektet har 4 egenskaber: * * - millisekunder – sand, hvis varigheden skal angives i millisekunder * * - wrapDot – når hvert punkt oprettes, skal den videregives til wrapDot()-metoden, og det, der returneres af funktionen, gemmes i et array af prikker til animation. Dette er nyttigt til at forbedre ydeevnen af ​​ting som jQuery, fordi i stedet for at overføre elementets DOM til tween()-metoden (hvilket ville kræve, at jQuery forespørger DOM'en og pakker elementet ind i et motorspecifikt objekt, før du kalder animate()) , kan en naturlig genstand bruges. Kort sagt vil dette gøre det muligt at cache punktindpakning for at forbedre ydeevnen. * * - tween er kernen i hele testen. tween() kaldes for hvert punkt, sendes punktet som en parameter. Tween()-funktionen skal indstille punktets cssText til startCSS-værdien (som blot placerer punktet midt på skærmen og indstiller dets bredde og højde til 1 pixel) og derefter efter en tilfældig forsinkelse på 0 til animationens udførelsestid, funktionen skal animere punktet under en tilfældig vinkel ved at ændre enten venstre/top-værdierne eller translate()-transformationerne og indstille størrelsen til 32 pixels i bredden og højden ved hjælp af enten width/height eller scale(). Derefter, efter at animationen er færdig, skal tween()-metoden kaldes igen på samme punkt. Så det samme punkt vil simpelthen konstant bevæge sig væk fra midten i en tilfældig vinkel og med en tilfældig forsinkelsestid. * * - stop – denne funktion kaldes, når brugeren stopper testen. Punktet sendes som en parameter. Funktionen skal straks stoppe/ødelægge den animation (eller animationer), der kører for dette punkt (eller for alle punkter - dette er også normalt). * * - nativeSize – sandt, hvis den oprindelige bredde/højde af billederne skal være naturlig størrelse (normalt nødvendigt for transformationer, men ikke når vi animerer bredden/højden). * *Jeg hævder ikke at være ekspert i de forskellige animationsmotorer, så hvis der er optimeringer, der kan anvendes til at forbedre testydelsen, så lad mig det vide. Jeg prøvede at gøre alt så upartisk som muligt. **/ //standard jQuery normal (top/left/width/height) tests.jquery_normal = ( milliseconds:true, wrapDot:function(dot) (retur jQuery(dot); //indpak punktet i et jQuery-objekt for at forbedre performance (på denne måde behøver vi ikke at forespørge på DOM hver gang vi animerer - vi kan bare kalde animate() direkte på jQuery-objektet), tween:function(dot) ( var angle = Math.random() * Math. PI * 2 ; dot.style.cssText = startCSS; dot.delay(Math.random() * duration).animate((venstre:Math.cos(angle) * radius + centerX, top:Math.sin(angle) * radius + centerY , width:32, height:32), duration, "cubicIn", function() ( tests.jquery_normal.tween(dot) )); ), stop:function(dot) (dot.stop(true); ), nativeSize :false); //standard GSAP (top/left/width/height) tests.gsap_normal = ( milliseconds:false, wrapDot:function(dot) (retur prik; //intet behov for ombrydning), tween:function(dot) ( var angle = Math.random() * Matematik. PI*2; dot.style.cssText = starterCSS; TweenLite.to(dot, varighed, (css:(venstre:Math.cos(angle) * radius + centerX, top:Math.sin(angle) * radius + centerY, width:32, height:32), delay:Math .random() * varighed, ease:Cubic.easeIn, overskriv:"none", onComplete:tests.gsap_normal.tween, onCompleteParams:)); ), stop:function(dot) ( TweenLite.killTweensOf(dot); ), nativeSize:false ); //GSAP-transformationer (translate()/scale()) tests.gsap_transforms = ( milliseconds:false, wrapDot:function(dot) (retur prik; // intet behov for ombrydning), tween:function(dot) ( var angle = Math.random() * Math.PI * 2; TweenLite.set(dot, (css:(x:0, y:0, skala:0,06), overskriv:"ingen")); TweenLite.to(dot, varighed , (css:(x:(Math.cos(angle) * radius), y:(Math.sin(angle) * radius), scaleX:2, scaleY:2), delay:Math.random() * varighed, ease:Cubic.easeIn, overskriv:"none", onComplete:tests.gsap_transforms.tween, onCompleteParams:)); ), stop:function(dot) ( TweenLite.killTweensOf(dot); ), nativeSize:true ); //standard Zepto (top/left/width/height) tests. zepto_normal = ( millisekunder:sand, wrapDot:function(dot) ( return Zepto(dot); // pak prikken ind i et jQuery-objekt for at forbedre ydeevnen (så vi ingen grund til at forespørge på DOM hver gang vi animerer - vi kan bare kalde animate() direkte på jQuery-objektet), tween:function(dot) ( var angle = Math.random() * Math.PI * 2; dot.style .cssText = starterCSS; //Zeptos forsinkelsesfunktion virker FORFÆRDELIG under pres, så vi bruger setTimeout() i stedet for at forbedre ydeevnen. setTimeout(function() ( if (!dot.isKilled) ( //Zepto ikke har en funktion, hvilket ville tillade os at dræbe kørende animationer, så vi indstiller simpelthen vores egen isKilled-egenskab til sand, når animationen formodes at være stoppet, og stopper derefter rekursionen, hvilket giver os den effekt, vi har brug for. dot.animate((venstre:Math. cos(angle) * radius + centerX, top:Math.sin(angle) * radius + centerY, width:32, height:32), duration, "cubic-bezier(0,550, 0,055, 0,675, 0,190)", function( ) ( tests. zepto_normal.tween(dot)); ) ), varighed * Math.random()); ), stop:function(dot) (dot.isKilled = true; ), nativeSize:false ); //Zepto-transformationer (translate()/scale()) tests.zepto_transforms = ( millisekunder:true, wrapDot:function(dot) ( return Zepto(dot); // pak prikken ind i et jQuery-objekt for at forbedre ydeevnen (så vi ingen grund til at forespørge på DOM hver gang vi animerer - vi kan bare kalde animate() direkte på jQuery-objektet) ), tween:function(dot) ( // Jeg kunne ikke indstille css()-funktionen i Zepto (den mislykkedes ), så jeg var nødt til at bruge et nul varighed animate()-kald. Selvom dette er rimeligt, for for TweenLite laver vi faktisk også animation af nul varighed. dot.animate((translateX:"0px", translateY:"0px", rotateY:"0rad", rotateX:"0rad", skala:"0.06,0.06"),0); //Zeptos forsinkelsesfunktion virker FRYGTELIG under pres, så vi bruger setTimeout() i stedet for at forbedre ydeevnen. setTimeout(function() ( if (!dot.isKilled) ( //Zepto har ikke en funktion, der tillader os at dræbe kørende animationer, så vi sætter simpelthen vores egen isKilled-egenskab til sand, når vi antager, at animationen er stoppet og derefter stop rekursion, hvilket giver os den ønskede effekt: var angle = Math.random() * Math.PI * 2; dot.animate((translateX:(Math.cos(angle) * radius) + "px", translateY:( Math. sin(angle) * radius) + "px", skala:"2,2", forsinkelse:varighed * Math.random()), varighed, "cubic-bezier(0,550, 0,055, 0,675, 0,190)", function( ) ( tests.zepto_transforms.tween(dot); )); ) ), varighed * Math.random()); ), stop:function(dot) ( dot.isKilled = true; ), nativeSize:true ); funktion toggleTest() ( var i, størrelse; inProgress = !inProgress; if (inProgress) ( $inputs.prop("disabled", true); $field.css((pointerEvents:"none")); //forbedrer ydeevnen – ignorer pointerhændelser under animation $start.html(" STOP "); $start.css((baggrund:"#C00")); TweenLite.to($instructions, 0.7, (autoAlpha:0, overskriv:"all " )); currentTest = tests[$engineInput.val() + "_" + $propertiesInput.val()]; size = (currentTest.nativeSize ? "16px" : "1px"); centerX = $field.width( ) / 2; centerY = $field.height() / 2; startCSS = "position:absolut; venstre:" + centerX + "px; top:" + centerY + "px; width:" + size + "; højde: " + størrelse + ";"; radius = Math.sqrt(centerX * centerX + centerY * centerY); duration = currentTest.milliseconds ? 750: 0,75; //vent et millisekund, før du opretter punkter og starter animationen, så brugergrænsefladen afspilles fremad ( at gøre "start"-knappen til et "stop"), ellers kan brugerne blive forvirrede under den lange pause, mens Zepto er valgt og konverterer, på grund af det faktum, at det kan tage noget tid for browseren at placere alle prikkerne på egen hånd lag. setTimeout(function() ( createDots(); i = dots.length; while (--i > -1) ( currentTest.tween(dots[i]); ) ), 1); ) else ( $start.html(" START "); $start.css((baggrundsfarve:"#9af600", baggrund: "lineær-gradient(til bund, #9af600 0%,#71B200 100%")); TweenLite .to($instruktioner, 0. 7, (autoAlpha:1, forsinkelse:0,2)); $inputs.prop("deaktiveret", falsk); calibrateInputs(); $field.css((pointerEvents:"auto")); //stop animationen og slet punkterne. i = prikker.længde; while (--i > -1) ( currentTest.stop(dots[i]); $field.removeChild(rawDots[i]); //fjerner et punkt (eller punkter) ) dots = null; rawDots = null; ) ) funktion createDots() ( var i = parseInt($dotQtyInput.val()), dot; dots = ; rawDots = ; while (--i > -1) ( dot = document.createElement("img"); prik .src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/dot.png"; dot.width = 1; dot.height = 1; dot.id = " dot" + i; dot.style.cssText = startCSS; $field.appendChild(dot); rawDots.push(dot); dots.push(currentTest.wrapDot(dot)); ) ) funktion calibrateInputs(e) ( if ( $engineInput.val() === "jquery") ( //jQuery kan ikke animere transformationer uden et tredjeparts plugin, så deaktiver denne mulighed $propertiesInput.selectedIndex = 0; $propertiesInput.prop("disabled", true) ; ) else ( $propertiesInput.prop("disabled", false); ) ) $start.click(toggleTest); $inputs.change(calibrateInputs); jQuery.easing.cubicIn = $.easing.cubicIn = funktion(p, n, firstNum, diff) ( //vi skal tilføje standard CubicIn easing-funktionen til jQuery returner firstNum + p * p * p * diff; ) jQuery. fx interval = 16; //sikrer, at jQuery opdaterer med cirka 60 billeder i sekundet, ligesom GSAP og andre, for at vise et mere ligeligt/uvildigt resultat. $propertiesInput.prop("deaktiveret", sand);

Resultaterne bekræfter, hvad der er almindeligt bemærket på internettet - CSS-animationer er betydeligt hurtigere end jQuery.

Men på de fleste enheder og browsere, jeg har testet på, har JavaScript-baseret GSAP endnu bedre ydeevne end CSS-animationer (med stor margen i nogle tilfælde, f.eks. på Microsoft Surface RT, hvor GSAP-biblioteket var mindst 5 gange hurtigere ) hurtigere end CSS-transformationer oprettet med Zepto, og på iPad 3 med iOS7 var transformationer meget hurtigere, når de blev udført med GSAP i stedet for CSS-transformationer):

Animerede egenskaber	Bedre med JavaScript	Bedre med CSS
top, venstre, bredde, højde	Windows Surface RT, iPhone 5s (iOS7), iPad 3 (iOS 6), iPad 3 (iOS7), Samsung Galaxy Tab 2, Chrome, Firefox, Safari, Opera, Kindle Fire HD, IE11
transformationer (skift/skala)	Windows Surface RT, iPhone 5s (iOS7), iPad 3 (iOS7), Samsung Galaxy Tab 2, Firefox, Opera, IE11	iPad 3 (iOS6), Safari, Chrome

Hvor meget hurtigere? Den originale version af testen havde en tæller for billeder pr. sekund for at give kvantitative resultater, men jeg opdagede hurtigt, at der ikke var nogen virkelig nøjagtig måde at måle dette på i alle browsere, især med CSS-animationer, og nogle browsere producerede vildledende data, så jeg fjernede denne funktion.

Selvom du nemt kan evaluere relativ ydeevne ved at øge antallet af point, skifte mellem motorer og observere, hvordan animationen udføres (jævnhed af bevægelse, ensartethed af tidsintervaller, fordeling af point osv.). Det vigtigste mål er trods alt at få præsentable animationer.

Interessant at bemærke:

• Når man animerede top/venstre/width/height egenskaberne (som påvirker dokumentflowet), var JavaScript hurtigere over hele linjen (GSAP, ikke jQuery);
• Nogle enheder var godt optimeret til transformationer, mens andre var bedre til at håndtere animationer med top/venstre/bredde/højde egenskaber. Især den ældre iOS6 klarede CSS-baserede transformationer meget bedre, men den nye iOS7 har omprioriteret dem og er nu væsentligt langsommere;
• Der er en betydelig forsinkelse i den indledende lancering af CSS-baserede animationer, da browseren beregner lagene og indlæser dataene i GPU'en. Dette gælder også for 3D-transformationer i JavaScript, så "GPU-acceleration" er ikke tabsfri;
• Under store CSS-belastninger er der større sandsynlighed for, at transformationer sprøjtes til striber eller ringe (dette skyldes synkroniserings- og planlægningsproblemer, muligvis på grund af kontrol på en anden tråd);
• I nogle browsere (f.eks. Google Chrome), når animationen involverede et meget stort antal punkter, var der overhovedet ingen gradvis falmning af teksten, men dette skete kun ved brug af CSS-animationer!

Mens veloptimeret JavaScript ofte er lige så hurtigt, hvis ikke hurtigere, end CSS-animationer, gengives 3D-transformationer typisk ved hjælp af CSS, men dette er direkte relateret til den måde, browsere håndterer 16-elements matricer (tvinger konvertering fra tal til sammenkædet linje, og derefter tilbage til tallene).

Lad os dog håbe, at det ændrer sig. Uanset hvad, vil du i de fleste projekter i det virkelige liv aldrig bemærke forskellen i ydeevne.

Jeg opfordrer dig til at lave dine egne tests for at se, hvilken teknologi der vil give en jævn animation i dine specifikke projekt(er).

Køb ikke ind i myten om, at CSS-animationer altid er hurtigere, og antag ikke, at hastighedstesten ovenfor afspejler, hvad du vil se i din ansøgning. Test, test og test igen.

Udførelseskontrol og hændelser

Nogle browsere giver dig mulighed for at stoppe eller genstarte animationer med CSS keyframes, men det er det hele.

Du kan ikke adressere en bestemt placering i en animation, ligesom du ikke uden problemer kan ændre retningen af ​​en sektion af animation, eller ændre tidslinjen, eller tilføje tilbagekald på bestemte placeringer eller binde dem til et rigt sæt af afspilningsbegivenheder .

JavaScript giver dig derimod meget kontrol, som du kan se i eksemplet nedenfor.

HTML:

CSS:

body ( font-family: Signika Negative, sans-serif; font-weight: 300; color: white; background-color: black; text-align: center; ) #demo ( text-align: center; margin-top:20px ; ) #bg (baggrundsfarve:#000; position:relativ; overløb:skjult; display:inline-blok; width:500px; højde:70px; border-radius: 8px; border: 2px solid #777; ) #tekst ( position:absolute; text-align:center; width:500px; height:70px; line-height:68px; font-size: 28px; ) #text span ( -webkit-font-smoothing: antialiased; -moz-font- smoothing:antialiased; position:relative; display:inline-block; color:#FFF; ) #slider (display: inline-block; width: 500px; height:12px; margin:8px 0px 8px 6px; ) #kontrolknap ( width : 80px; ) #styrer input (display:inline; padding:2px; margin:2px;)

JS:

var $text = $("#tekst"), $pause = $("#pause"), $reverse = $("#reverse"), $genstart = $("#genstart"), $hastighed = $( "input"), $slider = $("#slider"), //"tl" er den skala, som vi vil tilføje vores animation til. //Så kan vi nemt styre hele animationssekvensen som ét objekt. tl = new TimelineLite((onUpdate:updateSlider, onComplete:onComplete, onReverseComplete:onComplete, paused:true)); funktion updateSlider() ( $slider.slider("værdi", tl.progress() * 100); ) funktion onComplete() (tl.pause(); $pause.html("play"); ) //gør noget enkel opdeling af teksten, så vi kan anvende animation til hvert //tegn (har ikke brug for de avancerede SplitText-funktioner, så brug bare split() og //join()) $text.html(" " + $text.html().split("").join("").split("").join("") + ""); //indstil perspektivet på beholderen TweenLite.set($text, (perspektiv:500)); //al animation oprettes på én linje : tl. staggerTo($("#text span"), 4, (transformOrigin:"50% 50% -30px", rotationY:-360, rotationX:360, rotation:360, ease:Elastic.easeInOut), 0,02) ; // skyder og knap kontrol $slider.slider((interval: falsk, min: 0, maks: 100, trin:.1, slide: funktion (hændelse, ui) ( tl.progress(ui.value / 100). pause() ; $pause.html("afspil"); ) )); $pause.click(function() (if (tl.paused()) (if (tl.progress() === 1 || ( tl.progress () === 0 && tl.reversed())) ( tl.restart(); ) else ( tl.resume(); ) $pause.html("pause"); ) else ( tl.pause (); $pause.html("resume"); ) )); $reverse.click(function() ( if (tl.progress() === 0) ( if (tl.reversed()) ( tl. play() ; ) else ( tl.reverse(0); ) $pause.html("pause"); ) else ( tl.reversed(!tl.reversed()).resume(); $pause.html(" pause") ; ) )); $restart.click(function())(tl.restart(); $pause.html("pause"); )); $speed.change(function(v, val) ( tl.timeScale(parseFloat($(this).val())); if (tl.progress() === 1) ( tl.restart(); $pause .html("pause"); ) else if (tl.paused()) (tl.resume(); $pause.html("pause"); ) ));

Moderne animation handler i høj grad om interaktivitet, så det er utrolig nyttigt at kunne animere fra foranderlige begyndelsesværdier til foranderlige slutværdier (afhængigt af, hvor brugeren f.eks. klikker) eller ændre noget på farten, men deklarative animationer er CSS-baserede, tillader det dig ikke at gøre dette.

Arbejdsprocessen

For simple overgange mellem to tilstande (for eksempel vending eller udvidelse af en menu osv.) er CSS-transformationer gode.

For en række af hændelser skal du dog typisk bruge CSS-animationer med keyframes, hvilket vil kræve procentvælgere, for eksempel:

CSS:

@keyframes myAnimation ( 0% ( opacitet: 0; transform: translate(0, 0); ) 30% ( opacitet: 1; transform: translate(0, 0); ) 60% ( transform: translate(100px, 0); ) 100% ( transform: translate(100px, 100px); ) ) #box ( animation: myAnimation 2.75s; )

Men når du opretter en animation, fokuserer du så ikke på tidsintervaller frem for procenter? For eksempel, " øg gennemsigtigheden i 1 sekund, skub derefter til højre i 0,75 sekunder, og hop derefter ned i det resterende sekund».

Hvad sker der, hvis du bruger timer på at beregne en kompleks sekvens af procenter, og klienten så siger, " Gør den del i midten 3 sekunder længere"? Uh, du bliver nødt til at genberegne ALLE procenterne!

Typisk involverer bygning af animationer en masse eksperimenter, især med timing og lette funktioner.

Dette er relevant, hvor seek()-metoden ville være ret nyttig. Forestil dig, at du laver en 60 sekunders animation stykke for stykke og derefter skærer ind på de sidste 5 sekunder: du skulle sidde igennem de første 55 sekunder, hver gang du ville se resultatet af dine justeringer i de sidste dele.

Åh! Med seek()-metoden kan du blot henvise til en bestemt placering i animationen, mens du arbejder på at komme til den del, du arbejder på, og derefter slette den, når du er færdig. Dette er en betydelig tidsbesparelse.

At skabe animationer til lærredsbaserede objekter og andre tredjeparts biblioteksobjekter er ved at blive udbredt, men desværre er CSS-animationer kun beregnet til DOM-elementer.

Det betyder, at hvis du har investeret meget tid og energi i CSS-animationer, vil de ikke kunne overføres til andre typer projekter.

Du bliver nødt til at ændre dit animationsværktøjssæt.

Der er et par andre praktiske workflow-relaterede værktøjer, som CSS-animationer ikke inkluderer:

• Relative værdier. For eksempel, " dreje 30 grader mere"eller" flytte elementet 100 pixels ned fra, hvor det var, da animationen startede»;
• Indlejring. Forestil dig at kunne lave animationer, der kan indlejres i en anden animation, som selv kan indlejres osv. Forestil dig at styre hovedanimationen, mens alt andet forbliver fuldstændig synkroniseret. En sådan struktur ville tilskynde til modulær kode, der er meget lettere at skabe og vedligeholde;
• Statusrapporten. Er en bestemt animation færdig? Hvis ikke, hvilket udførelsesstadium er det præcist på?
• Målrettede elimineringer. Nogle gange er det utrolig nyttigt at deaktivere alle animationer, der påvirker skalaen af ​​et element (eller enhver anden egenskab, du ønsker), mens du tillader alle de andre;
• Kort kode. Keyframe-baserede CSS-animationer er verbose, selv uden alle de redundante leverandør-præfiksversioner, der kræves. Enhver, der har forsøgt at skabe noget af selv moderat kompleksitet, vil vidne om, at CSS-animationer hurtigt bliver uhåndterlige og klodsede. Faktisk kan den faktiske mængde CSS-kode, der kræves for at udføre animationsopgaver, overstige vægten af ​​JavaScript-biblioteket (som er nemmere at cache og genbruge på tværs af mange animationer).

Begrænsede effekter

Du vil ikke være i stand til at gøre noget af følgende med CSS-animation:

• Animation langs en kurve (for eksempel en Bezier-kurve);
• Brug interessante blødgørende funktioner såsom elastisk, fjedrende eller grov blødgøring. Der er en cubic-bezier() mulighed, men den tillader kun to nøglepunkter, hvilket er meget begrænsende;
• Bevægelser i henhold til fysiske love. For eksempel jævn bevægelse baseret på inerti og let tilbagevenden, implementeret i denne Draggable-demo;
• Rul position animation;
• Retningsbestemt rotation (f.eks. " roter nøjagtigt 270 grader i den korteste retning, med eller mod uret»);
• Attribut animation.

Kompatibilitet

CSS-baserede animationer virker ikke i IE9 og tidligere browserversioner. De fleste af os hader at yde support til ældre browsere (især IE), men virkeligheden er, at nogle af os har klienter, der kræver det.

Det er nødvendigt at anvende præfikser for mange browsere, men du kan bruge forbehandlingsværktøjer for at undgå at skulle skrive dem manuelt.

Konklusion

Er CSS-animationer dårlige? Absolut ikke. Faktisk er de gode til simple tilstandsovergange (såsom flipping), hvor kompatibilitet med ældre browsere ikke er påkrævet.

3D-transformationer har generelt god ydeevne (iOS7 er en bemærkelsesværdig undtagelse), og CSS-animationer kan være meget attraktive for udviklere, der foretrækker at lægge al animations- og præsentationslogikken i et CSS-lag.

JavaScript-baserede animationer giver dog meget større fleksibilitet, en mere behagelig udviklingsproces for komplekse animationer og rig interaktivitet, og ofte er JavaScript-baserede animationer lige så hurtige (eller endda hurtigere) end CSS-baserede animationer, selvom du måske har hørt.

Jeg kan se, hvorfor CSS-animationer var så attraktive sammenlignet med jQuery.animate() . Hvem ved deres rette sind ville ikke springe på muligheden for at få en 10x stigning i produktiviteten?

Der er ikke længere behov for at vælge mellem jQuery- og CSS-animationer; JavaScript-baserede værktøjer som GSAP åbner helt nye muligheder og lukker ydeevnegabet.

Denne artikel handler ikke om GSAP eller noget specifikt bibliotek; Moralen i artiklen er, at JavaScript-baserede animationer ikke fortjener den dårlige rap. Faktisk er JavaScript den eneste mulighed for et virkelig robust og fleksibelt animationssystem.

Derudover ville jeg kaste lys over nogle af de frustrerende aspekter af CSS-animationer (som ingen taler om), så du nu kan træffe mere informerede beslutninger om, hvordan du opretter animationer.

Vil Web Animations-specifikationen løse eksisterende problemer?

W3C arbejder på en ny specifikation kaldet "Web Animations", der har til formål at løse mange af manglerne i CSS-animationer og transformationer, hvilket giver bedre udførelseskontrol og yderligere funktionalitet.

Dette virker selvfølgelig som et fremskridt i mange henseender, men der er stadig en række mangler (hvoraf nogle formentlig er umulige at overvinde på grund af behovet for at understøtte ældre versioner af eksisterende CSS-specifikationer, så f.eks. uafhængig kontrol af transformationskomponenter er usandsynlig).

Selvom dette er en helt anden historie. Vi må vente og se, hvordan tingene fungerer. Der er helt sikkert kloge fyre, der arbejder på denne specifikation.

Denne publikation er en oversættelse af artiklen " Myth Busting: CSS Animations vs. JavaScript", udarbejdet af det venlige projektteam

Med udtrykket "animation" mener vi oftest animerede film - de "tegnefilm", vi har elsket siden barndommen. Men hvis vi ser på den forklarende ordbog, finder vi ud af, at det oversat fra fransk betyder "genoplivning", "animation". Og her viser det sig, at denne betydning overraskende præcist passer ikke kun til filmindustrien, men også webteknologier.

Brug af forskellige animationseffekter(overgange, bevægelser, transformationer osv.) "opliver" webstedet betydeligt, giver dig mulighed for at kontrollere brugerens opmærksomhed, skifte den til det nødvendige element og give visse visuelle signaler.

Når man taler om animation, kan man ikke undlade at nævne de velkendte 12 principper, som er formuleret af animatorerne i Disney-studiet, hvis brug er ekstremt vigtigt for en rimelig og høj kvalitet brug af animationseffekter.

Taler om teknologier, der giver ved hjælp af animation på websider, flere kan skelnes, men måske er ingen af ​​dem så kraftfulde som . For blot et par år siden var Flash-animationsteknologi en formidabel konkurrent og meget populær. Men nu ser det ud til, at dets bedste år er bagud, og det bliver gradvist erstattet fra siderne på websteder med mere kraftfulde og fleksible Java-scripts. Og hvis du beslutter dig seriøst brug animation på din hjemmeside, så skal du satse på JavaScript. Og for at kunne træffe et smart valg af bibliotek lavede jeg dagens anmeldelse.

Dynamics.js

Jeg skal nok starte med Dynamics.js. Dette er et seriøst og kraftfuldt bibliotek, der giver dig mulighed for at skabe fysisk realistisk animation (såsom harmoniske dæmpede svingninger af et punkt på hovedsiden af ​​et websted). Biblioteket er i stand til at administrere egenskaberne for ethvert DOM-element. Dynamics.js bruges til at oprette menuer, knapper, procesindikatorer, markører. I dette tilfælde er en lang række parametre tilgængelige, såsom frekvens, dæmpningsreduktion, parametre, der karakteriserer elasticitet eller procesvarighed osv.

Cta.js

Lille i volumen cta.js bibliotek tilsigtet for at skabe animationseffekter på siden"action-effect" type, dvs. at holde musemarkøren over eller klikke på et objekt frembringer en bestemt effekt. Det er meget praktisk at bruge, når du udvikler flisebelagte grænseflader, når klik på et element fører til dets åbning som et modalt vindue, på hele siden eller som et sideskydepanel.

Beep.js

Et interessant bibliotek, der bruger WebAudio API til at skabe en musiksynthesizer på en side. Kan bruges til at udvikle en online musikbog eller som et sjovt legetøj.

Rainyday.js

Utrolig smuk regneffekt med dråber i forskellige størrelser, der flyder ned. Men efter min mening mangler store dråber realisme (måske den samme fysik, som er til stede i Dynamics.js?). Den eksisterende API giver dig dog mulighed for at oprette dine egne objekter og kontrollere deres adfærd, hvilket skaber endnu mere utrolige effekter.

Dom-Animator.js

Dom-Animator.js er et såkaldt "påskeæg". Effekten, det frembringer, er ikke synlig for det "nøgne" øje, dvs. for dem, der ser siden i et almindeligt browservindue. Men dem, der analyserer din kode, vil se den i konsollen (hvis du stadig ikke forstår, hvad vi taler om, er der en video her, der vil gøre alt klart).

Berømt

Berømt - begivenhedsdrevet JS-bibliotek til at skabe moderne animation. Den har en kraftfuld geometrisk kerne, der giver dig mulighed for at manipulere forskellige 3D-objekter - punkt- og volumetriske - påføre kræfter og accelerationer på dem, pålægge begrænsninger og kontrollere kollisioner.

Bounce.js

Ikke dårligt JavaScript-bibliotek til at skabe imponerende animationer ved hjælp af CSS. Giver dig mulighed for at anvende forskellige typer bevægelse, rotation, skalering og transformation til objekter.

Snabbt.js

Et let og hurtigt bibliotek, der ifølge udviklerne producerer 60 fps selv på mobile enheder. Ved hjælp af transformationsmatricer giver CSS dig mulighed for at flytte, rotere, skalere og udføre andre manipulationer med objekter. Det giver dig også mulighed for at anvende specielle effekter på objekter, der tiltrækker opmærksomhed, som kan bruges, når du udfylder formularer.

Rekapi

Rekapi giver dig mulighed for at bruge begge dele CSS keyframe animation(@keyframes-regel) og DOM-animation ved hjælp af JavaScript. Dette bibliotek giver dig mulighed for at skabe ret komplekse dynamiske objekter, såsom cirkel- og linjediagrammer, tidslinjer og andre brugergrænsefladeelementer.

Skiftende

Shifty er et bibliotek, der indeholder alt, hvad du har brug for til en komplet keyframe animation(det såkaldte "twinning"), og antallet af objekter kan simpelthen være enormt. Det er et bibliotek på lavt niveau, der kan bruges som en kerne til platforme eller biblioteker på højere niveau. Faktisk bruges Shifty som kernen i førnævnte Rekapi.