Parlons de l'utilisation de la bibliothèque d'animation JS Velocity.js

Cet article présente principalement l'utilisation de la bibliothèque d'animation JS Velocity.js. Maintenant, je le partage avec vous et le donne comme référence.

Avant-propos

C'est à nouveau le mois de juillet chaud, et je n'ai pas mis à jour les articles techniques depuis longtemps. La raison est que mon stage s'est terminé à la fin du mois dernier. mois et j'ai démissionné de l'entreprise. Ensuite, j'ai récemment travaillé sur mes propres projets et passé l'examen du permis de conduire. Afin de préparer la prochaine candidature pour l'entreprise, j'ai dit au revoir à ma petite amie et je suis allé ailleurs. Après avoir tout terminé pendant un demi-mois, je me suis toujours calmé. en bas pour apprendre de nouvelles technologies et rédiger un article technique, j'espère que vous pourrez continuer à persévérer.

Animation JS

À mesure qu'Internet devient de plus en plus diversifié, l'embellissement et les nouvelles technologies sur la page Web émergent sans cesse. En tant que spectateur de site Web, il y a plus de choses. pour les attirer en plus d'assurer la fluidité du site Web, il existe également divers effets interactifs sympas.

Les effets interactifs des pages Web sont grossièrement divisés en animation CSS et animation JS.

Avantages de l'animation JS

Maintenant que nous avons une compréhension approximative de ces deux types d'animation, analysons leurs différents avantages

1. Animation CSS Puisque CSS3 peut personnaliser l'animation en fonction des attributs CSS, l'avantage de ce type d'animation est qu'elle n'a pas besoin d'être calculée et modifiée, et elle apparaîtra très fluide.

2. L'animation JS a des performances puissantes et est meilleure que l'animation CSS puisqu'elle modifie la valeur de l'attribut en fonction de js, elle n'a pas les limitations de CSS et peut réaliser plus de fonctions et. animations, certaines personnes peuvent dire que certaines bibliothèques d'animation js seront très lentes. En fait, l'animation js est intrinsèquement rapide, mais jquery la ralentit. Parce que parfois, il est utilisé avec jquery, donc en raison de certaines fonctions de jquery lui-même, sa mise en œuvre sera très lente.

Comment utiliser Velocity.js

Il existe de nombreuses bibliothèques d'animation JS, chacune avec ses propres avantages, comme l'animation animée fournie avec jquery, il existe webGL, ou utiliser Canvas, SVG, etc. pour obtenir d'autres effets. Cette fois, nous parlons de l'une des nombreuses bibliothèques, la bibliothèque d'animation Velocity.js.

velocity.js peut être utilisé avec JavaScript seul ou avec jquery Comment l'utiliser (notez que vous téléchargez d'abord Velocity.js et l'introduisez sous la balise body, puis écrivez le code suivant dans le nouveau script. tag) :

//jquery方法 
var $p = $('p')
$p.velocity({属性:值,属性:值})
//javascript 方法
var op = document.getElementById('p')
op.velocity({属性:值,属性:值})

Quelques points à noter ici :

1 Les attributs à l'intérieur ne peuvent pas être écrits entre guillemets, et les valeurs suivantes S'il y a une chaîne, ajoutez des guillemets. S'il s'agit d'un entier, ne l'utilisez pas. Par exemple, width : 100 et width : "100px"
2. Plusieurs valeurs d'attribut​​dedans. ne peut pas être transmis en même temps, comme padding : 5px 5px 6px 5px en CSS ; Nous pouvons le transmettre comme ceci, mais en termes de vitesse, si vous souhaitez transmettre plusieurs valeurs, c'est {paddingLeft : 5, paddingRirght :5. omis3. Si la valeur de l'attribut à l'intérieur comporte plusieurs transitions, la deuxième première lettre doit être en majuscule Comme ci-dessus

introduction détaillée de Velocity.js

Comme mentionné ci-dessus, la valeur qui doit être modifiée est transmise dans le premier paramètre de vitesse en tant qu'objet, puis le deuxième paramètre est-ce. Les options d'animation spécifiées incluent :

+ durée durée

+ mode d'assouplissement
+ retard d'exécution différée
+ nombre de boucles de boucles
+ fonctions de rappel de début et de fin
+ affichage (la valeur est la même que celle de CSS, peut être définie sur auto)

Avant de parler des options d'animation spécifiées par la vitesse, parlons des valeurs supportées par la vitesse : px em rem % vm vh ou utilisez l'opérateur *=2 pour indiquer les méthodes de fonctionnement actuelles telles que 2 fois la valeur ou /=2

Les analyses suivantes une par une pour préciser les options d'animation :

durée durée

Ceci est représentatif La durée par défaut de l'animation est en millisecondes (ms ). Vous pouvez l'utiliser comme ceci :

// 表示一秒内将透明度从1到0
$p.velocity({opacity:0},{duration:1000})

Vous pouvez également l'utiliser comme ceci :

// 效果相同
$p.velocity({opacity:0},1000)

Velocity a également personnalisé trois modes de persistance : lent (600 ms), normal (400 ms), rapide (200 ms), qui peuvent être utilisés selon vos besoins réels

easing mode d'assouplissement

Cela représente la façon dont l'animation se transforme : easy-in-out (augmenter et diminuer progressivement), easy-in (accélérer d'abord puis à vitesse constante), dase-out ( vitesse constante d'abord puis ralentir)

Vous pouvez également faciliter "easeInOutSine" basé sur des fonctions trigonométriques, la courbe de Bézier css [0.17, 0.67, 0.83, 0.67] ou la physique des ressorts [tension, friction], etc. la valeur est implémentée

délai d'exécution

indique combien de temps cette animation est retardée pour s'exécuter. L'unité par défaut est les millisecondes (ms)

<. 🎜>

// 五秒后执行此动画
delay：5000

nombre de boucles de boucles

indique le nombre de boucles nécessaires à cette animation :

// 循环五次
loop:5
// 无限循环
loop:true

commencer et terminer les fonctions de rappel

Ces deux représentent des fonctions exécutées avant le début de l'animation et après la fin de l'animation :

begin:function(){ somgthing... },complete:function(){ somgthing... }

Autres fonctions :

velocity a également d'autres fonctions, qui seront discutées dans le futur, telles que : marche arrière, défilement , couleur ), transformation (la transformation inclut l'échelle, la rotation, la traduction, la traduction, etc.)

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Méthode JS pour générer un code QR à partir d'un lien et le convertir en image

Méthode pour obtenir des éléments DOM basés sur vue1 et vue2

exemple d'opération de requête en cascade agrégée nodejs+mongodb

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!