Share
In de vorige zelfstudie van de Anime.js-serie hebt u geleerd over verschillende soorten parameters die bepalen hoe verschillende doelelementen moeten worden geanimeerd. Je hebt ook geleerd hoe je functieparameters moet gebruiken om de vertraging of de duur van de elementen geleidelijk aan te veranderen.
In deze zelfstudie gaan we een stap verder en leren we hoe we de eigenschapswaarden zelf kunnen opgeven met behulp van normale getallen, functiegebaseerde waarden en hoofdframes. Je leert ook hoe je animaties achter elkaar kunt spelen met behulp van tijdlijnen.
Met Anime.js kunt u de definitieve of eindwaarden opgeven voor de eigenschappen van animaties van doelelementen. De begin- of startwaarde voor de animatie is de standaardwaarde van die eigenschap. Elke waarde die is opgegeven in de CSS, kan ook als startwaarde fungeren. Er zijn meerdere manieren om een eindwaarde op te geven.
Het kan ook een eenheidsloos nummer zijn. In dit geval worden de oorspronkelijke of standaardeenheden van de eigenschap gebruikt bij het berekenen van eventuele eigenschapswaarden. U kunt de waarde ook als een tekenreeks opgeven, maar de reeks moet ten minste één numerieke waarde bevatten. Voorbeelden van stringwaarden zouden zijn 10vh, 80%, en 9.125turn.
In plaats van een absolute waarde op te geven, kunt u ook eigenschapswaarden opgeven in verhouding tot hun huidige waarde. U kunt bijvoorbeeld de finale instellen translateY waarde te zijn 150px groter dan de huidige waarde met += 150px als een waarde. Houd er rekening mee dat u alleen optellen, vermenigvuldigen en aftrekken kunt gebruiken terwijl u relatieve waarden opgeeft.
Terwijl u kleuren animeert, kunt u geen kleurnamen gebruiken zoals rood, zwart en blauw om een uiteindelijke kleurwaarde voor de animatie in te stellen. In dergelijke gevallen zal de kleuranimatie helemaal niet gebeuren en zal de verandering direct zijn. De enige manier om kleuren te animeren is om de waarden als hexadecimale cijfers of in termen van RGB- en HSL-waarden op te geven.
Zoals je misschien hebt gemerkt, hebben we geen beginwaarde gespecificeerd voor onze doelelementen om ze te animeren. Anime.js bepaalt automatisch de beginwaarde op basis van onze CSS en de standaardwaarden van die eigenschappen. U kunt echter een beginwaarde opgeven die afwijkt van de standaardwaarde voor een eigenschap met behulp van arrays. Het eerste item in de array geeft de beginwaarde aan en het tweede item geeft de definitieve waarde aan.
In plaats van dezelfde eindwaarde voor al uw doelelementen te gebruiken, kunt u functies gebruiken om verschillende waarden in te stellen voor verschillende parameters. Het proces is vergelijkbaar met het specificeren van functie-gebaseerde eigenschapsparameters.
var uniqueTranslation = anime (targets: '.square', translateY: function (el, i) return 50 * (i + 1);, autoplay: false); var randomScaling = anime (targets: '.square', scale: function (el, i) return Math.random () * 1.5 + i / 10;, autoplay: false); var randomRotation = anime (targets: '.square', rotate: function () return anime.random (-180, 180);, autoplay: false); var randomRadius = anime (targets: '.square', borderRadius: function (el) return 20 + Math.random () * el.offsetWidth / 4;, autoplay: false); var randomAll = anime (targets: '.square', translateY: function (el, i) return 50 + 50 * i;, scale: function (el, i) return Math.random () * 1.5 + i / 10;, roteren: function () return anime.random (-180, 180);, borderRadius: functie (el) return Math.random () * el.offsetWidth / 2;, duration: function ( ) return anime.random (1500, 2400);, delay: function () return anime.random (0, 1000);, autoplay: false);
Voor de translateY property gebruiken, gebruiken we de index van het element om een vertaalwaarde in te stellen. Gebruik makend van 50 * (i + 1) verhoogt het translateY waarde voor elk element met 50 pixels.
De schaalanimatie gebruikt ook de index van het element samen met de ingebouwde Math.random () functie om een drijvende-komma, pseudo-willekeurig getal kleiner dan 1 te retourneren. Op deze manier schalen de elementen willekeurig, maar de i / 10 een deel van het eigendom vergroot enigszins de mogelijkheid dat elementen die op het einde verschijnen een grotere afmeting hebben.
In de code voor rotatie-animatie gebruiken we de anime.random (a, b) helperfunctie om willekeurige gehele getallen tussen -180 en 180 te krijgen. Deze functie is handig voor het toewijzen van willekeurige integraalwaarden aan eigenschappen zoals translateY en draaien. Als u deze functie gebruikt om willekeurige schaalwaarden toe te wijzen, worden extreme resultaten geproduceerd.
De grensradiuswaarde voor verschillende elementen wordt bepaald door de breedte van doelelementen te berekenen met behulp van de el functieparameter. Ten slotte kent het laatste deel van de code willekeurige waarden toe aan de looptijd en vertraging parameters ook.
Je kunt zien dat de animatie die door het laatste deel wordt bereikt erg willekeurig is. Er is geen relatie tussen de waarden van verschillende eigenschappen van elementen of de waarden voor vertraging en duur. In het echte leven is het verstandiger om waarden te gebruiken die een zekere richting aan de animatie kunnen toevoegen.
Het is ook mogelijk om verschillende eigenschappen van uw doelelementen met behulp van keyframes te animeren. Elk hoofdframe bestaat uit een array van het eigenschapsobject. U kunt het object gebruiken om de eigenschapswaarde op te geven, looptijd, vertraging en versoepeling voor dat deel van de animatie. De volgende code maakt een op keyframe gebaseerde vertaalanimatie.
var keyframeTranslation = anime (targets: '.square', translateY: [value: 100, duration: 500, value: 300, duration: 1000, delay: 1000, value: 40, duration: 500, delay : 1000], autoplay: false); var keyframeAll = anime (targets: '.square', translateY: [value: 100, duration: 500, value: 300, duration: 1000, delay: 1000, value: 40, duration: 500, delay : 1000], schaal: [value: 1.1, duration: 500, value: 0.5, duration: 1000, delay: 1000, value: 1, duration: 500, delay: 1000], rotate: [ waarde: 60, duur: 500, waarde: -60, duur: 1000, vertraging: 1000, waarde: 75, duur: 500, vertraging: 1000], borderRadius: [value: 10, duration: 500, waarde: 50, duur: 1000, vertraging: 1000, waarde: 25, duur: 500, vertraging: 1000], vertraging: functie (el, i) retourneer 100 * (i + 1) , autoplay: false);
U kunt ook meerdere eigenschappen tegelijk animeren door verschillende of dezelfde waarden voor alle parameters op te geven. In het tweede geval de globale vertraging parameter past een eerste vertraging toe op alle elementen op basis van hun index. Deze vertraging is onafhankelijk van de vertraging die wordt toegepast op elke eigenschap in de hoofdframes.
Tot nu toe in de serie hebben we de vertraging parameter om verschillende animaties in een specifieke volgorde af te spelen. Om vertraging voor dit doel te gebruiken, moeten we ook de duur van de vorige animatie weten.
Met de toenemende complexiteit van de animatiereeks, wordt het behouden van de juiste vertragingswaarde erg vervelend. Elke wijziging in de duur van een van de animaties zal ons dwingen alle vertragingswaarden opnieuw te berekenen om de animaties in de oorspronkelijke volgorde te houden.
Een betere oplossing voor dit probleem is het gebruik van tijdlijnen om de animatiereeks te besturen. Je moet de gebruiken anime.timeline () functie om een tijdlijn te maken in Anime.js. U kunt ook verschillende parameters aan deze functie doorgeven als een object. Deze parameters kunnen de richting aangeven waarin de tijdlijn wordt afgespeeld, de nummerlussen en een automatisch afspelen parameter om te bepalen of de animatie automatisch moet worden afgespeeld. Al deze parameters zijn in detail besproken in de parameters-tutorial van deze serie.
U kunt verschillende animaties toevoegen aan een tijdlijn met behulp van de toevoegen() methode. Alle animaties die aan de tijdlijn worden toegevoegd, worden afgespeeld in de volgorde waarin ze zijn toegevoegd. Het is mogelijk om absolute of relatieve offsetwaarden te specificeren om de volgorde te bepalen waarin de animaties worden afgespeeld.
Wanneer relatieve offsetwaarden worden gebruikt, wordt de starttijd van de huidige animatie bepaald ten opzichte van de timing van de vorige animatie. Relatieve offsets kunnen uit drie soorten zijn:
De volgende code laat zien hoe u een standaardtijdlijn en een tijdlijn met relatieve offsetwaarden kunt maken.
var basicTimeline = anime.timeline (direction: "alternate", loop: 2, autoplay: false); basicTimeline.add (targets: '.square', translateY: 200). add (targets: '.red', translateY: 100). add (targets: '.blue', translateY: 0); var offsetTimeline = anime.timeline (direction: "alternate", loop: 2, autoplay: false); offsetTimeline.add (targets: '.square', translateY: 200). add (targets: '.red', offset: '+ = 1000', translateY: 100). add (targets: '.blue ', offset:' * = 2 ', translateY: 0);
Klik op de Offset tijdlijn knop in de bovenstaande demo. Je zult zien dat er een vertraging van 2 seconden is tussen het einde van de animatie van rode vierkanten en het begin van de animatie van blauwe vierkanten.
We hebben geen a gespecificeerd looptijd voor de rode vierkant-animatie. Daarom wordt een standaardwaarde van 1000ms of 1s gebruikt als duur. De vermenigvuldigeroffset van de blauwe vierkant-animatie verdubbelt die waarde en dit resulteert in een vertraging van twee seconden in de animatie.
Wanneer absolute offsetwaarden worden gebruikt, wordt de starttijd van de tijdlijn als referentiepunt gebruikt. Het is mogelijk om de volgorde waarin de animaties worden gespeeld om te keren door grote offsetwaarden te gebruiken voor animaties die aan het begin van de tijdlijn voorkomen.
Anime.js heeft een verscheidenheid aan opties om te spelen, pauzeren, herstarten of op elk gewenst moment naar animaties of tijdlijnen te zoeken.
De spelen() Met de functie kunnen we de animatie starten vanaf de huidige voortgang. De pauze() functie bevriest de animatie op het moment dat de functie werd aangeroepen. De herstarten() functie start de animatie vanaf het begin, ongeacht de huidige voortgang. De seek (waarde) functie kan worden gebruikt om de animatie te versnellen met waarde aantal milliseconden.
Houd er rekening mee dat het spelen() functie hervat alleen de animatie vanaf het moment dat deze was gepauzeerd. Als de animatie al is afgelopen, kunt u de animatie niet opnieuw afspelen met spelen(). Om de animatie opnieuw af te spelen, moet u de herstarten() functie.
Accentsconagua
var slowAnimation = anime (targets: '.square', translateY: 250, borderRadius: 50, duration: 4000, easing: 'linear', autoplay: false); document.querySelector ('. play'). onclick = slowAnimation.play; document.querySelector ('. pause'). onclick = slowAnimation.pause; document.querySelector ('. restart'). onclick = slowAnimation.restart; var seekInput = document.querySelector ('. seek'); seekInput.oninput = function () slowAnimation.seek (slowAnimation.duration * (seekInput.value / 100)); ;Merk op dat we niet gebruiken seekInput.value om een waarde in te stellen voor de zoekfunctie. Dit komt omdat de maximale waarde voor de bereikinvoer is ingesteld op 100 in de markup. Door direct de waarde voor het invoerbereik te gebruiken, kunnen we slechts tot 100ms zoeken. Het vermenigvuldigen van de bereikinvoerwaarde met de animatieduur zorgt ervoor dat we de animatie van het begin tot het einde kunnen zoeken op onze bereikschuifregelaar.
In deze zelfstudie hebt u geleerd hoe u verschillende eigenschapswaarden als getallen, functies of hoofdframes kunt animeren. Je hebt ook geleerd hoe je tijdlijnen in Anime.js bestuurt en manipuleert om de volgorde te bepalen waarin een animatiereeks wordt afgespeeld.
Als u op zoek bent naar extra bronnen om te studeren of te gebruiken in uw werk, kijk dan wat we beschikbaar hebben op de Envato-marktplaats.
Als je nog vragen hebt over deze tutorial, laat het me dan weten in de comments.
