Forskningspappersanimation i javascript. Jämförelse av animation med CSS och JavaScript

07.02.2016

Om du nu är i en situation där du behöver skapa en imponerande animation för en webbplats, kommer detta inlägg definitivt att ge dig användbara verktyg.

Hej kompisar! I den här artikeln inbjuder jag dig att kolla in mitt urval av fantastiska CSS-bibliotek och JS-plugins som hjälper dig att implementera de mest kompatibla animationerna på din webbplats på några minuter.

JavaScript-plugins för animering

Om du vill skapa animationer som utlöses av någon händelse eller åtgärd, så kommer JavaScript-animationsplugins att hjälpa dig mycket med detta. Men det är värt att notera att de flesta av dessa animationer är skrivna i CSS3 och kontrolleras med JavaScript.

AniJS

Dynamics.js

Dynamic.js är JavaScript-bibliotek för att skapa fysikbaserade animationer.

mo.js

mo.js är ett utmärkt bibliotek för att skapa rörlig grafik. Du såg ofta ett exempel på sådan grafik när Google lade upp en ny tematisk logotyp (doodle), som animerades när du höll muspekaren eller klickade.

cta.js

cta.js - JavaScript-plugin för att skapa animerade uppmaningar. Många av dem ser väldigt imponerande ut.

animo.js

animo.js - kraftfullt verktyg för att hantera CSS3-animationer.

html5tooltips.js

html5tooltips.js - gamla bra verktygstips med modern design och animering utan beroenden, anslut och använd.

Raket

Rocket är ett intressant JS-bibliotek som låter dig animera ett elements väg till ett mål.

scrollReveal.js

scrollReveal.js är ett plugin som låter dig animera element när du rullar en sida.

Wow.js

Wow.js är en annan javascript plugin för att styra animering när du rullar på sidan.

Genomresa

Transit är ett jQuery-plugin för att jämna ut övergångar och transformationer som tillhandahålls i jQuery.

parallax.js

parallax.js är ett plugin som reagerar på smartphonens position i rymden, baserat på detta styr den indragningen, positionen och djupet av lager. Om enheten inte har ett gyroskop, görs beräkningar baserat på muspekarens position. Med två ord - avancerad parallax!

Slug

Sly - JavaScript-bibliotek för att skapa en enkelriktad rullning med implementerad bitvis navigering. Det kan verka komplicerat i ord, jag rekommenderar att du bara tittar på ett exempel.

Move.js

Move.js är ett litet JavaScript-bibliotek för att skapa anpassade CSS3-animationer.

slidr.js

slidr.js är ett lättanvänt och lätt JavaScript-bibliotek för att skapa en vertikal och samtidigt horisontell reglage.

CreateJS

CreateJS är en uppsättning modulära bibliotek och verktyg som kan arbeta tillsammans eller oberoende för att berika innehåll med interaktivitet. Funktionaliteten hos dessa bibliotek gör att du kan skapa fantastiska webbplatser och applikationer, var noga med att kolla in demos.

Flippant.js

Flippant.js - JavaScript-plugin för att skapa element med effekten av rotation runt deras axel.

jmpress.js

jmpress.js är ett JavaScript-bibliotek med en unik idé om att skapa en webbplats på en ändlös HTML5-duk. Idén är värd att uppmärksammas.

CSS3-bibliotek

Erfarna utvecklare har redan tagit hand om att skapa ett bibliotek med CSS3-animationer åt oss under lång tid. Nu kan vi helt enkelt ta dem och tillämpa dem i våra projekt och vara säkra på deras effektivitet.

Med tillkomsten av CSS3-animationer har HTML-dokument blivit mycket mer attraktiva och lättare att utveckla. Med @keyframes-regeln kan du enkelt definiera olika parametrar, inklusive HTML-elementets plats och storlek. Animationsparametern är i sin tur ansvarig för att starta och flytta nyckelbildrutor beroende på vissa parametrar. Utan att behöva använda javascript och plugins kan vi enkelt skapa även de mest komplexa animationer som kommer att fungera väldigt smidigt i alla moderna webbläsare.

