Share
De eerste zelfstudie van de serie was gericht op het bieden van een beginnersvriendelijke introductie tot de KUTE.js-bibliotheek. In die tutorial animeerden we alleen de ondoorzichtigheid en rotateZ eigendom voor onze elementen. In deze zelfstudie leert u hoe u de rest van de CSS-eigenschappen kunt animeren met KUTE.js.
Voor sommige van deze eigenschappen moet u de CSS-plug-in laden, terwijl andere kunnen worden geanimeerd met behulp van de kernmotor zelf. Beide scenario's worden afzonderlijk besproken in de zelfstudie.
De kern-engine van KUTE.js kan alleen de meest voorkomende eigenschappen van het boxmodel animeren: breedte, hoogte, top, en links. U moet de CSS-plug-in gebruiken om vrijwel alle andere eigenschappen van het boxmodel te animeren. Hier is een voorbeeld dat de bovenste positie, breedte en hoogte animeert van onze vakken uit de vorige zelfstudie:
var animateTop = KUTE.allFromTo (theBoxes, top: 0, top: 100, offset: 100); var animateA = KUTE.fromTo (boxA, height: 100, height: 175); var animateB = KUTE.fromTo (boxB, width: 100, width: 200);
Je hebt misschien gemerkt dat ik het gebruikte allFromTo () om de topeigenschap van alle vakken te animeren. Ik gebruikte echter van naar() om individuele boxen te animeren. Houd er rekening mee dat de vakken in hun definitieve staat blijven zodra de animatie is voltooid.
Met behulp van de CSS-plugin kunt u animeren marge, vulling, en grensbreedte ook. Zodra u de plug-in in uw project hebt opgenomen, is de rest van het proces precies hetzelfde.
Je kunt bijna alle transformatie-eigenschappen die in de specificatie zijn genoemd, animeren met behulp van de kernmotor zelf. Het is niet nodig om de CSS-plug-in in dit geval te laden.
U kunt de elementvertaling animeren in 2D-ruimte met behulp van vertalen. Op dezelfde manier kunt u gebruiken translateX, translateY, en translateZ om de elementen langs de respectievelijke assen te animeren. Voor de translateZ eigenschap om enig effect te hebben, moet u ook een waarde instellen voor de parentPerspective eigendom. Hier is een voorbeeld:
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 ("klik", functie () animateAll.start (); animateA.start (); animateB.start ();, false);Als u op klikt Start animatie knop en observeer de animatie van dichtbij, je zult zien dat het rode kader eerst -200 in de X-richting vertaalt. Daarna gaat het naar de oorspronkelijke positie en begint het te vertalen in de Y-richting. De reden voor het vak om te animeren translateX ten eerste is dat we een vertraging hebben toegevoegd voor de translateY animatie met behulp van de compenseren eigendom.
Net als bij vertalen, kunt u ook rotaties langs een specifieke as uitvoeren met behulp van de draaien, rotateX, rotateY, en rotateZ eigenschappen. Sinds rotateX en rotateY zijn 3D-rotaties, je zult de perspectief eigenschap om de rotatie-animatie te laten werken zoals verwacht. Het volgende voorbeeld laat zien hoe het gebruik van de perspectief property heeft invloed op de algehele animatie voor deze twee eigenschappen.
var animateAll = KUTE.allFromTo (theBoxes, rotate: 0, rotate: 360, offset: 1000); var animateA = KUTE.fromTo (boxA, rotateY: 0, rotateY: 180, perspective: 100); var animateB = KUTE.fromTo (boxB, rotateY: 0, rotateY: -180); startButton.addEventListener ("klik", functie () animateAll.start (); animateA.start (); animateB.start ();, false);In het bovenstaande voorbeeld beginnen vak A en vak B hun rotatie langs de Y-as tegelijkertijd, maar de resulterende animatie is heel anders vanwege de perspectief eigendom. U hebt misschien gemerkt dat het oranje vakje niet de rotatie uitvoert rond het midden dat erop is toegepast met animateAll. Dit komt omdat alle animaties standaard een duur van 500 milliseconden hebben en we beide toepassen animateAll en animateA op het oranje vak op hetzelfde moment.
Sinds animateA wordt toegepast na animateAll, de animatie heeft voorrang animateAll. Je zult zien dat de gewone rotatie gebruikt animateAll wordt nog steeds toegepast op de oranje doos zodra u de duur van de animatie verhoogt. Met andere woorden, u kunt verschillende transformatie-eigenschappen niet tegelijkertijd animeren met behulp van meerdere tween-objecten. Alle transformatie-eigenschappen die u wilt animeren, moeten in een enkel tween-object worden opgegeven. Het volgende voorbeeld zou het duidelijk moeten maken:
// Dit zal niet werken zoals verwacht var translateAll = KUTE.allFromTo (theBoxes, translateY: 0, translateY: 100, offset: 1000); var rotateAll = KUTE.allFromTo (theBoxes, rotate: 0, rotate: 360, offset: 1000); startButton.addEventListener ("klik", functie () translateAll.start (); rotateAll.start ();, false); // Dit werkt zoals verwacht var rtAll = KUTE.allFromTo (theBoxes, translateY: 0, rotate: 0, translateY: 100, rotate: 360, offset: 1000); startButton.addEventListener ("klik", functie () rtAll.start ();, false);Zoals ik eerder al zei, kunnen niet alle CSS-eigenschappen worden geanimeerd met alleen de kern-engine KUTE.js. U moet een extra CSS-plug-in gebruiken om eigenschappen zoals opvulling, marge, achtergrondpositie van afbeeldingen en andere randgerelateerde eigenschappen te animeren. Dus, voordat u een van de voorbeelden in deze sectie probeert, moet u de plug-in in uw project opnemen.
Nadat u de plug-in hebt toegevoegd, kunt u de animatie animeren border-radius onroerend goed met borderRadius. Je kunt ook de hele hoek animeren border-radius waarden individueel gebruik borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, en borderBottomRightRadius. Hier is een voorbeeld dat de animatie in actie toont.
Als u op klikt Start animatie Als u op de knop klikt, ziet u dat de linkerbovenrand van de straal voor het rode en gele vak na een vertraging wordt geanimeerd. Dit komt door de compenseren eigendom. De rest van de radii worden geanimeerd zodra we op de knop klikken. Het bovenstaande voorbeeld is gemaakt met behulp van de volgende code:
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 ("klik", functie () animateAll.start (); animateA.start (); animateB.start (); animateC.start ();, false);We hebben de tween-objecten niet aan elkaar geketend, dus alle animaties beginnen nu tegelijk. U kunt ook op dezelfde manier de kleur van verschillende randen animeren met rand kleur, borderTopColor, borderLeftColor, borderBottomColor, en borderRightColor.
In deze zelfstudie hebben we geleerd over verschillende CSS-eigenschappen waarmee kan worden geanimeerd en zonder het gebruik van de KUTE.js CSS-plug-in. Als u vragen heeft, kunt u me dit laten weten in de opmerkingen.
De volgende zelfstudie behandelt verschillende animaties die kunnen worden gemaakt met behulp van de KUTE.js SVG-plug-in.
