Scénario d'animation. Bibliothèques JavaScript pour créer des animations époustouflantes. Optimisation des performances d'animation

07.02.2016
Si vous êtes maintenant dans une situation où vous devez créer une animation impressionnante pour un site Web, cet article vous fournira certainement des outils utiles.

Bonjour les amis ! Dans cet article, je vous invite à consulter ma sélection de superbes bibliothèques CSS et plugins JS qui vous aideront à implémenter les animations les plus compatibles sur votre site en quelques minutes.

Plugins JavaScript pour l'animation

Si vous souhaitez créer des animations déclenchées par un événement ou une action, les plugins d'animation JavaScript vous y aideront grandement. Mais il convient de noter que la plupart de ces animations sont écrites en CSS3 et sont contrôlées par en utilisant Javascript.

AniJS

Dynamique.js

Dynamic.js est une bibliothèque JavaScript permettant de créer des animations basées sur la physique.

mo.js

mo.js est une excellente bibliothèque pour créer des graphiques animés. Vous avez souvent vu un exemple de tels graphiques lorsque Google a placé un nouveau logo thématique (doodle), qui s'animait lorsqu'il était survolé ou cliqué.

cta.js

cta.js - Plugin JavaScript pour créer des appels à l'action animés. Beaucoup d’entre eux sont très impressionnants.

animo.js

animo.js - outil puissant pour gérer les animations CSS3.

html5tooltips.js

html5tooltips.js - de bonnes vieilles info-bulles avec conception moderne et animation sans dépendances, connectez-vous et utilisez.

Fusée

Rocket est une bibliothèque JS intéressante qui permet d'animer le chemin d'un élément vers une cible.

scrollReveal.js

scrollReveal.js est un plugin qui permet d'animer des éléments lors du défilement d'une page.

Waouh.js

Wow.js est un autre plugin javascript permettant de contrôler l'animation lors du défilement d'une page.

Transit

Transit est un plugin jQuery permettant de lisser les transitions et les transformations fournies dans jQuery.

parallaxe.js

parallax.js est un plugin qui réagit à la position du smartphone dans l'espace, sur cette base, il contrôle les retraits, la position et la profondeur des calques. Si l'appareil ne dispose pas de gyroscope, les calculs sont effectués en fonction de la position du curseur de la souris. En deux mots : parallaxe avancée !

Sournois

Sly - Bibliothèque JavaScript pour créer un défilement unidirectionnel avec une navigation par morceaux implémentée. Cela peut paraître compliqué avec les mots, je recommande de simplement regarder un exemple.

Déplacer.js

Move.js est une petite bibliothèque JavaScript permettant de créer des animations CSS3 personnalisées.

slider.js

slidr.js est une bibliothèque JavaScript légère et facile à utiliser permettant de créer un curseur vertical et en même temps horizontal.

CréerJS

CreateJS est un ensemble de bibliothèques et d'outils modulaires qui peuvent fonctionner ensemble ou indépendamment pour enrichir le contenu avec interactivité. Les fonctionnalités de ces bibliothèques vous permettront de créer des sites Web et des applications étonnants, n'oubliez pas de consulter les démos.

Flippant.js

Flippant.js - Plugin JavaScript pour créer des éléments avec effet de rotation autour de leur axe.

jmpress.js

jmpress.js est une bibliothèque JavaScript avec une idée unique de créer un site Web sur un canevas HTML5 sans fin. L'idée mérite l'attention.

Bibliothèques CSS3

Des développeurs expérimentés se sont déjà occupés depuis longtemps de créer pour nous une bibliothèque d'animations CSS3. Nous pouvons désormais simplement les prendre et les appliquer dans nos projets, et avoir confiance en leur efficacité.

Paul est un défenseur du design et de la performance

Évangélise Chrome et le Web mobile au sein de l'équipe Developer Relations de Google.

Il existe deux manières principales de créer une animation sur Internet : avec en utilisant CSS et JavaScript. Lequel devriez-vous choisir ? Cela dépend d'autres caractéristiques de votre projet, ainsi que des effets que vous essayez d'obtenir.

TL;DR

• Utiliser l'animation en utilisant CSS pour des transitions simples et courtes telles que le changement d'état des éléments interface utilisateur.
• Utiliser l'animation en utilisant Javascript, lorsque des effets complexes tels que le rebond, l'arrêt, la pause, le rembobinage ou le ralentissement sont requis.
• Si vous choisissez d'animer à l'aide de JavaScript, utilisez TweenMax ou, si vous souhaitez une solution plus simple, TweenLite.

