Share
In de eerste zelfstudie van de Anime.js-serie hebt u geleerd over verschillende manieren om de doelelementen op te geven die u wilt animeren en de soorten CSS-eigenschappen en DOM-kenmerken die kunnen worden geanimeerd. De animaties in de vorige tutorial waren erg basic. Alle doelelementen bewogen gewoon een bepaalde afstand of veranderden de grensradius op een vaste snelheid.
Soms moet u de doelelementen op een meer ritmische manier animeren. U hebt bijvoorbeeld tien verschillende elementen die u van links naar rechts wilt verplaatsen met een vertraging van 500 ms tussen het begin van de animatie voor elk element. U kunt ook de animatieduur voor elk element verhogen of verlagen op basis van de positie.
In deze zelfstudie leert u hoe u Anime.js kunt gebruiken om de animatie van verschillende elementen op de juiste manier te timen met behulp van specifieke parameters. Hiermee kunt u de volgorde bepalen waarin een animatiereeks wordt afgespeeld voor afzonderlijke elementen of voor alle elementen.
Met deze parameters kunt u de duur, vertraging en versoepeling van individuele eigenschappen of een groep eigenschappen tegelijk beheren. De looptijd en vertraging parameters worden opgegeven in milliseconden. De standaardwaarde voor duur is 1000ms of 1s.
Dit betekent dat, tenzij anders aangegeven, alle animaties toegepast op een element gedurende 1 seconde worden afgespeeld. De vertraging parameter geeft aan hoeveel tijd de animatie in beslag neemt om te beginnen nadat u deze al hebt geactiveerd. De standaardwaarde voor vertraging is 0. Dit betekent dat de animaties zullen beginnen zodra ze worden geactiveerd.
U kunt de versoepeling parameter om de snelheid te regelen waarmee een animatie wordt afgespeeld gedurende de duur dat deze actief is. Sommige animaties beginnen langzaam, nemen het tempo in het midden op en vertragen aan het einde opnieuw. Anderen beginnen in een goed tempo en vertragen vervolgens voor de rest van de tijd.
In alle gevallen wordt de animatie echter altijd voltooid binnen de tijd die is opgegeven met de looptijd parameter. Anime.js biedt veel easing-functies die u rechtstreeks op uw elementen kunt toepassen door alleen hun namen te gebruiken. Voor sommige easing-functies kunt u ook een waarde instellen voor de elasticiteit parameter om te bepalen hoeveel de waarde van een element heen en weer stuitert als een veer.
Je leert meer over verschillende easing-functies in de laatste tutorial van de serie. Het volgende codefragment laat zien hoe al deze parameters op verschillende animaties moeten worden toegepast.
var slowAnimation = anime (targets: '.square', translationY: 250, borderRadius: 50, duration: 4000); var delayAnimation = anime (targets: '.square', translateY: 250, borderRadius: 50, delay: 800); var cubicAnimation = anime (targets: '.square', translationY: 250, borderRadius: 50, duration: 1200, easing: 'easeInOutCubic');
Zoals u kunt zien, kunnen deze parameters onafhankelijk van andere parameters worden gebruikt of in combinatie met deze. De cubicAnimation heeft zowel de looptijd en versoepeling parameter toegepast. Als de duur niet was opgegeven, zou de animatie 1 seconde hebben gedraaid. Nu zal het 1.200 milliseconden of 1.2 seconden duren.
Een belangrijke beperking van eigenschapsparameters in het bovenstaande voorbeeld was dat alle animaties van het doelelement hetzelfde zullen zijn looptijd, vertraging en versoepeling waarden.
Dit kan al dan niet het gewenste gedrag zijn. In plaats van bijvoorbeeld de grensstraal van het doelelement tegelijkertijd te vertalen en te wijzigen, wilt u misschien eerst het doelelement vertalen en vervolgens de randstraal ervan animeren. Met Anime.js kunt u verschillende waarden opgeven voor de looptijd, vertraging, versoepeling en elasticiteit parameters voor individuele eigenschappen. De volgende code en demo zouden het duidelijker moeten maken.
var indiParam = anime (targets: '.square', translateY: value: 250, rotate: value: '2.125turn', backgroundColor: value: 'rgb (255,0,0)', duration: 400, vertraging: 1500, versoepeling: 'lineair', duur: 1500);
In de bovenstaande code hebben alle eigenschappen die we willen animeren verschillende waarden. De achtergrondkleuranimatie heeft een duur van 400 ms, terwijl de rotatie- en vertaling-animaties de algemene duurwaarde van 1500 ms gebruiken.
De achtergrondkleuranimatie heeft ook een vertraging, zodat elke verandering in de kleur pas begint nadat 1500ms zijn verstreken. De draaien en translateY eigenschappen gebruiken de standaardwaarde voor de vertraging en versoepeling omdat we noch een lokale noch een globale waarde voor hen hebben opgegeven.
Op eigenschappen gebaseerde parameters zijn handig als u de volgorde en duur van het animeren van afzonderlijke eigenschappen wilt wijzigen. Echter hetzelfde looptijd en vertraging zal nog steeds worden toegepast voor individuele eigenschappen op alle doelelementen. Met functie-gebaseerde parameters kunt u de looptijd, vertraging, elasticiteit en versoepeling voor verschillende doelelementen op een compacte manier.
In dit geval stelt u de waarden van de verschillende parameters in met behulp van functies in plaats van nummers. Deze functies accepteren drie parameters: doelwit, inhoudsopgave, en targetCount. De doelwit parameter slaat de verwijzing naar het huidige doelelement op. De inhoudsopgave parameter slaat de index of positie van het huidige doelelement op. De targetCount parameter slaat het totale aantal doelelementen op.
De doelwit parameter is handig wanneer de animatiewaarden moeten worden ingesteld op basis van sommige kenmerken van het doelelement. U kunt bijvoorbeeld het vertraging, looptijd of versoepeling waarden voor een doelelement in gegevensattributen en om ze vervolgens later te openen.
Op dezelfde manier kunt u toegang krijgen tot de achtergrondkleur van een doelelement en deze vervolgens manipuleren om een uiteindelijke unieke kleurwaarde in te stellen voor afzonderlijke elementen. Op deze manier kunt u alle elementen animeren om een achtergrondkleur te hebben die 20% donkerder is dan de huidige kleur.
De inhoudsopgave parameter geeft u de positie van het huidige doel in onze lijst met doelelementen. Je kunt het gebruiken om de waarde geleidelijk aan te veranderen voor parameters zoals looptijd en vertraging voor verschillende elementen.
Dit is over het algemeen handig als u de waarden in oplopende volgorde wilt instellen. Je kunt ook de inhoudsopgave van de targetCount om de waarden in aflopende volgorde in te stellen. In het volgende codefragment worden beide parameters gebruikt om de waarden in oplopende en aflopende volgorde op te geven.
var delaySequence = anime (targets: '.square', translateY: 250, delay: function (target, index) returnindex * 200;); var delaySequenceR = anime (targets: '.square', translateY: 250, delay: function (target, index, targetCount) return (targetCount - index) * 200;);
De volgende code stelt een ander in versoepeling waarde voor elk doelelement met behulp van de inhoudsopgave parameter.
var easeInValues = ['easeInQuad', 'easeInCubic', 'easeInQuart', 'easeInQuint', 'easeInSine', 'easeInExpo', 'easeInCirc', 'easeInBack', 'easeInElastic']; var easeInSequence = anime (targets: '.square', translateY: 250, duration: 2000, easing: function (target, index) return easeInValues [index];, autoplay: false);
Met deze laatste set parameters kunt u opgeven hoe vaak een animatie moet worden afgespeeld en in welke richting deze moet worden afgespeeld. U kunt opgeven hoe vaak een animatie moet worden afgespeeld met behulp van de lus parameter. Er is ook een automatisch afspelen parameter die kan worden ingesteld op waar of vals. De standaardwaarde is waar, maar je kunt voorkomen dat de animaties zelf starten door deze in te stellen vals.
De richting parameter bepaalt de richting waarin de animatie wordt afgespeeld. Het kan drie waarden hebben: normaal, omgekeerde, en afwisselend. De standaardwaarde is normaal, waarmee de animatie normaal wordt afgespeeld van de beginwaarden tot de eindwaarden. Zodra de doelelementen de eindwaarde hebben bereikt, als de lus waarde is groter dan 1, de doelelementen springen abrupt terug naar de startwaarden en beginnen dan opnieuw aan de animatie.
Wanneer de richting ingesteld op omgekeerde en de lus waarde is groter dan 1, de animatie wordt omgekeerd. Met andere woorden, de doelelementen starten de animatie vanuit hun uiteindelijke toestand en gaan achteruit om de initiële status te bereiken. Als ze zich in de oorspronkelijke staat bevinden, springen de elementen terug naar de eindtoestand en starten dan opnieuw de omgekeerde animatie. De afwisselend richtingswaarde wijzigt de animatie richting na elke lus.
var normalLoop = anime (targets: '.square', translateY: 250, delay: function (target, index) return index * 200;, loop: 4, easing: 'easeInSine', autoplay: false);
In de volgende demo heb ik het aantal loops ingesteld op vier, zodat je gemakkelijk het verschil in animatie van de elementen in verschillende modi kunt opmerken.
In deze zelfstudie leer je over verschillende soorten parameters die kunnen worden gebruikt om de animatie van doelelementen in Anime.js te besturen. De eigenschappenparameters worden gebruikt om de animatie van individuele eigenschappen te regelen.
U kunt ze gebruiken om de volgorde te bepalen waarin de animatie wordt afgespeeld voor afzonderlijke elementen. Met de functieparameters kunt u de timing en snelheid van de animatie voor individuele elementen met betrekking tot de hele groep regelen. Met de animatieparameters bepaalt u hoe de animatie zelf wordt afgespeeld voor verschillende elementen.
Als je nog vragen hebt over deze tutorial, laat het me dan weten in de comments.
Accentsconagua