Problem uppstår när du behöver använda javascript för att utveckla CSS3-animationer. Vi vet alla att javascript i de flesta fall är den första nödvändigheten som gör att vi kan beräkna individuella värden eller hela animeringsprocessen.

Kombinera CSS och javascript med den nya metoden animate().

Den nya metoden javascript animate() låter oss styra animationer genom ett skript. Naturligtvis behöver vi fortfarande använda en hel massa CSS-parametrar för att definiera våra nyckelbilder.

(höjd: "0"),
(höjd: "100%")
], {
varaktighet: 3000,
iteration: 2,
försening: 1000
});
I exemplet ovan bifogar vi en animate()-metod till elementet. Inuti hakparentes Så många tillstånd för en given parameter definieras som vi behöver, och i vårt exempel kommer vi att arbeta med höjd. Varje värde skrivs som en objektbokstav, och värdena används endast för en enskild parameter. Kombinationer som bredd och höjd är inte tillåtna. Observera att själva värdena måste citeras och formateras i javascript-kompatibel syntax, vilket innebär att man använder "bakgrundsfärg" istället för "bakgrundsfärg". I en annan bokstav i objektet, omedelbart efter att ha stängt hakparenteserna, definierar vi ytterligare animering. Vi vill ändra längden på animeringen med varaktighet, frekvensen av repetitioner med iteration, och kan valfritt definiera en fördröjning med hjälp av fördröjningsparametern - denna parameter bestämmer ögonblicket när animeringen ska starta. Alla tidsvärden anges i millisekunder.

Vi hanterar uppsättningen nyckelramar och deras varaktighet

Vi måste köra metoden animate() separat från varje parameter vi behöver ändra. Det betyder att om vi vill ändra både höjd och bredd måste vi köra animate() igen.

Document.getElementById("element").animate([
(bredd: "0", offset: 0),
(bredd: "10%", offset, 1/3),
(bredd: "100%", offset: 1)
], {
varaktighet: 3000,
iteration: 2,
försening: 1000
});
I exemplet ovan ändrar vi elementets bredd. Bredden bör variera från 0, gå upp till 10 procent och sedan sluta när den når 100 procent. Allt detta kommer att åtföljas smidig animering, naturligtvis. Ytterligare parameter offset anger att ändringar från 0 till 10 procent tar 1/3 av den totala animeringstiden och att gå från 10 till 100 tar 2/3 av den totala animeringstiden. Och samtidigt bestäms den totala varaktigheten av animeringen av varaktighetsparametern. I I detta fall, kommer den första delen att äga rum under loppet av en sekund, och den andra - under loppet av 2.

Istället för att ange värdet som en bråkdel kan du också använda decimaltal. Du måste använda siffror från 0 till 1. Till exempel, istället för 1/3 kan du använda 0,33.

Fler animationsalternativ

Om du är bekant med CSS3-animationsparametern, vet du förmodligen att animate()-metoden låter dig styra animeringsprocessen. Du kan ändra riktningen, hastigheten på animeringen och dess acceleration. Om du vill specificera att animeringen efter att ha avslutats ska återgå till början kan du göra det.

Document.getElementById("element").animate([
…
], {
varaktighet: 3000,
iteration: 2,
fördröjning: 1000,
riktning: "omvänd",
easing: "ease-in",
fyll: "framåt"
});
Riktningsvärdet innehåller information om riktningen för animeringen. Om du ställer in den på reversering kommer animeringen att spelas omvänt. Det alternativa värdet gör att du kan spela upp animationen i standardriktningen och sedan i motsatt riktning. Och det alternativa-omvända värdet kombinerar de två sista värdena.

Lättnadsvärdet låter dig använda de vanligaste modifieringsfunktionerna som redan är välkända från CSS3, eftersom du kan hitta ease-in, ease-out och så vidare. Som standard är varje animering inställd på att köras linjärt, utan acceleration eller retardation. Fyllningsvärdet avgör vad som kommer att presenteras efter att animeringen är slut. Som standard bör animeringen återgå till startpunkten. När du använder framåtvärdet kommer animeringen att stanna vid den sista nyckelbildrutan.

