Maison > Article > interface Web > Un guide d'introduction à la création d'animations CSS3 avec Move.js_JavaScript

Un guide d'introduction à la création d'animations CSS3 avec Move.js_JavaScript

WBOYoriginal: 2016-05-16 15:49:341619parcourir

Sur les sites Web, les transitions et animations CSS3 sont actuellement la méthode privilégiée pour créer des animations légères. Malheureusement, de nombreux développeurs trouvent leur propre syntaxe complexe et déroutante. Si cela vous ressemble, peut-être que Move.js est la solution parfaite pour vous. Move.js est une bibliothèque JavaScript simple permettant de créer des animations CSS3 à l'aide de fonctions simples. Ce didacticiel explorera les bases de Move.js et fournira une démo en ligne.

Connaissances de base

Move.js fournit l'API JavaScript la plus simple pour créer des animations CSS3. Supposons que nous ayons un div avec une boîte de classe et que nous souhaitions déplacer l'élément de 100 pixels vers la gauche lorsque la souris se déplace sur le div. Dans ce cas, notre code ressemblerait à ceci :

.box {
 -webkit-transition: margin 1s;
 -moz-transition: margin 1s;
 -o-transition: margin 1s;
 transition: margin 1s;
}
.box:hover {
 margin-left: 100px;
}

En utilisant Move.js, nous pouvons simplement appeler la méthode set() pour obtenir le même résultat, comme suit :

move('.box')
 .set('margin-left', 100)
 .end();

Démarrage

Tout d'abord, visitez la page Move.js GitHub et téléchargez le dernier package. Extrayez et copiez le fichier Move.js dans votre répertoire de travail. Ensuite, incluez ce fichier dans votre page HTML. La page complétée devrait ressembler à ceci :

<!DOCTYPE html>
<html>
 <head>
 <title>Move.js Demo</title>
 <link rel="stylesheet" type="text/css" href="styles.css"> 
 </head>
 <body>
 <a href="#" id="playButton">Play</a>
 <div class="box"></div>
 <script type="text/javascript" src="js/move.js"></script>
 </body>
</html>

Nous avons défini un élément div avec une classe box et un lien avec l'ID playButton pour notre démo. Créons un fichier styles.css et ajoutons les styles suivants. Notez que les styles suivants ne sont pas requis pour Move.js :

.box {
 margin: 10px;
 width: 100px;
 height: 100px;
 background: #7C9DD4;
 box-shadow: 5px 5px 0px #D1D1D1;
}
#playButton {
 display: block;
 font-size: 20px;
 margin: 20px 10px;
 font-weight: bold;
 color: #222;
 text-decoration: none;
}

Notre page html devrait ressembler à ceci :

201572284630175.jpg (787×186)

Maintenant, écrivons notre premier extrait Move.js. Nous devons attacher un gestionnaire d'événements onclick au playButton et le déplacer vers la droite lorsque vous cliquez dessus. Le code JavaScript du gestionnaire d'événements est le suivant. Ce code ajoute transform:translateX(300px) à l'élément box :

document.getElementById('playButton').onclick = function(e) {
 move('.box')
 .x(300)
 .end();
};

Le code complet après ajout du code Move.js est le suivant :

HTML

<!DOCTYPE html>
<html>
 <head>
 <title>Move.js Demo</title>
 <link rel="stylesheet" type="text/css" href="styles.css"> 
 </head>
 <body>
 <a href="#" id="playButton">Play</a>
 <div class="box"></div>
 <script type="text/javascript" src="js/move.js"></script>
 <script type="text/javascript">
  document.getElementById('playButton').onclick = function(e){
  move('.box')
   .x(300)
   .end();
  };
 </script>
 </body>
</html>

CSS

.box {
 margin-left: 10px;
 width: 100px;
 height: 100px;
 background: #7C9DD4;
 box-shadow: 5px 5px 0px #D1D1D1;
}
#playButton {
 display: block;
 font-size: 20px;
 margin: 20px 10px;
 font-weight: bold;
 color: #222;
 text-decoration: none;
}

Méthode Move.js

Dans la démo précédente, nous avons vu la méthode x(). Maintenant, comprenons les autres méthodes de Move.js.
set(prop, val)

La méthode

set() est utilisée pour définir l'attribut CSS de l'élément. Elle prend deux paramètres : l'attribut CSS et la valeur de l'attribut. Exemple d'utilisation :

.set('background-color', '#CCC')
.set('margin-left', 500)
.set('color', '#222')

ajouter(prop, val)

La méthode add() est utilisée pour ajouter sa valeur d'attribut déjà définie. Cette méthode doit avoir une valeur numérique pour pouvoir être utilisée pour les incréments. Cette méthode doit avoir deux paramètres : la valeur de l'attribut et son incrément :

