Share
Många webbplatser använder nu en slags animering för att göra sina målsidor mer tilltalande. Lyckligtvis finns det många bibliotek som låter dig animera element på en webbsida utan att göra allt från början. I denna handledning kommer du att lära dig om ett sådant bibliotek som heter mojs.
Biblioteket är mycket enkelt att använda på grund av dess enkla deklarativa API. De animeringar som du kan skapa med mojs kommer alla att vara smidiga och näthinnan så att allt ser professionellt ut.
Det finns många sätt att inkludera mojs i dina projekt. Du kan ta tag i biblioteket från sitt GitHub-arkiv. Alternativt kan du direkt inkludera en länk till den senaste versionen av biblioteket från olika CDN i ditt projekt.
Utvecklare kan också installera mojs med pakethanterare som npm och bower genom att köra följande kommando:
npm installera mo-js bower install mojs
När du väl har tagit med biblioteket i ditt projekt kan du börja använda olika moduler för att skapa intressanta animationer.
Denna handledning kommer att fokusera på HTML-modulen i mojs-biblioteket. Den här modulen kan användas för att animera olika HTML-element på webbsidan.
Det första du behöver göra för att animera ett DOM-element är att skapa en mojs Html objekt. Du kan ange väljaren för ett element och dess egenskaper som du vill animera inuti detta objekt.
Ställer in ett värde för el Låt dig identifiera det element som du vill animera med mojs. Du kan antingen ange sitt värde som en väljare eller en DOM-nod.
HTML-modulen har några fördefinierade attribut som kan användas för att animera olika omvandlingsrelaterade egenskaper för ett DOM-element. Du kan till exempel styra översättningsanimationen av ett element längs x-, y- och z-axlarna genom att ange start- och slutvärden för x, y och z egenskaper. Du kan också rotera ett element längs olika axlar med hjälp av angleX, Angley och angleZ egenskaper. Detta liknar motsvarande rotateX (), rotateY () och rotateZ () omvandlar i CSS. Du kan också skjuta ett element längs X- eller Y-axeln med hjälp av skewX och skewY egenskaper.
Att tillämpa skalningsanimeringar på olika element är lika enkelt. Om du vill skala ett element i båda riktningarna anger du bara ett värde för skala fast egendom. På samma sätt kan du animera skalning av element längs olika axlar genom att ange lämpliga värden för scaleX och scaleY egenskaper.
Förutom alla dessa egenskaper som låter dig ställa in animationens initiala och slutliga värden finns det några andra egenskaper som styr animationsuppspelningen. Du kan ange animationens varaktighet med hjälp av varaktighet fast egendom. Det angivna värdet behöver ett nummer, och det ställer in animationsvaraktigheten i millisekunder. Om du vill starta en animering efter viss fördröjning kan du ställa in fördröjningsvärdet med hjälp av fördröjning fast egendom. Precis som varaktighet, fördröjning förväntar sig också att dess värde är ett nummer.
Animationer kan upprepas mer än en gång med hjälp av upprepa fast egendom. Standardvärdet är noll, vilket innebär att animationen bara spelas en gång. Om du ställer in den till 1 spelas animationen två gånger och inställningen till 2 kommer att spela animationen tre gånger. När animationen har slutfört sin första iteration, går elementet tillbaka till sitt ursprungliga tillstånd och börjar animera igen (om du har satt ett värde för upprepa fast egendom). Denna plötsliga hoppa från det slutliga tillståndet till det ursprungliga tillståndet är kanske inte önskvärt i alla fall.
Om du vill att animationen ska spela bakåt när den har nått det slutliga tillståndet, kan du ställa in värdet på isYoyo egendom till Sann. Den är inställd på falsk som standard. Slutligen kan du ställa in den hastighet som animationen ska spelas med med fart fast egendom. Standardvärdet är 1. Om du ställer in den till 2 spelas animationen dubbelt så fort. På samma sätt ställer du in den till 0,5 vid animering med halva hastigheten.
Mojs Html objekt som du skapade kommer inte att animera respektive element i sig. Du måste ringa spela() metod på varje mojs Html animering som du vill spela. Här är ett exempel som animerar tre olika lådor med alla de egenskaper som vi just diskuterat:
Accentsconagua
var htmlA = ny mojs.Html (el: ".a", x: 0: 400, vinkelZ: 0: 720, varaktighet: 1000, upprepa: 4, isYoyo: true); var htmlB = nya mojs.Html (el: ".b", x: 400: 0, vinkelY: 0: 360, vinkelZ: 0: 720, varaktighet: 1000, upprepa: 4); var htmlC = nya mojs.Html (el: ".c", x: 0: 400, vinkelY: 0: 360, skalaZ: 1: 2, skewX: 0: 30 1000, upprepa: 4, isYoyo: true); document.querySelector ("play"). addEventListener ("klicka", funktion () htmlA.play (); htmlB.play (); htmlC.play ();); Du är inte begränsad till att bara animera omvandlingsegenskaperna för ett element. Med mojs animationsbiblioteket kan du animera alla andra animerbara CSS-egenskaper också. Du måste bara se till att du anger giltiga initiala och slutliga värden för dem. Du kan till exempel animera bakgrundsfärgen på ett element genom att ange giltiga värden för bakgrund.
Om CSS-egenskapen du vill animera innehåller en bindestreck, kan du ta bort bindestreck och konvertera egenskapsnamnet till Camelcase när man ställer in första och sista värdena inuti mojsen Html objekt. Det betyder att du kan animera border-radius genom att ange ett giltigt värde för borderRadius fast egendom. Följande exempel ska göra allt klart:
var htmlA = nya mojs.Html (el: ".a", x: 0: 400, vinkelZ: 0: 360, bakgrund: röd: 'svart', borderWidth: 10:20 borderColor: 'black': 'red', borderRadius: 0: '50% ', duration: 2000, repeat: 4, isYoyo: true); document.querySelector (". play"). addEventListener ("klicka", funktion () htmlA.play ();); I ovanstående exempel ändras gränsvärdet från svart till rött medan gränsenraden animerar från 0 till 50%. Du bör observera att ett enhälligt tal kommer att betraktas som ett pixelvärde, medan ett tal med enheter ska anges som en sträng som "50% ".
Hittills har vi använt en enda uppsättning av tween-egenskaper för att styra uppspelningen av olika animeringar. Detta innebar att ett element skulle ta samma gång för att flytta från x: 0 till x: 200 som det kommer att ta för att skala från skala: 1 till skala: 2.
Det här kanske inte är ett önskvärt beteende som du kanske vill fördröjning animeringen av vissa egenskaper och kontrollera deras varaktighet också. I sådana fall kan du ange animationsuppspelningsparametrarna för varje egenskap i själva objektet.
var htmlA = ny mojs.Html (el: ".a", x: 0: 400, varaktighet: 1000, upprepa: 8, isYoyo: true, angleY: 0: 360, delay: 500, duration: 1000 , upprepa: 4, isYoyo: true, angleZ: 0: 720, delay: 1000, duration: 1000, repeat: 4, isYoyo: true); document.querySelector (". play"). addEventListener ("klicka", funktion () htmlA.play ();); Varje animation som du skapar kommer att ha sin.out lättnad tillämpas som standard. Om du vill att animationsuppspelningen ska fortgå med en annan lättnad, kan du ange dess värde med hjälp av easing fast egendom. Som standard anges det värde som anges för easing används också när animationen spelas bakåt. Om du vill tillämpa en annan lättnad för bakåt animeringar kan du ange ett värde för backwardEasing fast egendom.
Mojs-biblioteket har 11 olika inbyggda lättnadsfunktioner. Dessa är linjär, lätthet, synd, quad, kubisk, quart, kvint, expo, circ, tillbaka, och elastisk. Den linjära lättnad har bara en variant som heter linear.none. Det här är meningsfullt eftersom animationen kommer att utvecklas med samma hastighet i olika steg. Alla andra lättnader har tre olika variationer med i, ut och in ut bifogas i slutet.
Det finns två metoder för att ange lättnadsfunktionen för en animering. Du kan antingen använda en sträng som elastic.in eller du kan få tillgång till lättnadsfunktionerna direkt med hjälp av mojs.easing föremål som mojs.easing.elastic.inout. I den inbäddade CodePen-demo har jag tillämpat olika lättnader på varje stapel så bredden kommer att förändras i en annan takt. Detta ger dig en uppfattning om hur animationshastigheten skiljer sig åt med varje lättnad.
var allBoxes = document.querySelectorAll (". box"); var animationer = ny Array (); var easings = ['ease.in', 'sin.in', 'quad.in', 'cubic.in', 'quart.in', 'quint.in', 'expo.in', 'circ.in ',' back.in ',' elastic.in ']; allBoxes.forEach (funktion (box, index) var animation = new mojs.Html (el: box, bredd: 0: 550, duration: 4000, repeat: 8, isYoyo: true, easing: easings [index] ); animations.push (animation);); document.querySelector ("play"). addEventListener ("klicka", funktion () animations.forEach (funktion (anim) anim.play (););); Eftersom vi bara vill ändra lättningsfunktionen som tillämpas på varje ruta, har jag skapat en slinga för att iterera över dem och sedan tillämpa en lättnadsfunktion som hämtats från lättnader array. Detta förhindrar onödig koddubbling. Du kan använda samma teknik för att animera flera element där egenskapsvärdena varierar beroende på ett mönster.
Mojs ger många metoder som gör att vi kan styra animationsuppspelningen för olika element när den redan har startat. Du kan pausa animationen när som helst genom att ringa paus() metod. På samma sätt kan du återuppta alla pausade animeringar genom att ringa återuppta() metod.
Animationer som har blivit pausade med paus() kommer alltid att fortsätta från den punkt som du ringde till paus(). Om du vill att animationen ska börja från början efter att den har pausats, ska du använda sluta() metod istället.
Du kan också spela animationen bakåt med hjälp av playBackward () metod. Tidigare använde vi fart egenskap för att styra hastigheten vid vilken mojs spelade en animering. Mojs har också a setSpeed () metod som kan ställa in animationshastigheten medan den fortfarande är igång. I följande exempel har jag använt alla dessa metoder för att styra animationsuppspelningen baserat på knapptryckningar.
varhastighet = 1; var htmlA = ny mojs.Html (el: ".a", angleZ: 0: 720, borderRadius: 0: '50% ', borderWidth: 10: 100, varaktighet: 2000, upprepa: 9999 , isYoyo: true); document.querySelector (". play"). addEventListener ("klicka", funktion () htmlA.play ();); document.querySelector ("pause"). addEventListener ("klicka", funktion () htmlA.pause ();); document.querySelector (". stop"). addEventListener ("klicka", funktion () htmlA.stop ();); document.querySelector (". faster"). addEventListener ("klicka", funktion () speed = hastighet + 1; htmlA.setSpeed (hastighet); document.querySelector (". data"). innerHTML = "Hastighet:" + fart; ); document.querySelector (". slow down"). addEventListener ("klicka", funktion () speed = hastighet / 2; htmlA.setSpeed (hastighet); document.querySelector (".data"). innerHTML = "Hastighet:" + fart; ); I följande demo visas den aktuella animationsuppspelningshastigheten i den svarta rutan i nedre vänstra hörnet. Klicka på Snabbare kommer att öka nuvarande hastighet med 1 och klicka på långsam~~POS=TRUNC halverar nuvarande hastighet.
I denna handledning lärde vi oss att animera olika DOM-element på en webbsida med hjälp av HTML-modulen i mojs. Vi kan ange det element vi vill animera med antingen en väljare eller en DOM-nod. Biblioteket tillåter dig att animera olika omvandlingsegenskaper och opacitet av något element med hjälp av mojsens inbyggda egenskaper Html objekt. Du kan dock också animera andra CSS-egenskaper genom att ange namnet med Camelcase notation.
JavaScript är inte utan sina inlärningskurvor, och det finns gott om ramar och bibliotek för att hålla dig upptagen också. Om du letar efter ytterligare resurser att studera eller använda i ditt arbete, kolla vad vi har tillgängligt på Envato-marknaden.
Låt mig veta om det finns något du vill att jag ska klargöra i denna handledning. Vi kommer att täcka Form-modulen från mojs-biblioteket i nästa handledning.