Animationskontroll

Genom att använda animate() på en variabel kan vi styra animeringen med javascript. Vi kan starta och stoppa det efter eget gottfinnande.

Var animation = document.getElementById("element").animate([
(höjd: "0"),
(höjd: "100%")
], {
varaktighet: 3000,
iteration: 2,
försening: 1000
});

document.getElementById("animation_start").addEventListener("klick", function() (
animation.play();
), falskt);

document.getElementById("animation_pause").addEventListener("klick", function() (
animation.pause();
), falskt);
I vårt exempel kopplar vi animationen till animationsvariabeln, konstigt nog. Sedan kopplar vi 2 eventlyssnare till elementen med id animation_start och animation_pause. Dessa lyssnare kommer att ta hand om att utföra vissa funktioner när de klickas. Play startar animeringen, paus är redan tydligt vad den gör, och omvänd tar dig omedelbart till den sista nyckelram och kommer att stoppa animeringen helt.

Hej, det är javascript. Naturligtvis har vi en evenemangslyssnare som låter oss reagera på slutet av animationen. Vi kan implementera detta med finish. Innerfinish måste du definiera lämplig funktion.

Animation.addEventListener("finish", function() (
alert("Animeringen har avslutats.");
), falskt);
I exemplet ovan skickar vi helt enkelt ett meddelande som indikerar att animeringen är klar.

Webbläsarstöd

animate() är för närvarande i tidig utveckling och har för närvarande den "experimentella" etiketten. Stöd för det här alternativet kommer att visas i Chrome från och med version 36. Om du vill prova det nu kan du ladda ner och installera Chrome Canary.

God dag. Här är en mycket bra samling av animerade bakgrunder för sajten i sju olika varianter. Animering handlar främst om rörelse, utseende och försvinnande av figurer, ord eller teckningar. Jag kommer att beskriva varje effekt separat och längst ner på varje animerad bakgrund kommer det att finnas en "Demo"-knapp och en "Download"-knapp, och längst ner på sidan kommer det att finnas en knapp för att ladda ner alla varianter + bonus: en en -sida där alla dessa bakgrunder presenteras på en sida. Och så, här går vi:

Animationsbakgrund, som jag kallade "Rounds"

Vi har en bild i bakgrunden som automatiskt anpassas till bildskärmens upplösning, och mot denna bakgrund finns det genomskinliga cirklar som "svävar" olika storlekar. De dyker upp och försvinner. Utseende, rörelse och försvinnande är helt slumpmässigt. Det ser stilrent ut, anstränger inte ögat och kan göra din sida mer livlig. Jag frågar bara - lägg inte en sådan animerad bakgrund på någonting, för om webbplatsen är rent informativ och det finns mycket information på den, nämligen text, så kommer en sådan bakgrund att vara lite distraherande och distrahera uppmärksamheten.

Ladda ner demo

Animationsbakgrund "Stjärnhimmel"

Förverkligandet av stjärnhimlen med använder jquery, html och css. Animationen är av tillräckligt bra kvalitet, den kan bytas ut bakgrundsbild på natthimlen och effekten blir ännu svalare. Försök :))

Ladda ner demo

Bakgrundseffekt "Squares"

Ingen dålig 3D-effekt, speciellt med bilden som redan finns i demoversionen. Det kan verka klumpigt, men du kan alltid experimentera och göra rutor eller andra former med hjälp av css och göra det som du vill. Denna animationseffekt fungerar på samma sätt som andra effekter.

Ladda ner demo

Bakgrundsanimation med trianglar

Förmodligen den mest misslyckade implementeringen av denna effekt, men det kan vara användbart för någon!

Ladda ner demo

Animerad bakgrund med kodnamnet "Word"

Något nytt har kommit. Här implementerar vi animering av ord som kan ändras i en js-fil. Det ser intressant ut och jag tror att det kan vara användbart för många. Jag tror att det finns många alternativ för att använda en sådan bakgrundseffekt på en webbplats. Låt oss ta det!

