J'ai quelques illustrations réalisées dans Illustrator et je prévois de l'animer pour un site Web sur lequel je travaille, j'ai entendu parler de la boîte à outils Create.js avec flash, mais est-ce la meilleure façon de procéder ou y en a-t-il une autre " meilleure "façon de le faire?
Voici un exemple du type d'animations que je vise: http://kontramax.com/wp-content/uploads/envato/demo/coming_soon_machine/dark/
Réponses:
Il existe de nombreuses façons d'animer des choses sur le Web. Il existe encore plus de façons de créer des animations, puis d'exporter vers des animations Web.
Il y a d'énormes avantages à concevoir des animations dans quelque chose comme AfterEffects ou Animate CC (qui peuvent à la fois importer des fichiers Illustrator et Photoshop) pour des raisons évidentes de division du travail et d'utilisation d'un éditeur graphique.
Cela étant dit, vous devez toujours, au final, compiler l'un des éléments suivants :
Capacités d'interaction limitées:
Plus entièrement interactif:
Maintenant, je vais entrer dans chacun un peu plus en détail.
Un GIF est un bon moyen de procéder lorsque les animations ne nécessitent pas beaucoup d'interaction, n'ont pas besoin d'être dimensionnées dynamiquement et sont relativement petites. Les GIF bien faits peuvent être aussi détaillés que l'illustration que vous avez liée sans soucis de performances. Même une interaction mineure utilisant une superposition transparente placée dessus (ou juste une partie de celle-ci) est possible.
Remarque: il existe désormais un .gifvformat créé par Imgur qui convertit les fichiers GIF à la volée en formats vidéo WebM ou MP4. Cela augmente les performances en réduisant considérablement la taille du fichier final. Vous pourriez envisager de faire de même.
Une autre façon de conserver une animation fluide mais très stylée consiste à utiliser un sprite. Google utilise cette approche pour des choses comme l' animation de logo . Un autre excellent exemple est l'ancien site Web d'Alexander Engzell qui avait une animation typographique malade utilisant cette approche. Ceci est optimal lorsqu'un GIF est trop volumineux mais vous n'avez pas besoin de beaucoup d'interaction.
J'ai également vu une animation JavaScript très intéressante qui ressemble à un sprite ou un GIF utilisé par Google (survoler l'image Chrome en haut à gauche - cela nécessite d'être dans Chrome) mais utilise un masque animé à la place. Je suppose qu'ils ont utilisé cette approche pour limiter la taille totale du fichier.
Nous avons acquis de grandes capacités en matière de vidéo ces dernières années. L' <video>élément nous permet de personnaliser la façon dont nous interagissons et utilisons les vidéos comme jamais auparavant. Nous pouvons maintenant utiliser facilement des vidéos d'arrière-plan en plein écran et faire des choses comme aller image par image sur le défilement . J'ai également remarqué que FaceBook utilise la vidéo pour certaines animations simples lors de l'accueil des utilisateurs sur leur flux lors d'événements spéciaux. Les avantages sont qu'il peut être compressé à une taille de fichier assez petite et peut faire une plus large gamme d'animations (tout ce que les logiciels de montage vidéo peuvent faire). En tant que tel, si quelqu'un peut faire une vidéo malade, il est assez facile de transformer cela en un ajout fantastique à une page Web.
De toute évidence, les vidéos ne sont pas bonnes pour la majorité des animations sur le Web (par exemple, les transitions de boutons, etc.), alors ne les utilisez pas partout.
Cela étant dit, si vous voulez que l'animation soit générée dynamiquement, lorsque vous avez besoin de plus qu'une interaction vraiment basique, lorsque vous voulez créer des environnements 3D, et dans de nombreux autres cas, un GIF, un sprite ou une vidéo ne le feront tout simplement pas coupe-le. Une fois que cela est décidé, il existe plusieurs autres options, dont la meilleure dépend de votre animation et de vos besoins.
Je n'ai pas de statistiques, mais la plupart des animations Web que j'ai vues utilisent Canvas . Canvas est idéal à utiliser en raison de ses performances et de sa flexibilité dans la création. Il n'utilise qu'un seul élément de navigateur (DOM) car il peint juste - comme sur un vrai canevas - des choses les unes sur les autres. En gardant une trace de ce qui est peint et où avec JavaScript, nous pouvons créer des animations et même des jeux assez impressionnants.
Cependant, le principal inconvénient de l'utilisation de Canvas est sa difficulté relative à l'échelle. Souvent, en fonction de l'animation bien sûr, il est plus difficile de créer une animation Canvas réactive que d'utiliser d'autres moyens. Un autre inconvénient est que le fait d'avoir beaucoup de contenu sur un canevas n'est pas très convivial pour le référencement car les éléments du canevas ne sont pas explorables (vous pouvez contourner cela en mettant du HTML visuellement caché du contenu, le cas échéant). Sur la même note, des choses comme la sélection de texte pour les utilisateurs est difficile avec Canvas (surtout sans utiliser une bibliothèque comme CreateJS).
Les griffonnages de Google sont souvent utilisés principalement dans Canvas. Quand ils ont un jeu ou une animation interactive, ils utilisent Canvas à chaque fois que je les regarde. S'il n'y a pas d'interaction, ils utiliseront un GIF ou un sprite.
Il existe de nombreuses bibliothèques pour faciliter le travail avec Canvas, bien que ce ne soit certainement pas nécessaire en fonction de ce qui doit être fait. Parmi ceux créés uniquement pour Canvas, vous trouverez CreateJS (que vous pouvez exporter depuis Animate CC), Pixi.js , PaperJS , KineticJS et FabricJS (placés dans l'ordre de mon impression d'eux). Un plugin After Effects nommé Lottie (anciennement BodyMovin) peut également exporter vers Canvas (ou SVG [1] ) et dispose d'un moteur d'animation intégré.
Bien sûr, vous pouvez également associer facilement de plus grandes bibliothèques d'animations comme GSAP avec Canvas. Pour quelque chose d'aussi détaillé que l'illustration que vous avez liée, je recommanderais d'utiliser un certain type de cadre, mais pour beaucoup de choses, ils ne sont pas vraiment nécessaires, juste utiles - surtout si vous savez déjà utiliser l'un d'entre eux.
Un autre moyen incroyablement puissant pour animer des choses sur le Web d'une manière facilement réactive est d'utiliser un SVG ( Scalable Vector Graphics ). Ils remplissent bien leur objectif - être des vecteurs évolutifs -. Beaucoup trouvent l'utilisation de SVG déroutante au début, mais la plupart des choses comme le système de coordonnées et les transformations de SVG ont de grands articles les expliquant.
L'une des nombreuses belles choses à propos de SVG est qu'il peut être animé avec JavaScript, du CSS pur (y compris les :hoverétats, transforms, transitions et animations) ou des animations SMIL (la façon "native" d'animer des choses avec SVG - mais IE ne le fait pas ' t le soutenir du tout et il est progressivement déprécié ). Je recommande d'essayer d'utiliser CSS d'abord, puis JavaScript chaque fois que ce n'est pas (relativement) simple en CSS. Pour le morphing d'éléments SVG, il est pratiquement nécessaire d'utiliser un outil comme le plugin MorphSVG de GSAP, sauf si vous êtes d'accord avec un support partiel, auquel cas SMIL pourrait être acceptable.
Étant donné que les éléments SVG peuvent avoir n'importe quelle forme, ils peuvent être utilisés pour créer des effets sympas . Sarah Drasner a fait quelques tests de performances utiles concernant les animations SVG qui montrent quelles façons d'animer SVG sont les meilleures performances.
Selon l'animation (et le besoin de prise en charge du navigateur), une bibliothèque comme Snap.svg ou GSAP peut être utile, mais souvent en CSS et, si nécessaire, un peu de JS personnalisé est tout ce qui est requis. Cela étant dit, un plugin After Effects appelé Lottie (anciennement BodyMovin) et une extension Flash appelée Flash 2 SVG peuvent être très utiles pour créer des animations SVG.
Pour plus de détails, jetez un oeil à cet article connexe spécifiquement sur l'animation d'éléments SVG.
PS Il est préférable d'utiliser des SVG dans une <object>balise ou intégrés directement dans un <svg>élément XML s'il est interactif et comme image d'arrière-plan s'il n'est pas interactif, mais il existe d'autres façons de le faire également.
D'après mon expérience, les animations et transitions CSS devraient principalement être utilisées pour les éléments d'interface utilisateur et d'autres transitions et animations de base. Même alors, il est parfois approprié d' utiliser une bibliothèque d'animation JS comme GSAP ou Velocity.js pour les animations / transitions d'interface utilisateur. Cela dépend vraiment du type de comportement que vous souhaitez et de l'opportunité de le faire en CSS.
Bien que nous puissions créer des choses folles avec du CSS pur, il est généralement plus difficile de créer des illustrations complexes comme celle que vous fournissez à titre d'exemple en utilisant CSS, même lorsque vous manipulez des images en plus. Les animations CSS complexes sont souvent plus difficiles à gérer que leurs homologues JavaScript. L'autre inconvénient est que les animations CSS sont difficiles à changer avec JavaScript et qu'elles ne fonctionnent pas trop bien lorsqu'elles sont mélangées avec JavaScript.
Cela étant dit, les interactions simples utilisant des transitions et des animations devraient généralement utiliser CSS; vous devez y accéder par défaut. Pour commencer à apprendre à animer en utilisant CSS, consultez mon introduction à l'animation Web .
Vous pouvez également trouver des animations utiles et des fonctions d' accélération dans des bibliothèques comme Animate.css que vous pouvez extraire et ajouter à vos propres projets. Vous n'aurez presque jamais besoin de toute la bibliothèque, prenez seulement les parties que vous voulez.
Les animations JavaScript basées sur DOM sont assez simples. Ils ont une mauvaise réputation en raison de terribles bibliothèques d'animation comme jQuery animate(), mais ils peuvent être particulièrement performants, en particulier lors de l'utilisation de l'API d'animations Web (discutée ci-dessous), ou d'une bibliothèque d'animation spécialisée comme GSAP , Velocity.js ou mo.js ( GSAP a même un plugin spécial pour remplacer .animatespécifiquement jQuery ). En utilisant une telle bibliothèque, ils peuvent souvent surpasser d'autres types d'animations pour des animations plus intensives, telles que l'animation de nombreux éléments.
La principale raison pour laquelle vous devez utiliser une animation basée sur DOM est que vous avez beaucoup d'animations utilisateur ou des chronologies complexes impliquant des éléments DOM déjà créés. Souvent, il est préférable d'essayer d'utiliser quelque chose comme Canvas sur le DOM pour des raisons déjà spécifiées.
Des bibliothèques comme GSAP nous permettent de faire des choses folles comme ralentir une animation en survol en gardant une trace des matrices d'animation. De cette façon, les animations basées sur DOM peuvent être plus personnalisées et interactives que toute autre forme d'animation si elles sont bien faites. Le seul inconvénient est que parfois, selon la façon dont il est construit et ce qu'il doit faire, il ne fonctionne pas bien.
WebGL est un moyen de créer principalement des œuvres 3D. Il a des projets impressionnants que vous devriez vérifier. Il ne doit pas être utilisé sur chaque page Web, bien sûr, mais il est important de le mentionner.
Il anime en fait des éléments DOM pour créer des environnements 3D (et 2D), ce qui est génial en raison de son potentiel. Lors de l'utilisation d'une bibliothèque, WebGL revient à l'utilisation de Canvas mais n'a toujours pas une grande prise en charge sur mobile et peut être très performant. Généralement, il est assez clair quand vous devez utiliser WebGL ou non.
D'après mon expérience, l'utilisation d'une bibliothèque WebGL est pratiquement nécessaire. Heureusement, il y en a de bons. ThreeJS est de loin le plus courant que j'ai vu, suivi de PixiJS . Un framework WebGL comme A-Frame peut également faciliter sa récupération et sa création.
L' API d'animations Web est une tentative de normaliser la façon dont les animations sont implémentées et maintenues sur les navigateurs associées à des améliorations de performances. Il est destiné à être utilisé avec des éléments DOM, y compris SVG. Il ressemble à la façon dont une animation CSS est structurée (sous une forme JS) mais ajoute des fonctionnalités telles qu'une chronologie et des performances améliorées.
Il améliore les performances en mettant des animations sur le fil du compositeur (pour plus de détails, consultez cet excellent article sur le sujet). Pour une introduction à son utilisation, consultez la documentation de Mozilla ou cet article d'introduction .
Vous pouvez demander: " Cela remplacera-t-il les bibliothèques d'animation JavaScript? " La réponse est " Espérons que certains ". Il est avantageux pour tout le monde que les moteurs d'animation du navigateur natif s'améliorent et, comme ils le font, certaines bibliothèques d'animation moins puissantes deviendront inutiles. Cela étant dit, des bibliothèques d'animations plus puissantes auront toujours des avantages supplémentaires comme ceux notés par GSAP . Que vous ayez ou non besoin d'une bibliothèque une fois que WAAPI est largement pris en charge est toujours déterminé par vos besoins.
WAAPI n'a actuellement pas un bon support mais peut être utilisé avec un polyfill en production aujourd'hui. Il semble que cela va continuer à s'améliorer et à obtenir plus de soutien.
Évitez d'utiliser des propriétés non performantes ou de provoquer des reflux / repeints .
Évitez d'animer un tas d'éléments sur la page car ils sont plus intensifs et peuvent également être difficiles à changer plus tard.
Lorsque vous utilisez CSS, utilisez une transitionsur une animation autant que possible (dans des limites raisonnables). Ils fonctionnent mieux et sont généralement plus faciles à travailler.
Utilisez intelligemment la will-changepropriété sur les grands éléments que vous allez animer pour que le navigateur le sache à l'avance. Pour plus de détails et de suggestions à ce sujet, lisez quelque chose comme cet article SitePoint sur le sujet.
Évitez setIntervalet optez pour les requestAnimationFramesynchronisations en JavaScript (de bonnes bibliothèques d'animation comme GSAP le font pour vous si vous utilisez leurs chronologies).
Lorsque vous le pouvez, utilisez l'API d'animations Web car elle a des capacités d'animation avec d'autres méthodes en JavaScript.
Vous ne devez jamais exécuter Flash dans le produit final . Les animations JavaScript fonctionnent mieux, sont plus dynamiques, sont plus faciles à éditer, ne nécessitent aucun téléchargement, fonctionnent sur plus de plates-formes (Flash ne fonctionne pas sur la plupart des tablettes / téléphones) et sont plus réactives que les anciennes Flash volumineuses. Ils ne sont également pas très accessibles et ne sont pas compatibles avec le référencement.
Cela étant dit, Animate CC (une nouvelle image de Flash) est un moyen utile de créer des animations et peut exporter vers Canvas à l'aide de Create.js .
Il existe généralement plusieurs méthodes que vous pouvez utiliser pour créer une animation. Le meilleur dépend de ce que vous voulez qu'il fasse, et parfois il n'y a pas de meilleure méthode claire. Souvent, je me retrouve à utiliser plusieurs sur le même projet. L'important est de penser de manière critique , de comprendre exactement comment vous voulez que l'animation se comporte et de décider de la méthode en fonction de cela. Cela aide également si vous avez travaillé un peu dans chacun.
[1] - Lottie peut également exporter vers Android natif, iOS et React Native .
D'après mon expérience, lors de la réalisation d'animations statiques (animations qui ne sont pas destinées à une interaction avec l'utilisateur), j'ai trouvé que ce qui fonctionnait le mieux pour moi était d'animer les illustrations dans After Effects et ensuite d'exporter le résultat final dans un fichier .GIF. Cela rend l'animation absolument conviviale et garantit une visualisation identique sur n'importe quel appareil.
Si, cependant, vous recherchez quelque chose avec lequel un utilisateur pourrait interagir, je pense que Canvas est en effet la voie à suivre, et pour cela CreateJS semble être le bon pour le travail avec la bibliothèque EaseJS.
Quoi qu'il en soit, selon votre exemple, vous pourriez tout aussi bien le faire avec un fichier GIF animé et obtenir exactement le même résultat.
Si vous travaillez avec After Effects, vous pouvez utiliser le plug-in Bodymovin . Il rend votre travail pour une utilisation mobile et Web. Vous aurez le fichier .json et lottie.js que vous pouvez utiliser dans votre code HTML. Mais vous devez d'abord désactiver Autoriser les scripts à écrire des fichiers et accéder au Réseau dans les paramètres généraux. Une fois cela fait, allez dans Fenêtre , Extensions et trouvez Bodymovin . Sélectionnez votre composition, définissez l'emplacement d'enregistrement et cliquez sur le rendu. Mettez vos fichiers .json et lottie.js dans votre code HTML et votre travail est terminé. Je pense que GIF n'est pas la meilleure solution car il a besoin de plus de temps pour se charger.
Vous pouvez le télécharger ici: http://aescripts.com/bodymovin Ajoutez simplement votre prix, ou si vous le voulez gratuitement, vous pouvez simplement mettre 0,00 $ ...
Voici un didacticiel pour utiliser un Bodymovin et définir votre animation dans votre site Web avec Visual Studio: youtube.com/watch?v=YmPsCD5jRDw&t=282s
Si vous connaissez les bases de HTML et CSS, cela devrait être facile pour vous. Ce tutoriel m'a aidé, j'espère que cela pourrait vous aider.