Comment créer des animations avec le Framework Dojo

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

Le Framework Dojo propose également la possibilité de créer des animations poussées sur les éléments de votre page HTML.
Profitez-en !

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title=”Afficher le texte de la vidéo”]

Comment créer des animations avec le Framework Dojo

Bonjour à tous et bienvenu sur Développement Facile.

Voici un nouveau cours dédié aux Framework Dojo Toolkit, cette fois vous allez apprendre à créer des animations avec Dojo, ça va permettre d’ajouter des effets très sympas sur vos sites et vos applications HTML5.

Les animations Dojo

Les animations Dojo possèdent les propriétés suivantes comme :
Node c’est la référence de l’élément ou de l’identifiant du noeud sur lequel est appliqué l’animation, une balise div avec un identifiant ou une classe, pareil, c’est une balise paragraphe etc.,
Delay c’est un délai en millisecondes avant le début de l’animation par défaut c’est 0, l’animation commence directement,
Duration c’est la durée de l’animation en millisecondes,
easing c’est le type d’animation, par exemple, ça peut être lente au début avec une accélération vers la fin, ou alors l’animation démarre lentement, elle accéléré au milieu et elle ralentit pour terminer, c’est le type d’animation de l’élément,
rate c’est le nombre d’images par seconde, Dojo gère ses animation en 50 images par seconde mais vous pouvez modifier ce paramètre,
repeat ça détermine le nombre de répétitions de l’animation, soit vous l’exécutez une seule fois l’animation, soit vous pouvez la répéter plusieurs fois.

Dojo peut exécuter des fonctions à différent moment de l’animation, par exemple beforeBegin c’est une fonction qui sera exécutée avant l’animation,
onBegin c’est une fonction qui sera exécutée de façon simultanément après le départ de l’animation,
onEnd c’est une fonction qui sera exécutée à la fin de l’animation,
onPlay c’est une fonction qui sera exécutée en même temps que l’animation, vous pouvez exécuter des fonctions pendant vos animations, ça peut être très utile, surtout dans des applications HTML 5 très évoluées.

Vous avez, bien évidemment, les méthodes spécifiques aux animations,
play pour lancer l’animation,
pause pour mettre l’animation en pause,
stop pour arrêter l’animation.

Afficher progressivement

Vous avez une fonction fadeIn qui va vous permettre de faire apparaître progressivement un élément, c’est très utilisé sur les sites Internet la fonction fadeIn, c’est pour ça que je vous la donne avec dojo, utilisez-là à votre tour.

Cacher progressivement

fadeOut, c’est l’inverse, ça permet de faire disparaître progressivement un élément, fadeIn c’est apparaître un élément, fadeOut faire disparaitre un élément.

Afficher par déroulement vers le bas

Vous pouvez afficher des animations en faisant des déroulements vers le bas, par exemple pour afficher du texte, pour afficher une image, c’est la propriété fx.wipeIn, l’animation augmente progressivement sa hauteur, ça créé un effet de glissement vers le bas, cette animation nécessite la bibliothèque dojo.fx, normal.

Cacher par déroulement vers le haut

Et vous pouvez faire l’inverse, fx.wipeOut, c’est un déroulement vers le haut donc ça va faire un effet de glissement vers le haut, et ça va faire disparaitre un élément, cette animation nécéssite aussi la bibliothèque dojo.fx.

Exemple d’application

Je vous montre un exemple de code source, alors, c’est tout ce qu’on a vu dans ce cours, on utilise dojo.fx, parce qu’on va en avoir besoin, pour les déroulements des animations, l’affichage vers le bas, ou la disparition vers le haut, toujours le petit log, le petit debug, page chargée qui s’affiche ici, là on modifie on masque le deuxième paragraphe en jouant sur l’opacité à 0, voyez le deuxième paragraphe, on ne le voit pas, et qu’est-ce qu’on a fait sur lire la suite ?
Show 2, show paragraphe 2, et onClick sur cacher la suite, ça masque le paragraphe 2, on change tout simplement la durée en faisant un effet fadeIn, fadeOut d’apparition un petit effet et un effet apparition disparition, c’est très sympa.
Qu’est-ce qu’il y a d’autre ?
Sur les clics on affiche l’image avec un effet et on masque l’image avec un effet, c’est exactement ce que je vous ai donné avec dojo.fxWipeIn, la durée en millisecondes et Play. Je vais mettre 500 millisecondes, elle va se cacher très rapidement du coup l’image, elle s’affiche et elle se masque, on ne voit pas assez, non je n’ai pas rechargé la page, excusez-moi il faut recharger, voyez la différence de rapidité.

Votre plan d’action !

Là vous avez eu beaucoup de cours à la fois sur Dojo Toolkit, sur jQuery, 2 Frameworks qui vont vous simplifier la vie extrêmement, pour créer des applications HTML 5 étonnantes, incroyables, que ce soit sur tablette, sur Smartphone, des sites Internet. Ces deux Frameworks sont indispensables à connaitre. Retrouvez un exemple de code source à télécharger sous ce cours vidéo, si vous avez des questions, posez-les sous ce cours vidéo je vous répondrai avec grand plaisir, et si vous souhaitez devenir expert en développement avec jQuery, Dojo, en HTML5, en PHP, en ActionScript, juste en dessous de cette vidéo, il y a un lien vers nos formations, vous pouvez aller beaucoup plus loin avec les formations Développement Facile, moi je vous dis à très bientôt sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple Dojo

Et voici le code source commenté avec les animations du Framework Dojo.

Downloads

Comment créez-vous vos animations Dojo?

Partagez le code source de vos animations Dojo les plus impressionnantes, dans les commentaires ci-dessous.

Créez Rapidement des Sites Hyper-Interactifs avec vos utilisateurs grâce à la Formation Gratuite jQuery Facile !

Recevez les Stratégies pour utiliser le Potentiel des Frameworks jQuery et Dojo
+
Logo jQuery
+
Des Tutoriels Gratuits Supplémentaires pour utiliser toute la "Richesse" du Framework de Google : AngularJS