Ladda ner demo

Bakgrundseffekt som kärleksfullt heter "Bubbles"

Fin bakgrundseffekt, som bubblor. De ökar i storlek och försvinner sedan. Det verkar verkligen som bubblor spricker.

Ladda ner demo

Som ett band som blåser i vinden skapar denna bakgrundseffekt intrycket av att denna "figur" ritas in online-läge. Vackert sammanflätade tenderar detta mönster att öka i storlek och på ungefär en minut kommer det att täcka hela bakgrundens yta. Se demon och ladda ner!

Ladda ner demo

Jag tror inte att du någonsin har letat efter något liknande, men jag har personligen alltid velat dekorera någon form av reklamsajter animerad bakgrund ungefär samma som "Rounds". I denna sammanställning hittar du en bakgrundseffekt för dig själv.

Och det var precis vad jag pratade om. Om du klickar på "Demo" kommer du att föras till en sida med en fullfjädrad ensidig webbplats, där alla alternativ för bakgrundsanimationseffekter i den här artikeln presenteras. Och om du klickar på knappen "Ladda ner" kommer du att ladda ner ett arkiv med alla alternativ för animerade bakgrunder och plus en webbplatsmall på en sida. Med vänliga hälsningar!

Detta material ägnas åt animering på HTML-sidor, animationsprestanda, framtidsutsikter för användning samt animering i HTML5 mobilapplikationer och spel.

Javascript-animation

Först av allt, låt oss börja med att titta på JS-animation på HTML-sida. Animation i JavaScript kan utföras antingen med setInterval, med vilket du kan ställa in statiska bildrutor per sekund, eller med en vanlig funktion som i slutet anropar sig själv eller med window.requestAnimationFrame.

Här enkel logik animation fungerar i JS:

var el=document.getElementById("elem");
mar=10; //statiska initiala data
//cykeln börjar
mar=mar+1;
el.style.marginLeft=mar+"px";
//loop slutar

Det fina med JS är att du kan på ett bekvämt sätt utöka de inbyggda verktygen och använd till exempel jQuery-animation eller använd Velocity. Detta ökar produktiviteten avsevärt. Speciellt Velocity använder dock inte JS för animering, utan själva animeringen utförs där i CSS, vilket kommer att diskuteras nedan.

SVG-animation

Vi kan inte låta bli att nämna SVG-animation. Själv är hon väldigt bra, men mobila webbläsare Det fungerar inte. Eller rättare sagt, bara SMIL fungerar på Android 3.0-högre. Hur obehagligt det än kan vara att säga så fungerar SVG själv i WebView-metoden, men allt som har med animation att göra i denna tagg, tyvärr...

Var hon än jobbar visar hon bra framträdande. Se efter själv.

style="stroke:#ff0000; fill: #0000ff">
attributeName="transform"
start="0s"
dur="10s"
type="rotera"
from="0 60 60"
to="360 60 60"
repeatCount="obestämd"
/>

En utmärkande egenskap är att det inte finns några pixlar inuti SVG, utan snarare några abstrakta värden. När du har angett höjden och bredden på svg-elementet kan du ange ett viewbox-attribut, med vilket du kan justera positionen för de inre elementen och deras relativa storlek. SVG kan göras till valfri längd och bredd och den kommer att justera de interna objekten för att passa storleken på visningsrutan.

Canvas animation

Denna typ av animering är mycket vanlig i webbläsare på vanliga datorer, särskilt när man skapar spel. Nackdelarna är:

1. Brist på DOM-identifiering för element.

2. Ju högre upplösning, desto lägre prestanda.

I mobila webbläsare fungerar canvasanimering inte smidigt.

CSS-animering

Låt oss titta på animering med CSS3. Som ni vet, i CSS3 kom vi till en fantastisk animeringsegenskap med vilken du helt kan animera vissa objekt.

Hur går det till? Till exempel vill vi flytta #obj-elementet till höger med 300 pixlar och flytta det bakåt, så att animeringen loopar på obestämd tid. Med CSS3 har detta blivit en mycket enkel operation.