.add('margin-left', 200)

Après l'appel de l'extrait de code précédent, 200 px seront ajoutés à sa valeur.
sub(prop, val)

sub() est le processus inverse de add(). Il accepte les deux mêmes paramètres, mais sa valeur sera soustraite de la valeur de l'attribut.

.sub('margin-left', 200)

rotation(deg)

Comme son nom l'indique, cette méthode fait pivoter un élément en fournissant une valeur numérique comme paramètre. En attachant à la propriété transform de l'élément lorsque la méthode est appelée. Le code suivant fait pivoter l'élément de 90 degrés :

.rotate(90)

Ce code ajoutera le CSS suivant à l'élément :

transform:rotate(90deg)

durée(n)

Avec cette méthode, vous pouvez définir la durée de lecture de l'animation. Par exemple : Le code suivant déplace l'élément de 200px de gauche à droite en 2 secondes :

.set('margin-left', 200)
.duration('2s')

Autre exemple, le code ci-dessous. Move.js modifiera l'attribut margin de l'élément, définira la couleur d'arrière-plan et fera pivoter l'élément de 90 degrés en 2 secondes.

.set('margin-left', 200)
.set('background-color', '#CCC')
.rotate(90)
.duration('2s')

traduire(x[, y])

La méthode

translate() est utilisée pour modifier la position par défaut de l'élément, en utilisant les coordonnées fournies comme paramètres. Si un seul paramètre est défini, il sera utilisé comme coordonnée x. Si un deuxième paramètre est fourni, il sera utilisé. sera utilisé comme coordonnée y :

.translate(200, 400)

x() et y()

La méthode x() est utilisée pour ajuster la coordonnée x de l'élément, et la méthode y() est utilisée pour ajuster la coordonnée y de l'élément. Les paramètres des deux méthodes peuvent être positifs ou négatifs, comme suit :

.x(300)
.y(-20)

inclinaison (x, y)

skew() est utilisé pour ajuster un angle par rapport aux axes x et y. Cette méthode peut être divisée en deux méthodes : skewX(deg) et skewY(deg) :

.skew(30, 40)

échelle(x, y)

Cette méthode permet d'agrandir ou de compresser la taille de l'élément. Pour chaque valeur fournie, la méthode de transformation d'échelle sera appelée :

.scale(3, 3)

facilité(fn)

Si vous avez utilisé des transitions CSS3, vous savez que la fonction easy fonctionne sur l'attribut transition. Il précise l'acte de transition. Chaque fonction de facilité est entrée, sortie, entrée-sortie, snap, cube-bezeir, etc. Ces fonctions peuvent être appelées via la méthode easy() fournie par Move.js. Par exemple :

.ease('in').x(400)
.ease('cubic-bezier(0,1,1,0)').x(400)

end()

该方法用于Move.js代码片段的结束，他标识动画的结束。技术上，该方法触发动画的播放。该方法接受一个可选的callback回掉函数。代码如下：

move('.box')
 .set('background-color', 'red')
 .duration(1000)
 .end(function() {
 alert("Animation Over!");
 });

delay(n)

正如方法所暗示的，该方法提供一个时间的数值作为动画的延时。如下：

move('.box')
 .set('background-color', 'red')
 .delay(1000)
 .end();

then()

该方法是Move.js中一个最重要的函数。他用于分割动画为两个集合，并按顺序执行。如下动画被分为两步，通过then()方法实现分割：

move('.box')
 .set('background-color', 'red')
 .x(500)
 .then()
 .y(400)
 .set('background-color', 'green')
 .end();

## 使用Move.js创建复杂动画 ##

在本教程中，我们已经写了很多基本的动画来了解各个方法。接下来，我们使用Move.js可以很容易的创建复杂的动画。该demo阐述了Move.js的大部分内容，在demo page

上我们创建了动画的描述，代码如下：

move('.square')
 .to(500, 200)
 .rotate(180)
 .scale(.5)
 .set('background-color', '#FF0551')
 .set('border-color', 'black')
 .duration('3s')
 .skew(50, -10)
 .then()
 .set('opacity', 0)
 .duration('0.3s')
 .scale(0.1)
 .pop()
 .end();

结论

希望本篇教程能带给你关于Move.js是什么的清晰的认识和如何创建CSS3动画。使用Movejs能帮助你在一个地方正确的组织所有的动画代码。在任何时候你想修复一个动画，你就知道他在那里。

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple d'utilisation de base de SWFObject, compétences d'analyse_javascriptArticle suivant：Exemple d'utilisation de base de SWFObject, compétences d'analyse_javascript

Articles Liés

Voir plus