Ho fatto un paio di illustrazioni in Illustrator e sto programmando di animarlo per un sito Web su cui sto lavorando, ho sentito parlare del toolkit di Create.js con Flash, ma è il modo migliore di andare o c'è un altro " modo migliore di farlo?
Ecco un esempio del tipo di animazioni a cui sto puntando: http://kontramax.com/wp-content/uploads/envato/demo/coming_soon_machine/dark/
Risposte:
Esistono molti modi per animare le cose sul Web. Esistono ancora più modi per creare animazioni da esportare in animazioni Web.
Ci sono enormi vantaggi nella progettazione di animazioni in qualcosa come AfterEffects o Animate CC (che può sia importare file Illustrator che Photoshop) per le ovvie ragioni della divisione del lavoro e dell'uso di un editor grafico.
Detto questo , alla fine dovresti sempre compilare uno dei seguenti :
Capacità di interazione limitate:
Più completamente interattivo:
Ora, entrerò in ciascuno con un po 'più di dettaglio.
Una GIF è una buona strada da percorrere quando le animazioni non richiedono molta interazione, non hanno bisogno di essere dimensionate dinamicamente e sono relativamente piccole. Le GIF ben realizzate possono essere dettagliate come l'illustrazione che hai collegato senza preoccupazioni per le prestazioni. È possibile anche una piccola interazione usando una sovrapposizione trasparente posizionata sopra di essa (o solo una parte di essa).
Nota a margine : ora esiste un .gifvformato creato da Imgur che converte i file GIF al volo nei formati video WebM o MP4. Ciò aumenta le prestazioni riducendo notevolmente le dimensioni del file finale. Potresti considerare di fare lo stesso.
Un altro modo per mantenere un'animazione fluida ma di grande stile è usare uno sprite. Google utilizza questo approccio per cose come l' animazione del logo . Un altro grande esempio è il vecchio sito Web di Alexander Engzell che aveva un'animazione tipografica malata usando questo approccio. Questo è ottimale quando una GIF sarebbe troppo grande ma non hai bisogno di molta interazione.
Ho anche visto un'animazione JavaScript molto interessante che assomiglia a uno sprite o GIF utilizzato da Google (passa il mouse sull'immagine di Chrome in alto a sinistra - richiede di essere in Chrome) ma utilizza invece una maschera animata. Immagino che abbiano usato questo approccio per limitare la dimensione totale del file.
Abbiamo acquisito grandi capacità per quanto riguarda i video negli ultimi anni. L' <video>elemento ci consente di personalizzare il modo in cui interagiamo e utilizziamo i video come mai prima d'ora. Ora possiamo utilizzare facilmente i video di sfondo a schermo intero e fare cose come andare fotogramma per fotogramma sullo scorrimento . Ho anche notato che FaceBook utilizza video per alcune semplici animazioni quando accoglie gli utenti nel loro feed in occasione di eventi speciali. I vantaggi sono che può essere compresso in dimensioni di file piuttosto ridotte e può realizzare una gamma più ampia di animazioni (tutto ciò che il software di editing video può fare). Come tale, se qualcuno può creare un video malato, è abbastanza facile trasformarlo in una fantastica aggiunta a una pagina web.
Ovviamente, i video non vanno bene per la maggior parte delle animazioni sul web (ad es. Transizioni di pulsanti, ecc.), Quindi non usarle ovunque.
Detto questo, se vuoi che l'animazione sia generata in modo dinamico, quando hai bisogno di un'interazione più che reale, quando vuoi creare ambienti 3D e in molti altri casi, una GIF, uno sprite o un video semplicemente non lo faranno taglia. Una volta deciso, ci sono molte altre opzioni, la migliore delle quali dipende dall'animazione e dalle esigenze.
Non ho statistiche, ma la maggior parte delle animazioni web che ho visto usano Canvas . Canvas è ottimo da usare per le sue prestazioni e flessibilità nella creazione. Utilizza solo un elemento del browser (DOM) a causa del fatto che dipinge - come su una tela reale - le cose una sopra l'altra. Tenendo traccia di ciò che è dipinto e di dove con JavaScript, possiamo creare animazioni davvero fantastiche e persino giochi.
Tuttavia, il principale svantaggio dell'uso di Canvas è la relativa difficoltà di ridimensionamento. Spesso, a seconda dell'animazione, ovviamente, è più difficile realizzare un'animazione Canvas reattiva che utilizzare altri mezzi. Un altro aspetto negativo è che avere molti contenuti su una tela non è molto SEO friendly perché gli elementi della tela non sono scorrevoli (puoi aggirare questo mettendo un HTML visivamente nascosto del contenuto, se applicabile). Sulla stessa nota, cose come la selezione del testo per gli utenti è difficile con Canvas (specialmente senza usare una libreria come CreateJS).
Un uso principale di Canvas sono gli scarabocchi di Google , che vengono spesso eseguiti in Canvas. Quando hanno un gioco o un'animazione interattiva, usano Canvas ogni volta che lo guardo. Se non c'è interazione, useranno una GIF o uno sprite.
Ci sono molte ottime librerie per aiutarti a lavorare con Canvas più facilmente, anche se sicuramente non è necessario a seconda di ciò che deve essere fatto. Tra quelli realizzati appositamente per Canvas ci sono CreateJS (che puoi esportare da Animate CC), Pixi.js , PaperJS , KineticJS e FabricJS (disposti in ordine di mia impressione). Un plug-in After Effects chiamato Lottie (precedentemente BodyMovin) può anche esportare su Canvas (o SVG [1] ) e ha un motore di animazione integrato.
Naturalmente, puoi anche abbinare facilmente librerie di animazioni più grandi come GSAP con Canvas. Per qualcosa di così dettagliato come l'illustrazione che hai collegato, ti consiglio di usare un qualche tipo di framework, ma per molte cose non sono davvero necessarie, solo utili - specialmente se sai già come usarne una.
Un altro modo incredibilmente potente per animare le cose sul web in modo facilmente reattivo è utilizzare un SVG ( Scalable Vector Graphics ). Soddisfano il loro scopo - essendo vettori scalabili - bene. All'inizio molti trovano confuso l'uso degli SVG, ma molte cose come il sistema di coordinate e le trasformazioni di SVG hanno grandi articoli che li spiegano.
Una delle tante cose adorabili di SVG è che può essere animato con JavaScript, CSS puro (compresi :hoverstati transform, transitions, se e animation), o animazioni SMIL (il modo "nativo" per animare le cose con SVG - ma IE non lo fa ' non lo supportano affatto e viene gradualmente ammortizzato ). Consiglio di provare a usare prima CSS e poi JavaScript ogni volta che non è (relativamente) semplice in CSS. Per il morphing degli elementi SVG, è praticamente necessario utilizzare uno strumento come il plugin MorphSVG di GSAP a meno che tu non stia bene con un supporto parziale, nel qual caso SMIL potrebbe essere accettabile.
Poiché gli elementi SVG possono essere di qualsiasi forma, possono essere utilizzati per creare effetti fantastici . Sarah Drasner ha realizzato alcuni utili parametri di riferimento relativi alle animazioni SVG che mostrano quali modi di animare SVG sono le migliori prestazioni.
A seconda dell'animazione (e della necessità del supporto del browser), può essere utile una libreria come Snap.svg o GSAP, ma spesso volte CSS e, se necessario, un po 'di JS personalizzato è tutto ciò che serve. Detto questo, un plug-in After Effects chiamato Lottie (precedentemente BodyMovin) e un'estensione Flash chiamata Flash 2 SVG possono essere davvero utili per la creazione di animazioni SVG.
Per maggiori dettagli, dai un'occhiata a questo post correlato specificamente sull'animazione di elementi SVG.
PS È meglio usare SVG in un <object>tag o incorporato direttamente in un <svg>elemento XML se è interattivo e come immagine di sfondo se non è interattivo, ma ci sono anche altri modi per farlo.
Nella mia esperienza, le animazioni e le transizioni CSS dovrebbero essere utilizzate principalmente per gli elementi dell'interfaccia utente e altre transizioni e animazioni di base. Anche allora, a volte è appropriato usare una libreria di animazioni JS come GSAP o Velocity.js per animazioni / transizioni dell'interfaccia utente. Dipende davvero dal tipo di comportamento che desideri e se è conveniente fare o meno nei CSS.
Mentre possiamo creare cose folli con CSS puro, in genere è più difficile creare illustrazioni complesse come quella che fornisci come esempio usando CSS, anche quando si manipolano immagini in aggiunta. Le animazioni CSS complesse sono spesso più difficili da mantenere rispetto alle loro controparti JavaScript. L'altro aspetto negativo è che le animazioni CSS sono difficili da modificare con JavaScript e non vengono riprodotte troppo bene se mescolate con JavaScript.
Detto questo, le semplici interazioni che usano transizioni e animazioni dovrebbero di solito usare CSS; dovresti default. Per iniziare a imparare come animare usando i CSS, dai un'occhiata alla mia introduzione all'animazione web .
Puoi anche trovare animazioni utili e funzioni di allentamento in librerie come Animate.css da cui puoi estrarre e aggiungere ai tuoi progetti. Non avrai quasi mai bisogno dell'intera biblioteca, prendi solo le parti che desideri.
Le animazioni JavaScript basate su DOM sono abbastanza semplici. Hanno una cattiva reputazione a causa delle terribili librerie di animazione come quelle di jQuery animate(), ma possono essere particolarmente performanti, soprattutto quando si utilizza l'API di animazioni Web (discussa di seguito) o una libreria di animazioni specializzata come GSAP , Velocity.js o mo.js ( GSAP ha anche un plugin speciale per sostituire .animatespecificamente quelli di jQuery ). Utilizzando una libreria di questo tipo, spesso possono sovraperformare altri tipi di animazioni per animazioni più intense, come l'animazione di molti elementi.
Il motivo principale per cui dovresti utilizzare un'animazione basata su DOM è se hai molte animazioni utente o tempistiche complesse che coinvolgono elementi DOM già realizzati. Spesso è meglio provare a utilizzare qualcosa come Canvas sul DOM per motivi già specificati.
Biblioteche come GSAP ci permettono di fare cose folli come rallentare un'animazione al passaggio del mouse tenendo traccia delle matrici di animazione. In questo modo, le animazioni basate su DOM possono essere più personalizzate e interattive rispetto a qualsiasi altra forma di animazione se eseguite bene. L'unico lato negativo è che a volte, a seconda di come è costruito e cosa deve fare, non funzionerà bene.
WebGL è un modo per creare principalmente opere 3D. Ha alcuni progetti fantastici che dovresti dare un'occhiata. Non deve essere utilizzato su ogni pagina Web, ovviamente, ma è importante menzionarlo.
In realtà anima gli elementi DOM per creare ambienti 3D (e 2D) che sono fantastici a causa del potenziale che ha. Quando si utilizza una libreria, WebGL ricorre all'utilizzo di Canvas ma non ha ancora un grande supporto sui dispositivi mobili e può essere pesantemente performante. Generalmente è abbastanza chiaro quando è necessario utilizzare WebGL o meno.
Dalla mia esperienza, l'utilizzo di una libreria WebGL è praticamente necessario. Per fortuna ce ne sono alcuni buoni. ThreeJS è di gran lunga il più comune che abbia mai visto seguito da PixiJS . Un framework WebGL come A-Frame può anche rendere la raccolta e la creazione di elementi di base abbastanza facili.
L' API per le animazioni Web è un tentativo di standardizzare l'implementazione e la gestione delle animazioni nei browser abbinata a miglioramenti delle prestazioni. È pensato per essere usato con elementi DOM incluso SVG. Assomiglia al modo in cui sono strutturate le animazioni CSS (in una forma simile a JS) ma aggiunge funzionalità come una sequenza temporale e prestazioni migliorate.
Migliora le prestazioni inserendo animazioni nel thread del compositore (per maggiori dettagli dai un'occhiata a questo fantastico post sull'argomento). Per un'introduzione su come usarlo, controlla i documenti di Mozilla o questo post introduttivo .
Potresti chiedere: " Sostituiranno le librerie di animazioni JavaScript? " La risposta è " Speriamo un po ' ". È vantaggioso per tutti migliorare i motori di animazione del browser nativo e, man mano che lo fanno, alcune librerie di animazione meno potenti diventeranno inutili. Detto questo, le librerie di animazioni più potenti avranno ancora vantaggi aggiuntivi come quelli rilevati da GSAP . Se hai bisogno o meno di una libreria una volta che WAAPI è ampiamente supportato è ancora determinato dalle tue esigenze.
Attualmente WAAPI non ha un buon supporto ma può essere utilizzato con un polyfill in produzione oggi. Sembra che continuerà a migliorare e ad avere più supporto.
Evitare l'uso di proprietà non performanti o causare riduzioni / riduzioni .
Evita di animare un gruppo di elementi nella pagina in quanto sono più intensivi e può anche essere una seccatura cambiare in seguito.
Quando si utilizza CSS, utilizzare una transitionanimazione sopra quando possibile (entro limiti ragionevoli). Si comportano meglio e sono generalmente più facili da lavorare.
Usa la will-changeproprietà in modo intelligente su elementi di grandi dimensioni che animerai in modo che il browser lo sappia in anticipo. Per maggiori dettagli e suggerimenti a riguardo leggi qualcosa come questo articolo di SitePoint sull'argomento.
Evita setIntervale opta requestAnimationFramequando esegui i tempi in JavaScript (buone librerie di animazione come GSAP lo fanno per te se usi le loro linee temporali).
Quando puoi, usa l'API delle animazioni web perché ha funzionalità per l'animazione con altri metodi in JavaScript che non hanno.
Non si dovrebbe mai eseguire Flash nel prodotto finale . Le animazioni JavaScript funzionano meglio, sono più dinamiche, vengono modificate più facilmente, non richiedono download, funzionano su più piattaforme (Flash non funziona sulla maggior parte dei tablet / telefoni) e sono più reattive di quelle vecchie e voluminose. Inoltre non sono molto accessibili e non sono SEO friendly.
Detto questo, Animate CC (un rebranding di Flash) è un modo utile per creare animazioni e può esportare su Canvas usando Create.js .
Di solito ci sono più metodi che puoi usare per creare un'animazione. Il migliore dipende da cosa vuoi che faccia, e a volte non esiste un metodo chiaramente migliore. Spesso mi ritrovo a utilizzare multipli sullo stesso progetto. L'importante è pensare in modo critico , capire esattamente come vuoi che l'animazione si comporti e decidere il metodo basato su quello. Aiuta anche se hai lavorato in ognuno un po '.
[1] - Lottie può anche esportare in Android nativo, iOS e React Native .
Nella mia esperienza, quando ho realizzato animazioni statiche (animazioni che non sono destinate ad alcuna interazione con l'utente) ho scoperto che ciò che funzionava meglio per me era animare le illustrazioni in After Effects e successivamente esportare il risultato finale in un file .GIF. Ciò rende l'animazione assolutamente intuitiva per i browser e garantisce una visualizzazione identica su qualsiasi dispositivo.
Se, tuttavia, stai cercando qualcosa con cui un utente potrebbe interagire, credo che Canvas sia davvero la strada da percorrere, e per questo CreateJS sembra essere giusto per il lavoro con la libreria EaseJS.
Ad ogni modo, secondo il tuo esempio, potresti anche farlo con un file GIF animato e ottenere lo stesso esatto risultato.
Se lavori con After Effects puoi usare il plug-in Bodymovin . Rende il tuo lavoro per uso mobile e web. Avrai file .json e lottie.js che puoi usare nel tuo HTML. Ma prima devi disattivare Consenti agli script di scrivere file e accedere alla rete nelle impostazioni generali. Quando hai finito vai su Window , Extensions e trova Bodymovin . Seleziona la composizione, imposta la posizione per il salvataggio e fai clic su rendering. Inserisci i tuoi file .json e lottie.js nel tuo HTML e il tuo lavoro è fatto. Penso che GIF non sia la soluzione migliore perché ha bisogno di più tempo per caricare.
Puoi scaricarlo qui: http://aescripts.com/bodymovin Basta aggiungere il prezzo o, se lo desideri gratuitamente, puoi semplicemente mettere $ 0,00 ...
Ecco il tutorial per l'utilizzo di un Bodymovin e l'impostazione dell'animazione nel tuo sito Web con Visual Studio: youtube.com/watch?v=YmPsCD5jRDw&t=282s
Se conosci le basi HTML e CSS, dovrebbe essere facile per te. Quel tutorial mi ha aiutato, spero che questo possa aiutarti.