Share
Seriens första handledning fokuserade på att ge en nybörjarvänlig introduktion till KUTE.js-biblioteket. I den handledningen animerade vi bara opacitet och rotateZ egendom för våra element. I den här handledningen lär du dig att animera resten av CSS-egenskaperna med KUTE.js.
Några av dessa egenskaper kräver att du laddar CSS-plugin, medan andra kan animeras med själva kärnmotorn. Båda dessa scenarier kommer att diskuteras separat i handledningen.
Kärnmotorn KUTE.js kan bara animera de vanligaste egenskaperna i boxmodellen: bredd, höjd, topp, och vänster. Du måste använda CSS-plugin för att animera nästan alla andra boxmodellegenskaper. Här är ett exempel som animerar toppläget, bredden och höjden på våra rutor från föregående handledning:
var animateTop = KUTE.allFromTo (theBoxes, top: 0, top: 100, offset: 100); var animateA = KUTE.fromTo (boxA, höjd: 100, höjd: 175); var animateB = KUTE.fromTo (boxB, bredd: 100, bredd: 200);
Du kanske har märkt att jag använde allFromTo () att animera toppegenskapen hos alla lådor. Men jag använde från till() att animera enskilda lådor. Du bör komma ihåg att lådorna stannar i sitt slutliga tillstånd när animationen är klar.
Med hjälp av CSS-plugin kan du animera marginal, stoppning, och gränsbredd också. När du har tagit med plugin i ditt projekt är resten av processen exakt densamma.
Du kan animera nästan alla transformationsegenskaper som nämns i specifikationen med hjälp av själva kärnmotorn. Det är inte nödvändigt att ladda CSS-plugin i det här fallet.
Du kan animera elementets översättning i 2D-rymden med Översätt. På samma sätt kan du använda translateX, translateY, och translateZ för att animera elementen längs respektive axlar. För translateZ egendom som har någon effekt, måste du också ange ett värde för parentPerspective fast egendom. Här är ett exempel:
Accentsconagua
var animateAll = KUTE.allFromTo (theBoxes, translateY: 0, translateY: 100, offset: 1000); var animateA = KUTE.fromTo (boxA, translateZ: 0, translateZ: 50, parentPerspective: 100, parentPerspectiveOrigin: "0% 0%"); var animateB = KUTE.fromTo (boxB, translateX: 0, translateX: -200); startButton.addEventListener ("klicka", funktion () animateAll.start (); animateA.start (); animateB.start ();, false);Om du klickar på Start Animation knappen och observera animationen noga så ser du att den röda rutan översätter -200 i X-riktningen först. Därefter flyttas den till sin ursprungliga position och börjar översättas i Y-riktningen. Anledningen till lådan att animera translateX För det första är det att vi har lagt till en fördröjning för translateY animering med hjälp av offset fast egendom.
Precis som översättning kan du också utföra rotationer längs en viss axel med hjälp av rotera, rotateX, rotateY, och rotateZ egenskaper. Eftersom rotateX och rotateY är 3D-rotationer, du måste använda perspektiv egenskap för rotationsanimering för att fungera som förväntat. Följande exempel visar hur du använder perspektiv egendom påverkar den övergripande animationen för dessa två egenskaper.
var animateAll = KUTE.allFromTo (theBoxes, rotate: 0, rotate: 360, offset: 1000); var animateA = KUTE.fromTo (boxA, rotateY: 0, rotateY: 180, perspektiv: 100); var animateB = KUTE.fromTo (boxB, rotateY: 0, rotateY: -180); startButton.addEventListener ("klicka", funktion () animateAll.start (); animateA.start (); animateB.start ();, false);I ovanstående exempel börjar lådan A och lådan B sin rotation längs Y-axeln samtidigt, men den resulterande animationen är väldigt annorlunda på grund av perspektiv fast egendom. Du kanske har märkt att den orange asken inte utför rotationen runt sitt centrum som applicerades på den med animateAll. Detta beror på att alla animeringar har en längd på 500 millisekunder som standard, och vi tillämpar båda animateAll och animateA på orange asken samtidigt.
Eftersom animateA appliceras efter animateAll, dess animering har företräde framför animateAll. Du kommer att se att den gemensamma rotationen använder animateAll Appliceras fortfarande på oranglådan när du har ökat animationsvaraktigheten. Med andra ord kan du inte animera olika omvandlingsegenskaper med flera tweenobjekt samtidigt. Alla transformationsegenskaper som du vill animera bör anges i ett enda tweenobjekt. Följande exempel borde klargöra:
// Detta fungerar inte som förväntat var translateAll = KUTE.allFromTo (theBoxes, translateY: 0, translateY: 100, offset: 1000); var rotateAll = KUTE.allFromTo (theBoxes, rotate: 0, rotate: 360, offset: 1000); startButton.addEventListener ("klicka", funktion () translateAll.start (); rotateAll.start ();, false); // Detta fungerar som förväntat var rtAll = KUTE.allFromTo (theBoxes, translateY: 0, rotera: 0, translateY: 100, rotate: 360, offset: 1000); startButton.addEventListener ("klicka", funktion () rtAll.start ();, false);Som jag nämnde tidigare kan inte alla CSS-egenskaper animeras med endast den centrala KUTE.js-motorn. Du behöver använda ett extra CSS-plugin för att animera egenskaper som vaddering, marginal, bakgrundsposition av bilder och andra gränserelaterade egenskaper. Så innan du försöker något av exemplen i det här avsnittet bör du inkludera plugin i ditt projekt.
När du har tagit med plugin kommer du att kunna animera border-radius egendom som använder borderRadius. Du kan också animera hela hörnet border-radius värden individuellt användande borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, och borderBottomRightRadius. Här är ett exempel som visar animeringen i åtgärd.
Om du klickar på Start Animation knappen märker du att den övre vänstra gränsen för den röda och gula rutan animeras efter en fördröjning. Detta beror på offset fast egendom. Resten av radierna animeras så snart vi klickar på knappen. Ovanstående exempel skapades med följande kod:
var animateAll = KUTE.allFromTo (theBoxes, borderTopLeftRadius: '0%', borderTopLeftRadius: '100%', offset: 1000); var animateA = KUTE.fromTo (boxA, borderTopRightRadius: '0%', borderTopRightRadius: '100%'); var animateB = KUTE.fromTo (boxB, borderBottomLeftRadius: '0%', borderBottomLeftRadius: '100%'); var animateC = KUTE.fromTo (boxC, borderBottomRightRadius: '0%', borderBottomRightRadius: '100%'); startButton.addEventListener ("klicka", funktion () animateAll.start (); animateA.start (); animateB.start (); animateC.start ();, false);Vi har inte kedjat mellan objekten tillsammans, så alla animationer startar på en gång den här tiden. Du kan också animera färgen på olika gränser på ett liknande sätt med gräns färg, borderTopColor, borderLeftColor, borderBottomColor, och borderRightColor.
I denna handledning lärde vi oss om olika CSS-egenskaper som kan animeras med och utan användandet av KUTE.js CSS-plugin. Om du har några frågor, vänligen meddela mig det i kommentarerna.
Nästa handledning kommer att täcka olika animeringar som kan skapas med hjälp av KUTE.js SVG plugin.
