Anime.js - Et lett JavaScript-animasjonsbibliotek

Web animasjon har kommet langt. Ikke bare kan utviklere gjøre noen animasjoner ved hjelp av en kombinasjon av CSS / SVG / JS, men det finnes dusinvis av gratis biblioteker for å spare tid i prosessen.

En av mine favoritter er Anime.js, et helt gratis, åpen kildekode- JavaScript-animasjonsbibliotek .

Dette biblioteket kan gjøre alt . Det er bygget på JavaScript, men det er også avhengig av CSS-animasjoner . Du kan målrette mot individuelle sideelementer via DOM, eller du kan til og med målrette tilpassede SVGer .

All dokumentasjon er selvbetjent på GitHub, så du må kanskje bla for å finne akkurat det du leter etter. Men hver animasjonsfunksjon kommer med noen få parametere som forsinkelse, varighet og lettelse.

Merk at dette biblioteket ikke kommer med mange standard animasjonsstiler. Anime.js er laget for utviklere som vil tilpasse animasjonene sine uten å skrive verbose kode .

For et levende eksempel, sjekk ut kodepenna nedenfor. Koden er overordentlig enkel, men du får en troverdig animasjon med squash og strekk pluss forventning, begge grunnleggende for animasjon.

En rettferdig advarsel: Biblioteket Anime.js er tett . Det er ikke så vanskelig å lage en egendefinert animasjon, men du trenger å forstå noen grunnleggende elementer som lettelse og vanlig JavaScript-syntaks for tilbakeringinger og alternativer.

Men all informasjon du trenger er på repo siden, inkludert mange kodeksempler og detaljerte dokumentasjonstabeller . Og du kan bla gjennom åpne feilrapporter eller sjekke nettleserstøtte som for øyeblikket inneholder alle de største nettleserne og IE 10+ .

Dette er lett en av de beste animasjonsbiblioteker for webutviklere, og det bør være din go-to løsning for en kompleks web animasjon .

For å se en rekke levende eksempler, sjekk ut denne samlingen av Anime.js-demoer som er hostet på CodePen. Nedenfor har jeg lagt inn min favoritt som animerer hele logoen fra bunnen av, med ekte livskraft.

Slik sender du tilpassede meldinger til slakk fra programmet

Slack er en populær meldingsapp som brukes av mange lag. Den leveres med mange tjenester og en API for utviklere å integrere den med sine applikasjoner. I dagens innlegg ser vi hvordan du bruker en av sine tjenester som heter Incoming Webhooks, for å sende data til slakk fra en ekstern applikasjon.På

(Tekniske og design tips)

20 leksjoner Avengers kan lære deg om design

Avengers: Age of Ultron er for tiden tale om byen, så la oss snakke om dette berømte superlaget. Det er seks forskjellige tegn, hver med sin egen veletablerte franchise, og hver med en unik fargevalg, personlighet og overordnet «følelse». Og mest interessant, hver av dem har noen leksjoner å lære oss.La oss

(Tekniske og design tips)