Forskningspapir animation i javascript. Lovende JavaScript-biblioteker og plugins til animation

Med udtrykket "animation" mener vi oftest animerede film - de "tegnefilm", vi har elsket siden barndommen. Men hvis man ser nærmere på Ordbog, så lærer vi, at oversat fra fransk betyder det "genoplivning", "animation". Og her viser det sig, at denne betydning overraskende præcist passer ikke kun til filmindustrien, men også webteknologier.

Brugen 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 vi 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 de rimelige og kvalitetsbrug animationseffekter.

Når vi taler om teknologier, der muliggør brugen af ​​animation på websider, kan vi fremhæve flere, 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 hun bedste år bag, og det bliver gradvist erstattet fra hjemmesidens sider af mere kraftfulde og fleksible Java-scripts. Og hvis du beslutter dig for seriøst at bruge animation på dit websted, så bør du stole på JavaScript. Og for at kunne træffe et smart valg af bibliotek lavede jeg dagens anmeldelse.

Dynamics.jsJeg starter med Dynamics.js. Dette er et seriøst og kraftfuldt bibliotek, der giver dig mulighed for at skabe fysisk nøjagtige animationer (såsom harmoniske dæmpede svingninger peger på hjemmeside 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.jsDet lille cta.js-bibliotek er designet til at skabe animationseffekter af typen “action-effect” på siden, dvs. At holde musemarkøren over eller klikke på et objekt frembringer en bestemt effekt. Meget praktisk at bruge under udvikling flisebelagte grænseflader, når du klikker på et element får det til at udvides som modal vindue, hel side eller som sidebjælke.

Beep.jsEt interessant bibliotek, der bruger WebAudio API til at skabe en musiksynthesizer på en side. Kan bruges til at udvikle en online musiklærebog eller som et sjovt legetøj.

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

Dom-Animator.jsDom-Animator.js er den såkaldte " Påskeæg"(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).

FamousFamous er et begivenhedsdrevet JS-bibliotek til at skabe moderne animation. Den har en kraftig 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.jsIkke dårligt JavaScript bibliotek at skabe imponerende animationer med ved hjælp af CSS. Giver dig mulighed for at anvende på objekter forskellige slags bevægelse, rotation, skalering og transformation.

Snabbt.jsEt let og hurtigt bibliotek, der ifølge udviklerne producerer 60 fps selv kl. 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.

RekapiRekapi giver dig mulighed for at bruge begge dele CSS animation keyframes (@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.

ShiftyShifty er et bibliotek, der indeholder alt, hvad der er nødvendigt for fuldgyldig keyframe-animation (den 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.

Hej alle! Med denne artikel åbner jeg en række publikationer om emnet at skabe animationer i rent javascript.

Hvorfor gør animationer i ren js overhovedet?

du kan blive forfærdet. Der er trods alt mange biblioteker, for eksempel vores yndlings jQuery. Sådan er det, men det er nyttigt at kunne skrive rene animationer i disse situationer.

En lille hjemmeside bliver lavet med et minimum af effekter. Tredjepartsbiblioteker er ikke inkluderet. Og pludselig er der behov for jævnt at opløse et element, når der klikkes. Er det værd at forbinde jQuery på grund af en sådan bagatel!? Mange vil forbinde og faktisk gøre det rigtigt – i moderne verden 86Kb er ikke interessant for nogen. Men når man arbejder i et team er der Sådanne stædige teamledere, der ikke vil tillade at introducere et tredjepartsbibliotek i projektet på grund af lille animation. Så du skal selv finde ud af animation.

Brugt klar bibliotek, og det indeholder ikke den ønskede effekt. For eksempel skal elementet dreje med uret tre gange, hoppe og derefter opløses, før det forsvinder. I dette tilfælde biblioteket skal udvides, og igen skal du have en forståelse af det grundlæggende i at organisere animationseffekter.

Derfor vil det tydeligvis ikke være overflødigt at forstå, hvordan animationer til elementer er organiseret. I denne artikel vil vi se på de grundlæggende teknikker og enkleste eksempel- lad os skrive en funktion, der nemt kan skjule et DOM-element, hvilket reducerer dets gennemsigtighed.

I sandhed, sådan en tilgang til simple animationer allerede kan betragtes som forældet. Det er bedre at lave animationer ved hjælp af CSS og med ved hjælp af javascript styre starten og slutningen af ​​animationen.

Vi vil have to filer: index.html og script.js. HTML-dokumentet er meget enkelt:

JS #item( bredde: 300px; højde: 200px; baggrund: #f9b; margin: 20px; )

Vi lavede en div 300x200 pixels, fyldte den med farve, gav den en lille margen og tildelt id=item. Vi behøver ikke mere lige nu.

Organisering af animation i javascript.

Lad os nu organisere arbejdet i js. Lad os først vedhæfte en begivenhed til vores div:

// Efter indlæsning af dokumentet window.onload = function())( // Når du klikker på et element med id=item document.getElementById("item").onclick = function())( // display an alert alert( 1);

Et par kommentarer til dette design. Vi placerer traditionelt al javascript-kode i et funktionssæt til window.onload-hændelsen. Derfor venter vi på den endelige indlæsning af dokumentet og dannelsen af ​​DOM - objektmodel dokument.

Derefter får vi ved at bruge document.getElementById en div med id=item og indstiller onclick-hændelsen, som vil udløse en verifikationsalarm. Faktisk vil vi i stedet for en advarsel lidt senere her placere et opkald til fade-funktionen, som vi nu vil begynde at overveje.

Så hvad har vi brug for til animation? Lad os prøve straks at tænke på en grænseflade til funktionen, der vil gøre den virkelig praktisk i fremtiden! Du får noget som dette:

// Funktion til at opløse et element: // elem - DOM-objekt // t - animationstid // f - antal billeder pr. sekund funktion fade(elem, t, f)( // kode)

Faktisk har enhver animation et element, som den er produceret på, og en tid, hvor vi ser jævne ændringer. Men hvad er disse billeder på få sekunder?

Her skal du først forstå, hvordan animation opstår generelt. Animation er simpelthen en trinændring i en visuelt mærkbar værdi med et bestemt interval. Denne værdi for os er opacitetsegenskaben - elementets gennemsigtighed. Og vi opretter intervallet ved hjælp af standarden javascript funktioner- sæt Interval.

Så denne funktion tager som sin anden parameter den tid i millisekunder, hvorefter den skal gentage sin udførelse. Det viser sig, at hvis vi skriver:

SetInterval(function())( advarsel(1); ), 20);

så vil vi se en advarsel hvert 20. millisekund. Hvad hvis vi skriver

SetInterval(function())( advarsel(1); ), 50);

derefter hver 50 ms.

Dette relaterer sig meget nemt til billeder per sekund. Der går tusind millisekunder på et sekund, hvilket betyder, at hvis vi vil vise en person 50 billeder i sekundet, så er 1000 / 50 = 20 ms - hvert 20. millisekund skal vi gentage handlingerne i intervallet.

Baseret på ovenstående kan vi allerede skildre den grundlæggende rygrad i vores funktion:

Funktion fade(elem, t, f)( // billeder pr. sekund (standard 50) var fps = f || 50; // animation køretid (standard 500ms) var time = t || 500; var timer = setInterval (funktion ())( // skift opacitet // hvis animationen er færdig if(/* check */)( // fjern udførelsesintervallet clearInterval(timer); // og fjern elementet fra dokumentflowet elem.style.display = "ingen" ; ) ), (1000 / fps) )

Konstruktioner var fps = f || 50 og var tid = t || 500 erklærer standardparametre. Det vil sige, hvis vi ikke sender det andet og tredje element til funktionen, når vi kalder, vil deres værdier være lig med henholdsvis 50 og 500.

Designet af selve setInterval-organisationen er også logisk. Vi indstiller intervallet med en frekvens på 1000/fps. Når animationen er færdig, skal vi fjerne dette interval.

Vær opmærksom på linjen elem.style.display = "ingen"! Denne instruktion er nødvendig, så efter at elementets opacitet er nulstillet, vil den frigøre plads. Hvis dette ikke gøres, vil elementet ikke være synligt, men dets plads vil forblive tom - de nederste elementer vil ikke flytte dertil.

Det er næsten færdigt! Alt, hvad vi skal gøre, er at tilføje en ændring til den synlige egenskab og kontrollere, om animationen er fuldført.

Sådan organiserer du ændringer korrekt opacitetsegenskaber. Matematikken her er grundlæggende. Vi har tid og rammer i sekundet. For eksempel er tid = 2000 og antal billeder pr. sekund fps = 50. fps = 50 betyder, at vi vil vise en frame hver 1000 / fps millisekund, dvs. 1000/50 = 20.

Det betyder, at vi i alt vil vise brugeren n = tid / (1000 / fps) = 2000 / (1000 / 50) = 1000 billeder. Det viser sig, at vi også skal ændre værdien af ​​opacitetsegenskaben 1000 gange. Husk, at opaciteten varierer fra x0 = 0 til x1 = 1. Den generelle formel er dx = (x1 - x0) / (tid / (1000 / fps)). For at sige det enkelt dividerer vi 1 med 1000 og får 0,001.

Lad os sætte alt dette ind i kode:

Funktion fade(elem, t, f)( // billeder pr. sekund (standard 50) var fps = f || 50; // animation køretid (standard 500ms) var time = t || 500; // hvor mange i alt vis frames var steps = tid / (1000 / fps); ) / / for eksempel, 50fps -> 1000 / 50 = 20ms var timer = setInterval(function())( // reducer den aktuelle opacitetsværdi op -= d0; // sæt opacitet til DOM-elementet elem.style.opacity = op; // reducere antallet af resterende animationstrin--; // hvis animationen er færdig if(trin