Share
Anime.js är ett lätt JavaScript-baserat animationsbibliotek. Du kan använda den för att animera olika CSS-egenskaper, SVG- eller DOM-attribut på en webbsida. Biblioteket låter dig styra alla aspekter av animationen och ger många sätt för dig att ange de element som du vill rikta in eller de egenskaper du vill animera.
Du har full kontroll över sekvensen i vilken animationerna spelas eller hur synkroniserad animationerna av olika element är i förhållande till varandra. Biblioteket stöder alla moderna webbläsare, inklusive IE10+.
I den här handledningsserien lär du dig information om alla funktioner i Anime.js så att du enkelt kan använda dem i verkliga projekt.
Innan du dyker djupt in i ämnet, låt oss installera biblioteket först. Du kan använda antingen npm eller lövsal för att utföra installationen genom att köra följande kommandon:
npm installera animejs bower install animejs
Du kan också hämta biblioteket och inkludera det i ditt projekt eller direkt länka till den senaste versionen av biblioteket som finns på CDN.
Efter en lyckad installation, är du nu redo att använda det här biblioteket för att lägga till intressant animering till dina element. Vi kommer att börja med bibliotekets grunder, med fokus på ett visst område i taget.
För att skapa animeringar med Anime.js måste du ringa anime () funktionen och ge det ett objekt med nyckelvärdespar som anger de måldelar och egenskaper som du vill animera bland annat. Du kan använda mål nyckeln för att berätta för Anime.js vilka element du vill animera. Den här nyckeln kan acceptera värden i olika format.
CSS Selectors: Du kan skicka en eller flera CSS-väljare som ett värde för mål nyckel-.
var blue = anime (mål: '. blue', translateY: 200); var redBlue = anime (mål: '.red, .blue', translateY: 200); var even = anime (mål: '. square: nth-child (even)', translateY: 200); var notRed = anime (mål: '.square: not (.red)', translateY: 200);
I det första fallet kommer Anime.js att animera alla element med a blå klass. I det andra fallet kommer Anime.js att animera alla element med antingen röd eller blå klass. I det tredje fallet kommer Anime.js att animera alla jämna barn med a fyrkant klass. I det sista fallet kommer Anime.js att animera alla element med a fyrkant klass som inte har en röd klass.
DOM Node eller nodelist: Du kan också använda en DOM-nod eller en NodeList som ett värde för mål nyckel. Här är några exempel på att ställa in mål som en DOM-nod.
Accentsconagua
var special = anime (mål: document.getElementById ('special'), translateY: 200); var blue = anime (mål: document.querySelector ('. blue'), translateY: 200); var redBlue = anime (mål: document.querySelectorAll ('. röd, .blue'), translateY: 200); var even = anime (mål: document.querySelectorAll ('. square: nth-child (even)'), translateY: 200); var notRed = anime (mål: document.querySelectorAll ('. square: not (.red)'), translateY: 200);I det första fallet har jag använt getElementById () funktion för att få vårt speciella element. De querySelector () funktionen används för att få det första elementet som har den blå klassen. De querySelectorAll () funktionen används för att få alla element i dokumentet som matchar den angivna gruppen av väljare.
Det finns också många andra funktioner som du kan använda för att välja dina målelement som du vill animera. Till exempel kan du få alla element med ett visst klassnamn med hjälp av getElementsByClassName () fungera. På samma sätt kan du också få alla element med ett visst tagnamn med hjälp av getElementsByTagName () fungera.
Vilken funktion som returnerar en DOM-nod eller en NodeList kan användas för att ställa in värdet på mål nyckel i Anime.js.
Objekt: Du kan också använda ett JavaScript-objekt som ett värde för mål nyckel. Nyckeln till det objektet används som en identifierare, och värdet används som ett nummer som behöver animeras.
Du kan sedan visa animationen i ett annat HTML-element med hjälp av ytterligare JavaScript. Här är koden för att animera värdena på två olika nycklar till ett objekt.
var filesScanned = count: 0, infected: 0; var scanning = anime (mål: filesScanned, count: 1000, infected: 8, round: 1, uppdatering: function () var scanCount = document.querySelector ('scan-count'); scanCount.innerHTML = filesScanned.count ; var infectedCount = document.querySelector ('infected-count'); infectedCount.innerHTML = filesScanned.infected;);Ovanstående kod kommer att animera de skannade filerna räknas från 0 till 1000 och de infekterade filerna räknas från 0 till 8. Tänk på att du bara kan animera numeriska värden på det här sättet. Att försöka animera en nyckel från "AAA" till "BOY" kommer att resultera i ett fel.
Vi har också använt en återuppringningsfunktion för uppdatering nyckeln som kallas på varje bild medan animationen körs. Vi har använt det här för att uppdatera räkna av skannade och infekterade filer. Du kan dock gå ett steg längre och visa användarna ett felmeddelande när antalet infekterade filer går över ett visst tröskelvärde.
Array: Möjligheten att ange en JavaScript-array som målet är till nytta när du måste animera en massa element som faller under olika kategorier. Om du till exempel vill animera en DOM-nod, ett objekt och en massa andra element som är baserade på CSS-valörer, kan du göra det enkelt genom att placera dem alla inuti en matris och sedan specificera den matrisen som ett värde för mål nyckel. Följande exempel ska göra det tydligare:
var multipleAnimations = anime (mål: [document.querySelectorAll ('blue'), '.red, #special'], translateY: 250);Nu när du vet hur du anger olika element som du vill animera är det dags att lära dig om alla egenskaper och attribut som kan animeras med hjälp av biblioteket.
CSS Egenskaper: Anime.js kan du animera många CSS-egenskaper, som bredd, höjd och färg, för olika målelement. De slutliga värdena för olika animerbara egenskaper som bakgrundsfärg och kantbredd anges med hjälp av en kamelversionsversion av den egenskapen. Därför blir bakgrundsfärgen bakgrundsfärg, och kantbredd blir gränsbredd. Följande kodsekvens visar hur man animerar vänsterpositionen och bakgrundsfärgen på ett målelement i Anime.js.
var animateLeft = anime (mål: '. square', vänster: '50% '); var animateBackground = anime (mål: '. square', backgroundColor: '# f96');
Egenskaperna kan acceptera alla typer av värden som de skulle ha accepterat när de användes i vanlig CSS. Till exempel egendomen vänster kan ställas in på 50vh, 500px, eller 25em. Du kan också ange värdet som ett rent tal. I så fall omvandlas numret till ett pixelvärde. På samma sätt kan bakgrundsfärgen anges som ett hexadecimalt, RGB- eller HSL-färgvärde.
CSS Transforms: Du kan också animera olika CSS-omvandlingsegenskaper med Anime.js. Översättning längs x- och y-axlarna kan uppnås med hjälp av translateX och translateY egenskaper. På samma sätt är det möjligt att skala, skjuta eller rotera ett element längs en specifik axel med hjälp av skala, skev och rotera egendom som motsvarar den specifika axeln.
Du kan ange olika vinklar antingen i termer eller grader eller i termer av sväng. Värdet på 1 varv är lika med 360 °. Detta kan göra beräkningen enklare när du vet hur mycket du vill vrida elementen i form av fullständiga rotationer. Följande exempel visar hur man kan animera skalning, översättning eller rotation av ett element såväl individuellt som samtidigt.
var animateScaling = anime (mål: '. square', skala: 0,8); var animateTranslation = anime (mål: '. square', translateX: window.innerWidth * 0.8); var animateRotation = anime (mål: '. square', rotera: '1turn'); var animateAll = anime (mål: '. square', skala: 0,8, translateX: window.innerWidth * 0,8, rotera: '1turn');
SVG Attribut: Det är möjligt att animera attribut av olika SVG-element med Anime.js. Det enda villkoret är att värdet av dessa attribut ska vara numeriskt. Denna förmåga att animera olika attribut öppnar möjligheten att skapa några riktigt coola effekter. Eftersom du just börjat lära dig om Anime.js, kommer vi att behålla exemplen i den här handledningen väldigt grundläggande.
När vi går framåt lär du dig att skapa mer komplexa animationer. Här är koden för att animera cx, cy och stroke-bredd attribut av en cirkel. Precis som CSS-egenskaperna behöver du använda en camel case version av stroke-bredd för att koden ska fungera.
var animateX = anime (mål: '.circle', cx: window.innerWidth * 0,6); var animateStrokeWidth = anime (mål: '.circle', strokeWidth: '25');
DOM Attribut: Du kan också animera numeriska DOM-attribut, precis som du animerade SVG-attributen. En situation där animering av ett DOM-attribut kan vara användbart är HTML5-framstegselementet. Detta element har två attribut, värde och max. I vårt exempel kommer vi att animera värdeattributet för att visa framstegen i vår filöverföringsprocess. Här är koden för att animera värde attribut.
var animateProgress = anime (mål: 'progress', värde: 100, easing: 'linear');
I denna handledning lärde du dig om alla sätt att välja målelement i Anime.js och hur man animerar olika CSS-egenskaper och attribut relaterade till dem. Vid denna tidpunkt kontrollerar vi inte någonting som är relaterat till den faktiska animationen.
JavaScript är utan tvekan de språket på webben. Det är självklart inte utan sina inlärningskurvor, och det finns gott om ramar och bibliotek för att hålla dig upptagen, som du kan berätta. Om du letar efter ytterligare resurser att studera eller använda i ditt arbete, kolla vad vi har tillgängligt på Envato-marknaden.
I nästa handledning i serien kommer du att lära dig hur man kontrollerar ljuseffekten, fördröjningen och varaktigheten av animationen för olika egenskaper som en grupp såväl som individuellt. Du lär dig då att kontrollera alla dessa animeringsparametrar för enskilda element.
.
