Share
Anime.js is een lichtgewicht op JavaScript gebaseerde animatiebibliotheek. U kunt het gebruiken om verschillende CSS-eigenschappen, SVG- of DOM-kenmerken op een webpagina te animeren. Met de bibliotheek kunt u alle aspecten van de animatie beheren en beschikt u over veel manieren om de elementen te specificeren die u wilt targeten of de eigenschappen die u wilt animeren.
Je hebt volledige controle over de volgorde waarin de animaties worden afgespeeld of over hoe gesynchroniseerd de animaties van verschillende elementen ten opzichte van elkaar zijn. De bibliotheek ondersteunt alle moderne browsers, inclusief IE10+.
In deze tutorialserie leert u alle functies van Anime.js kennen zodat u ze gemakkelijk kunt gebruiken in real-life projecten.
Voordat we diep in het onderwerp duiken, moeten we eerst de bibliotheek installeren. Je kunt een van beide gebruiken NPM of prieel om de installatie uit te voeren door de volgende opdrachten uit te voeren:
npm installeer animejs bower installeer animejs
U kunt de bibliotheek ook downloaden en opnemen in uw project of direct linken naar de nieuwste versie van de bibliotheek die op een CDN wordt gehost.
Na een succesvolle installatie bent u nu klaar om deze bibliotheek te gebruiken om interessante animaties aan uw elementen toe te voegen. We beginnen met de basis van de bibliotheek, waarbij we ons concentreren op één bepaald gebied per keer.
Als u animaties wilt maken met Anime.js, moet u de Anime () functie en geef het een object door met sleutel / waarde-paren die de doelelementen en eigenschappen opgeven die u wilt animeren, onder andere. U kunt de doelen om Anime.js te vertellen welke elementen je wilt animeren. Met deze sleutel kunnen waarden in verschillende indelingen worden geaccepteerd.
CSS-kiezers: U kunt een of meer CSS-kiezers doorgeven als een waarde voor de doelen sleutel.
var blue = anime (targets: '.blue', translateY: 200); var redBlue = anime (targets: '.red, .blue', translateY: 200); var even = anime (targets: '.square: nth-child (even)', translateY: 200); var notRed = anime (targets: '.square: not (.red)', translateY: 200);
In het eerste geval animeert Anime.js alle elementen met een blauw klasse. In het tweede geval animeert Anime.js alle elementen met de rood of blauw klasse. In het derde geval animeert Anime.js alle even kinderen met een plein klasse. In het laatste geval animeert Anime.js alle elementen met een plein klasse die geen a heeft rood klasse.
DOM-knooppunt of nodelist: U kunt ook een DOM-knooppunt of een NodeList gebruiken als waarde voor de doelen sleutel. Hier zijn een paar voorbeelden van het instellen van de doelen als een DOM-knooppunt.
Accentsconagua
var special = anime (targets: document.getElementById ('special'), translateY: 200); var blue = anime (targets: document.querySelector ('. blue'), translateY: 200); var redBlue = anime (targets: document.querySelectorAll ('. red, .blue'), translateY: 200); var even = anime (targets: document.querySelectorAll ('. square: nth-child (even)'), translateY: 200); var notRed = anime (targets: document.querySelectorAll ('. square: not (.red)'), translateY: 200);In het eerste geval heb ik de getElementById () functie om ons speciale element te krijgen. De querySelector () functie wordt gebruikt om het eerste element te krijgen dat de blauwe klasse heeft. De querySelectorAll () functie wordt gebruikt om alle elementen in het document te krijgen die overeenkomen met de opgegeven groep selectors.
Er zijn ook veel andere functies die u kunt gebruiken om uw doelelementen te selecteren die u wilt animeren. U kunt bijvoorbeeld alle elementen met een bepaalde klassenaam gebruiken met de getElementsByClassName () functie. Op dezelfde manier kunt u ook alle elementen met een gegeven labelnaam gebruiken met behulp van de getElementsByTagName () functie.
Elke functie die een DOM-knooppunt of een NodeList retourneert, kan worden gebruikt om de waarde van de doelen sleutel in Anime.js.
Voorwerp: U kunt ook een JavaScript-object gebruiken als waarde voor de doelen sleutel. De sleutel van dat object wordt gebruikt als een identifier en de waarde wordt gebruikt als een getal dat moet worden geanimeerd.
Vervolgens kunt u de animatie weergeven in een ander HTML-element met behulp van extra JavaScript. Hier is de code om de waarden van twee verschillende sleutels van een object te animeren.
var filesScanned = count: 0, infected: 0; var scanning = anime (targets: filesScanned, count: 1000, infected: 8, round: 1, update: function () var scanCount = document.querySelector ('. scan-count'); scanCount.innerHTML = filesScanned.count ; var infectedCount = document.querySelector ('. besmet-count'); infectedCount.innerHTML = filesScanned.infected;);De bovenstaande code animeert de gescande bestanden, telt van 0 tot 1.000 en de geïnfecteerde bestanden tellen van 0 tot 8. Houd er rekening mee dat u numerieke waarden alleen op deze manier kunt animeren. Als u probeert een sleutel van 'AAA' naar 'BOY' te animeren, resulteert dit in een fout.
We hebben ook een callback-functie gebruikt voor de bijwerken sleutel die op elk frame wordt aangeroepen terwijl de animatie wordt uitgevoerd. We hebben het hier gebruikt om het aantal gescande en geïnfecteerde bestanden bij te werken. U kunt echter een stap verder gaan en gebruikers een foutmelding geven wanneer het aantal geïnfecteerde bestanden een bepaalde drempel overschrijdt.
reeks: De mogelijkheid om een JavaScript-array op te geven als doel wordt handig wanneer u een aantal elementen moet animeren die onder verschillende categorieën vallen. Als u bijvoorbeeld een DOM-knooppunt, een object en een heleboel andere elementen op basis van CSS-selectors wilt animeren, kunt u dit eenvoudig doen door ze allemaal in een array te plaatsen en vervolgens die array als waarde voor de array op te geven. doelen sleutel. Het volgende voorbeeld zou het duidelijker moeten maken:
var multipleAnimations = anime (targets: [document.querySelectorAll ('. blue'), '.red, #special'], translateY: 250);Nu u weet hoe u verschillende elementen moet opgeven die u wilt animeren, wordt het tijd om meer te weten te komen over alle eigenschappen en kenmerken die kunnen worden geanimeerd met behulp van de bibliotheek.
CSS-eigenschappen: Met Anime.js kunt u veel CSS-eigenschappen animeren, zoals de breedte, hoogte en kleur, voor verschillende doelelementen. De definitieve waarden van verschillende animeerbare eigenschappen zoals achtergrondkleur en randbreedte worden gespecificeerd met behulp van een kameelgevalversie van die eigenschap. Daarom wordt achtergrondkleur Achtergrond kleur, en de randbreedte wordt grensbreedte. Het volgende codefragment laat zien hoe u de linkerpositie en de achtergrondkleur van een doelelement in Anime.js kunt animeren.
var animateLeft = anime (targets: '.square', links: '50% '); var animateBackground = anime (targets: '.square', backgroundColor: '# f96');
De eigenschappen kunnen allerlei waarden accepteren die ze zouden hebben geaccepteerd bij gebruik in reguliere CSS. Bijvoorbeeld de eigenschap links kan worden ingesteld op 50vh, 500px, of 25em. U kunt de waarde ook als een kaal nummer opgeven. In dit geval zou het aantal worden geconverteerd naar een pixelwaarde. Op dezelfde manier kan de achtergrondkleur worden opgegeven als een hexadecimale, RGB- of HSL-kleurwaarde.
CSS-transformaties: U kunt ook verschillende CSS-transformatie-eigenschappen animeren met Anime.js. Vertalen langs de x- en y-assen kan worden bereikt met behulp van de translateX en translateY eigenschappen. Evenzo is het mogelijk om een element langs een specifieke as te schalen, te draaien of te roteren met behulp van de schaal, scheef en draaien eigenschap die overeenkomt met die specifieke as.
U kunt verschillende hoeken opgeven, in termen of graden of in termen van beurt. De waarde van 1 beurt is gelijk aan 360 °. Dit kan de berekening eenvoudiger maken als u weet hoeveel u de elementen wilt draaien in termen van volledige rotaties. Het volgende voorbeeld laat zien hoe de schaal, vertaling of rotatie van een element zowel individueel als in één keer kan worden geanimeerd.
var animateScaling = anime (targets: '.square', scale: 0.8); var animateTranslation = anime (targets: '.square', translateX: window.innerWidth * 0.8); var animateRotation = anime (targets: '.square', rotate: '1 turn'); var animateAll = anime (targets: '.square', schaal: 0.8, translateX: window.innerWidth * 0.8, rotate: '1 turn');
SVG-attributen: Het is mogelijk om attributen van verschillende SVG-elementen te animeren met Anime.js. De enige voorwaarde is dat de waarde van die attributen numeriek moet zijn. Dit vermogen om verschillende attributen te animeren opent de mogelijkheid om een aantal echt coole effecten te creëren. Omdat je net begint te leren over Anime.js, zullen we de voorbeelden in deze tutorial erg basaal houden.
Naarmate u verder komt, leert u hoe u complexere animaties kunt maken. Hier is de code om het te animeren cx, cy en streekbreedte kenmerken van een cirkel. Net als de CSS-eigenschappen moet u een kamelengevalversie van gebruiken streekbreedte om de code te laten werken.
var animateX = anime (targets: '.circle', cx: window.innerWidth * 0.6); var animateStrokeWidth = anime (targets: '.circle', strokeWidth: '25');
DOM-kenmerken: U kunt ook numerieke DOM-kenmerken animeren, net zoals u de SVG-kenmerken hebt geanimeerd. Een situatie waarbij het animeren van een DOM-kenmerk nuttig kan zijn, is het voortgangselement HTML5. Dit element heeft twee attributen, waarde en max. In ons voorbeeld zullen we het waardekenmerk animeren om de voortgang van ons bestandsoverdrachtproces te laten zien. Hier is de code om het te animeren waarde attribuut.
var animateProgress = anime (targets: 'progress', waarde: 100, easing: 'linear');
In deze zelfstudie hebt u geleerd over alle manieren om doelelementen in Anime.js te selecteren en over het animeren van verschillende CSS-eigenschappen en bijbehorende attributen. Op dit moment controleren we niets met betrekking tot de daadwerkelijke animatie.
JavaScript is aantoonbaar de taal van het web. Het is natuurlijk niet zonder zijn leercurven, en er zijn genoeg kaders en bibliotheken om je bezig te houden, zoals je kunt zien. 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.
In de volgende zelfstudie van de serie leert u hoe u de versnelling, vertraging en duur van de animatie kunt regelen voor verschillende eigenschappen, zowel in groepsverband als individueel. Je leert dan hoe je al deze animatieparameters kunt regelen voor individuele elementen.
.
