Anime.js - Een lichtgewicht JavaScript-animatiebibliotheek
Web-animatie heeft een lange weg afgelegd. Niet alleen kunnen ontwikkelaars een animatie maken met een combinatie van CSS / SVG / JS, maar er zijn ook tientallen gratis bibliotheken om tijd te besparen in het proces.
Een van mijn favorieten is Anime.js, een volledig vrije, open bron JavaScript-animatiebibliotheek.
Deze bibliotheek kan doe het allemaal. Haar gebouwd op JavaScript maar het ook vertrouwt sterk op CSS-animaties. U kunt individuele pagina-elementen targeten via de DOM of je kunt zelfs richten aangepaste SVG's.
Alle documentatie is zelf gehost op GitHub, dus misschien moet je scrollen om precies te vinden wat je zoekt. Maar elke animatiefunctie komt met een paar parameters zoals vertraging, duur en versoepeling.
Let op deze bibliotheek komt niet met veel standaard animatiestijlen. Anime.js is gemaakt voor ontwikkelaars die hun animaties willen aanpassen zonder uitgebreide code te schrijven.
Voor een live voorbeeld, Bekijk hieronder de pen van Codepen. De code is buitengewoon eenvoudig maar je krijgt een geloofwaardige animatie met squash & stretch plus verwachting, beide grondbeginselen van animatie.
Een eerlijke waarschuwing: de Anime.js-bibliotheek is dicht. Het is niet zo moeilijk om een aangepaste animatie te maken, maar dat moet wel Begrijp enkele basisprincipes zoals versoepeling en algemene JavaScript-syntaxis voor callbacks en opties.
Maar alle informatie die u nodig hebt is op de repopagina, inclusief veel codevoorbeelden en gedetailleerde documentatie tabellen. En u kunt door open bugrapporten bladeren of de ondersteuningsmogelijkheden van uw browser bekijken alle belangrijke browsers en IE 10+.
Dit is gemakkelijk een van de beste animatiebibliotheken voor webontwikkelaars en het zou je go-to-oplossing voor moeten zijn elke complexe webanimatie.
Om een aantal te zien live voorbeelden, bekijk deze verzameling Anime.js-demo's die worden gehost op CodePen. Hieronder plaatste ik mijn favoriet die animeert het hele logo vanaf nul, met echte levendigheid.