Förutom standardbredden och -höjden tilldelar vi objektet följande egenskaper:

Webkit-animation: 3s rörlig linjär oändlig;
animation: 3s rörlig linjär oändlig;

För större kompatibilitet över webbläsare ställer vi in ​​två egenskaper för objektet, i vilka 3s - 3 sekunder för att slutföra hela animeringen, flytta - namnet på animationen som appliceras på objektet (mer information nedan), linjär - en flagga som gör att objektet rör sig med samma hastighet i alla områden, oändligt - flagga som gör animationen oändlig.

Nåväl, låt oss nu beröra själva den rörliga animationen. Det kommer att behöva skrivas i samma CSS-fil där du tillämpar det. Tidigare, och även nu, använder vissa människor vänster/höger/överst/botten eller marginalparametrarna för att flytta ett objekt över skärmen. Detta är faktiskt ganska dålig praxis och bör inte göras eftersom det är lite ooptimerat - du kan uppnå smidigare rörelse med andra CSS3-egenskaper. Dessa egenskaper är translatex och translatey.

/*Dålig animation*/
@-webkit-keyframes flyttar (
från (marginal-vänster: 0;)
50 % (marginal-vänster: 300px;)
till (marginal-vänster: 0;)
}

/*Bra animation*/
@-webkit-keyframes flyttar (
från (omvandla: translatex(0);)
50 % (omvandla: translatex(300px);)
till (omvandla: translatex(0);)
}

Det bör också noteras att övergång i händelser som hovring också fungerar mycket bra på mobila enheter. Tja, i allmänhet kan du bifoga samma övergång eller CSS3-animation till vilket element som helst med JS. I det här fallet får du det bästa alternativet (JS anger vad som ska animeras, CSS-animerar).

Eftersom så är fallet använder de oftast ramverk och verktyg som underlättar utvecklingen när de skapar spel. En av dessa är Sencha Animator, som låter dig göra olika saker med hjälp av CSS och har ett användarvänligt gränssnitt.

Vad är bättre och snabbare: CSS-animation eller JS-animation?

Först kan vi gå lite djupare in i beräkningsdelen för att klargöra situationen lite. Javascript är ett tolkat språk och för att kunna köra det måste webbläsarens JS-motor ständigt analysera instruktionen (koden) under körningen och sedan konvertera den till maskinläsbar kod. Situationen med CSS är något annorlunda. Faktum är att det omedelbart kompileras till maskinspråk och visar därmed bättre prestanda i animering.

CSS-animering är som standard en storleksordning mer produktiv än Javascript, men det finns några nyanser när man använder JS ger en större prestandafördel.

Som det sägs i de senaste förslagen om CSS-animering, är det bättre att använda CSS för att bearbeta animering och JS för att indikera vad som ska bearbetas (helt enkelt genom att hänga till exempel på ett klasselement med de nödvändiga föreskrivna animationerna).

Det var en fråga om prestation, nästa fråga var relevans. Trots alla till synes fördelaktiga aspekter av CSS uppstår situationer där det är bättre att använda JS. Det händer.

Optimera animationsprestanda

Om du skapar en HTML 5-applikation på Android kan du prova följande:

Lägg till android:hardwareAccelerated="true" till dina aktivitetsparametrar

Detta kommer att ge acceleration på hårdvaran, GPU:n, med det här alternativet aktiverat, rusar in i arbetet och kommer, tillsammans med CPU:n, vara helt upptagen med att bearbeta din ansökan. Enda nackdelen är att batteritiden blir lite roligare.

Använd inte onclick-händelsen (även om den fungerar på pekskärmen). Faktum är att denna händelse orsakar en fördröjning på ungefär en tredjedel av en sekund, och för att undvika detta är det bättre att använda ontouchstart och ontouchend.

Var noga med att lägga till och skriva i kommentarerna det som inte nämndes i artikeln. Tillsammans kommer vi att skapa material av hög kvalitet på ryska.