Share
KUTE.js is een op JavaScript gebaseerde animatiemachine die zich richt op prestaties en geheugenefficiëntie terwijl verschillende elementen op een webpagina worden geanimeerd. Ik heb al een serie geschreven over het gebruik van Anime.js om op JavaScript gebaseerde animaties te maken. Deze keer leren we over KUTE.js en hoe we het kunnen gebruiken om CSS-eigenschappen, SVG en tekstelementen te animeren, onder andere.
Voordat we in enkele voorbeelden duiken, laten we eerst de bibliotheek installeren. KUTE.js heeft een kernengine, en dan zijn er plug-ins voor het animeren van de waarde van verschillende CSS-eigenschappen, SVG-attributen of tekst. U kunt rechtstreeks vanuit de populaire CDN's zoals cdnjs en jsDelivr naar de bibliotheek linken.
Je kunt KUTE.js ook installeren met NPM of Bower met behulp van de volgende opdrachten:
npm installeren - sla kute.js bower installeer - sla kute.js op
Nadat u de bibliotheek in uw projecten hebt opgenomen, kunt u beginnen met het maken van uw eigen animatiereeksen.
Wanneer u uw animatie maakt met KUTE.js, moet u tween-objecten definiëren. Deze tween-objecten bieden alle animatiegerelateerde informatie voor een bepaald element of elementen. Dit omvat het element zelf, de eigenschappen die u wilt animeren, de duur van de animatie en andere kenmerken, zoals het aantal herhalingen, vertraging of offset.
U kunt de .naar() methode of de .van naar() methode om een reeks CSS-eigenschappen van de ene naar de andere waarde te animeren. De .naar() methode animeert de eigenschappen van hun standaardwaarde of hun berekende / huidige waarde naar een uiteindelijke opgegeven waarde. In het geval van de .van naar() methode, moet u zowel de begin- als de eindanimatiewaarden opgeven.
De .naar() methode is handig als u de huidige of standaardwaarde voor de eigenschap die u wilt animeren niet kent. Een groot nadeel van deze methode is dat de bibliotheek de huidige waarde van alle eigenschappen alleen moet berekenen. Dit resulteert in een vertraging van enkele milliseconden nadat u belt .begin() om de animatie te starten.
De .van naar() Met deze methode kunt u zelf de begin- en eindwaarde van de animatiewaarden opgeven. Dit kan de prestaties van de animaties marginaal verbeteren. U kunt nu ook zelf de eenheden opgeven voor begin- en eindwaarden en eventuele verrassingen in de loop van de animatie voorkomen. Een nadeel van het gebruik .van naar() is dat je niet meerdere transformatie-eigenschappen op gekoppelde tweens kunt stapelen. In dergelijke gevallen moet u de .naar() methode.
Vergeet niet dat beide .van naar() en .naar() zijn bedoeld om te worden gebruikt wanneer u individuele elementen animeert. Als u meerdere elementen tegelijk wilt animeren, moet u beide elementen gebruiken .allen naar() of .allFromTo (). Deze methoden werken net als hun tegenhangers met één element en erven al hun attributen. Ze krijgen ook een extra compenseren kenmerk dat de vertraging tussen het begin van de animatie voor verschillende elementen bepaalt. Deze offset wordt gedefinieerd in milliseconden.
Hier is een voorbeeld dat de dekking van drie verschillende vakken na elkaar animeert.
Het volgende JavaScript wordt gebruikt om de bovenstaande animatiereeks te maken:
Accentsconagua
var theBoxes = document.querySelectorAll (". box"); var startButton = document.querySelector (". start"); var animateOpacity = KUTE.allFromTo (theBoxes, opacity: 1, opacity: 0.1, offset: 700); startButton.addEventListener ("klik", functie () animateOpacity.start ();, false);Alle bovenstaande vakken hebben een doos klasse die is gebruikt om ze allemaal te selecteren met behulp van de querySelectorAll () methode. De allFromTo () methode in KUTE.js wordt gebruikt om de dekking van deze vakken te animeren van 1 tot 0,1 met een verschuiving van 700 milliseconden. Zoals u kunt zien, start het tween-object de animatie niet zelf. Je moet de begin() methode om de animatie te starten.
In het vorige gedeelte hebben we de begin() methode om onze animaties te starten. De KUTE.js-bibliotheek biedt ook een paar andere methoden die kunnen worden gebruikt om het afspelen van animaties te regelen.
U kunt bijvoorbeeld elke animatie stoppen die momenteel wordt uitgevoerd met behulp van de hou op() methode. Houd er rekening mee dat u deze methode kunt gebruiken om de animatie van alleen die tween-objecten die in een variabele zijn opgeslagen te stoppen. De animatie voor elk tween-object dat on the fly is gemaakt, kan niet met deze methode worden gestopt.
Je hebt ook de mogelijkheid om een animatie gewoon te pauzeren met behulp van de pauze() methode. Dit is handig als u de animatie op een later tijdstip weer wilt hervatten. Je kunt het gebruiken hervatten() of spelen() om alle animatie te hervatten die was onderbroken.
Het volgende voorbeeld is een bijgewerkte versie van de vorige demo met alle vier de methoden eraan toegevoegd.
Hier is de JavaScript-code die nodig is om de functionaliteit starten, stoppen, afspelen en pauzeren toe te voegen.
var theBoxes = document.querySelectorAll (". box"); var startButton = document.querySelector (". start"); var stopButton = document.querySelector (". stop"); var pauseButton = document.querySelector (". pause"); var resumeButton = document.querySelector (". resume"); var animateOpacity = KUTE.allFromTo (theBoxes, opacity: 1, opacity: 0.1, offset: 700, duration: 2000); startButton.addEventListener ("klik", functie () animateOpacity.start ();, false); stopButton.addEventListener ("klik", functie () animateOpacity.stop ();, false); pauseButton.addEventListener ("klik", functie () animateOpacity.pause ();, false); resumeButton.addEventListener ("klik", functie () animateOpacity.resume ();, false); Ik heb de animatieduur gewijzigd in 2000 milliseconden. Dit geeft ons voldoende tijd om verschillende knoppen in te drukken en te zien hoe deze van invloed zijn op het afspelen van de animatie.
U kunt de keten() methode om verschillende tweens samen te ketenen. Zodra verschillende tweens zijn vastgeketend, noemen ze de begin() methode op andere tweens nadat hun eigen animatie is voltooid.
Op deze manier kun je verschillende animaties in een reeks spelen. Je kunt verschillende tweens aan elkaar koppelen om ze in een lus te spelen. Het volgende voorbeeld zou het duidelijk moeten maken:
var animateOpacity = KUTE.allFromTo (theBoxes, opacity: 1, opacity: 0.1, offset: 100, duration: 800); var animateRotation = KUTE.allFromTo (theBoxes, rotate: 0, rotate: 360, offset: 250, duration: 800); opacityButton.addEventListener ("click", function () animateOpacity.start ();, false); rotateButton.addEventListener ("klik", functie () animateRotation.start ();, false); chainButton.addEventListener ("click", function () animateOpacity.chain (animateRotation); animateOpacity.start ();, false); loopButton.addEventListener ("klik", functie () animateOpacity.chain (animateRotation); animateRotation.chain (animateOpacity); animateOpacity.start ();, false);We hebben al een tween gebruikt om de dekking te animeren. We hebben nu een nieuwe toegevoegd die de rotatie van onze vakken animeert. De eerste twee knoppen animeren de dekking en de rotatie één voor één. De derde knop activeert het ketenen van animateOpacity met animateRotation.
De keten zelf start de animatie niet, dus gebruiken we ook de begin() methode om de dekkingsanimatie te starten. De laatste knop wordt gebruikt om beide tweens met elkaar te ketenen. Deze keer blijven de animaties voor onbepaalde tijd spelen zodra ze zijn gestart. Hier is een CodePen-demo die alle bovenstaande code in actie toont:
Om volledig te begrijpen hoe ketenwerken werkt, moet u de knoppen in een specifieke volgorde indrukken. Klik op de Dekking animeren knop eerst en je zult zien dat de dekkingsanimatie slechts eenmaal wordt afgespeeld en dan gebeurt er niets anders. Druk nu op Animate Rotation knop en je zult zien dat de dozen een keer draaien en dan gebeurt er niets anders.
Druk daarna op Ketenanimaties Als u op de knop drukt, ziet u dat de transparantie-animatie eerst wordt afgespeeld en als de iteratie is voltooid, begint de rotatie-animatie helemaal vanzelf. Dit is gebeurd omdat de rotatie-animatie nu is gekoppeld aan de dekkingsanimatie.
Druk nu op Dekking animeren knop opnieuw en je ziet dat zowel de dekking als de rotatie in volgorde worden geanimeerd. Dit komt omdat ze al vastzaten nadat we erop hadden geklikt Ketenanimaties.
Op dit punt drukt u op de Animate Rotation knop animeert alleen de rotatie. De reden voor dit gedrag is dat we de rotatie-animatie alleen hebben gekoppeld aan de transparantie-animatie. Dit betekent dat de vakken telkens worden gedraaid als de dekking wordt geanimeerd, maar een rotatie-animatie betekent niet dat de transparantie ook wordt geanimeerd.
Ten slotte kunt u klikken op de Speel in een lus knop. Hiermee worden beide animaties aan elkaar geketend en als dat gebeurt, blijven de animaties in een oneindige lus spelen. Dit komt omdat het einde van een animatie het begin van de andere animatie activeert.
In deze inleidende KUTE.js-tutorial leer je over de basisprincipes van de bibliotheek. We zijn begonnen met de installatie en zijn vervolgens overgegaan op verschillende methoden die kunnen worden gebruikt om tween-objecten te maken.
Je hebt ook geleerd hoe je het afspelen van een animatie regelt en hoe je verschillende tweens aan elkaar kunt ketenen. Zodra je het ketenen volledig begrijpt, kun je een aantal interessante animaties maken met behulp van deze bibliotheek.
In de volgende zelfstudie van de serie leer je hoe je verschillende soorten CSS-eigenschappen kunt animeren met KUTE.js.