La plupart animations simples peut être créé en utilisant à la fois CSS et JavaScript, mais la quantité de travail et le temps requis varient (voir aussi l'article). Chaque option a ses propres avantages et inconvénients, mais il existe bonnes règlesà suivre :

• Utilisez CSS lorsque vous travaillez avec de petits états autonomes d’éléments d’interface utilisateur.
• Les transitions et animations CSS sont idéales pour afficher un menu de navigation sur le côté de l'écran ou afficher une info-bulle. JavaScript peut être utilisé pour contrôler l'état, mais l'animation elle-même sera réalisée en utilisant CSS. Utilisez JavaScript si nécessaire contrôle de l'animation.

Lorsque vous devez implémenter un suivi tactile dynamique ou une animation qui doit être arrêtée, mise en pause, ralentie ou inversée, vous devez utiliser JavaScript.

Si vous utilisez déjà jQuery ou un framework JavaScript doté de fonctionnalités d'animation, vous serez peut-être plus à l'aise avec ces fonctionnalités plutôt que de passer à CSS.

Animations avec CSS L'animation avec CSS est sans aucun doute le plus d'une manière simple

faire bouger quelque chose sur l'écran. Ce qui suit est le code CSS qui déplace un élément de 100 pixels le long des axes X et Y. Cela se fait en utilisant. Transitions CSS

, qui sont configurés pour s'exécuter dans un délai de 500 ms. Lorsque vous ajoutez la classe move, la valeur de la propriété transform change et la transition commence.

Boîte ( -webkit-transform : traduire (0, 0); -webkit-transition : -webkit-transform 500 ms ; transformation : traduire (0, 0 ); transition : transformer 500 ms ; ) .box.move ( -webkit-transform : traduire(100px, 100px); transformer: traduire(100px, 100px ) Si, comme dans l'extrait ci-dessus, séparez Cours CSS

, vous pouvez activer et désactiver chaque animation à l'aide de JavaScript :

Box.classList.add("déplacer"); Cela permettra à vos candidatures d’être très bien équilibrées. L'accent peut être mis sur la gestion de l'état à l'aide de JavaScript. Sinon, il vous suffit de définir les classes appropriées pour les éléments cibles et l'animation sera réalisée par le navigateur. Si vous choisissez ce chemin, vous pouvez recevoir des événements de transitionend pour l'élément. Cependant, cela ne fonctionne pas pour les anciennes versions Internet Explorer

; la version 10 a été la première à prendre en charge ces événements. Tous les autres navigateurs prennent en charge cet événement depuis un certain temps.

Le code JavaScript requis pour recevoir l'événement de fin de transition est le suivant :

Var box = document.querySelector(".box"); box.addEventListener("transitionend", onTransitionEnd, false); function onTransitionEnd() ( // Gère la finition de la transition. ) En plus d'utiliser les transitions CSS, vous pouvez également utiliser Animations CSS

, qui permet un contrôle beaucoup plus précis sur les images clés individuelles, les durées et les passes d'animation. images clés. Ils ont capturé des éléments comme la partie la plus externe d'un mouvement, puis ont dessiné toutes les images individuelles entre les images clés. Aujourd'hui, lors de la création d'animations avec CSS, il existe un processus similaire dans lequel nous indiquons au navigateur quelles valeurs il doit avoir. Propriétés CSSà certains moments, et le navigateur comble les lacunes.

Par exemple, vous pouvez animer un carré à l'aide de transitions de la même manière, mais l'animation se déroulera sans aucune action de l'utilisateur (par exemple un clic) et se répétera à l'infini. De plus, vous pouvez modifier plusieurs propriétés en même temps :

/** * Il s'agit d'une version simplifiée sans * préfixes de fournisseur. Avec eux inclus * (qui vous serez besoin) les choses vont bien * plus verbeuses !

*/ .box ( /* Choisissez l'animation */ animation-name: movingBox; /* La durée de l'animation */ animation-duration: 1300ms; /* Le nombre de fois que nous voulons que l'animation s'exécute */ animation-iteration-count : infinite; /* Provoque l'inversion de l'animation à chaque itération impaire */ animation-direction: alternate; @keyframes movingBox ( 0% ( transform: translation(0, 0); opacity: 0.3; ) 25% ( opacity: 0.9 ; ) 50 % ( transform : translate(100px, 100px); opacité : 0,2 ; ) 100 % ( transform : translate(30px, 30px); opacité : 0,8 ; ) )

Lors de la création d'une animation à l'aide de CSS, vous définissez l'animation elle-même indépendamment de l'élément cible, puis sélectionnez l'animation souhaitée à l'aide de la propriété animation-name. L'animation avec CSS est encore très dépendante du navigateur, même si elle est indiquée dans Chrome, Safari, Opera, Safari Mobile et Navigateur Android le préfixe -webkit- est utilisé. Internet Explorer et Firefox n'utilisent pas de préfixes. Il existe de nombreux outils qui vous permettent de créer les éléments requis Versions CSS

avec préfixes, tandis qu'une version sans préfixe peut être écrite dans les fichiers sources.

Animations avec JavaScript Créer une animation en utilisant JavaScript est plus difficile que d'écrire des transitions ou des animations en utilisant CSS, mais JavaScript, en règle générale, donne beaucoup plus au développeur de nombreuses opportunités

. En règle générale, vous utilisez la fonction requestAnimationFrame, puis déterminez manuellement la valeur de chaque propriété de l'élément animé sur chaque image de l'animation. Remarque : Sur Internet, vous pouvez trouver des publications de code dans lesquelles la fonction setInterval ou setTimeout est utilisée pour l'animation. Ce, car l'animation ne sera pas synchronisée avec la fréquence de l'écran et il existe donc une très forte probabilité de gigue et de saut d'image. Il n'est conseillé d'utiliser un tel code dans aucune situation, mais il est recommandé d'utiliser la fonction requestAnimationFrame, qui est synchronisée de manière appropriée.

Function Box () ( var animationStartTime = 0; var animationDuration = 500; var target = document.querySelector(".box"); this.startAnimation = function() ( animationStartTime = Date.now(); requestAnimationFrame(update); ) ; fonction update() ( var currentTime = Date.now(); var positionInAnimation = (currentTime - animationStartTime) / animationDuration; var xPosition = positionInAnimation * 100; var yPosition = positionInAnimation * 100; target.style.transform = "translate(" + xPosition + "px, " + yPosition + "px)" ;