Zero Block : Animation étape par étape
Comment configurer une animation complexe dans Zero Block
Didacticiel vidéo
Animation pas à pas
Regardez ce tutoriel vidéo sur la création d’une animation étape par étape dans Zero Block, ou lisez un guide pratique détaillé ci-dessous.
Il existe deux modes d’animation dans Zero Block :
1) L’animation de base est une animation simple. Il s’agit d’effets prêts à l’emploi, les plus couramment utilisés, tels que l’effet d’apparence (par opacité, de bas en haut, de droite à gauche, etc.), la parallaxe et la fixation. Ceux-ci suffisent dans 90% des cas.
Guide des → d’animation de base
2) L’animation étape par étape vous permet de concrétiser des idées lumineuses et créatives, comme vous le souhaitez.
Découvrez différents exemples de ce que vous pouvez réaliser à l’aide de l’animation étape par étape.
1) L’animation de base est une animation simple. Il s’agit d’effets prêts à l’emploi, les plus couramment utilisés, tels que l’effet d’apparence (par opacité, de bas en haut, de droite à gauche, etc.), la parallaxe et la fixation. Ceux-ci suffisent dans 90% des cas.
Guide des → d’animation de base
2) L’animation étape par étape vous permet de concrétiser des idées lumineuses et créatives, comme vous le souhaitez.
Découvrez différents exemples de ce que vous pouvez réaliser à l’aide de l’animation étape par étape.
Premiers pas avec l'animation pas à pas
L’outil d’animation étape par étape est disponible dans Zero Block, un éditeur Web destiné aux concepteurs professionnels. Ajoutez un Zero Block à la page en le sélectionnant dans la bibliothèque de blocs (juste en dessous de la catégorie « Autre »), ou cliquez sur Zero Block en bas de la page.
Cliquez sur Edit Block dans le coin supérieur gauche du Zero Block pour le personnaliser.
Ajoutez un nouvel élément, sélectionnez-le, ouvrez le panneau Paramètres, faites défiler jusqu’à la section « Animation étape par étape » et cliquez sur Ajouter.
Ajoutez un nouvel élément, sélectionnez-le, ouvrez le panneau Paramètres, faites défiler jusqu’à la section « Animation étape par étape » et cliquez sur Ajouter.
La création d'une animation pas à pas pour un élément annulera tous les paramètres d'animation de base pour cet élément.
Comment sélectionner un événement pour lancer une animation
Commencez à créer une animation pas à pas en sélectionnant un événement, condition pour que la lecture de l’animation commence. Vous avez le choix entre cinq conditions :
- Élément à l’écran : une animation commence à jouer dès qu’un élément particulier apparaît à l’écran ;
- Bloquer à l’écran : une animation commence à jouer lorsqu’un bloc entier apparaît à l’écran ;
- Sur le défilement : une animation commence à jouer et continue de jouer pendant le défilement ;
- Au survol : une animation commence à jouer au survol ;
- Au clic : une animation commence à jouer au clic.
Le point de départ de l'animation dispose de trois options supplémentaires : Démarrer le déclencheur, Boucle et Décalage du déclencheur.
- Start Trigger est une zone ou une chose qui lancera votre animation. Choisissez parmi trois zones : en haut de la fenêtre, au centre de la fenêtre ou en bas de la fenêtre ;
- Décalage de déclenchement est le décalage du point de départ de l'animation par rapport au haut de la fenêtre, au centre de la fenêtre ou au bas de la fenêtre sélectionné ;
- Loop est utilisé pour configurer une animation à jouer en boucle.
Vous pouvez tester une animation ou un élément sélectionné ou tous les éléments du bloc en cliquant sur Play Element ou Play All.
Comment ajouter des étapes d'animation
La première étape a été définie par défaut. Il s'appelle Démarrer. Ajoutez des étapes et modifiez les propriétés des éléments à chaque étape. Cela fera changer l'élément.
Pour ajouter une étape, cliquez sur Ajouter une étape.
Pour ajouter une étape, cliquez sur Ajouter une étape.
Vous pouvez basculer entre les étapes. La bordure d'un élément qui devient bleue signifie que l'élément est dans sa position d'origine, tandis que la bordure de l'élément qui devient verte signifie que l'étape est en cours de modification.
Pour modifier la position d’origine d’un élément, par exemple, pour le rendre invisible au lancement (opacité : 0 %), ajoutez la première étape et définissez l’opacité sur 0 % et la durée sur 0 seconde.
Chaque étape possède un ensemble de propriétés telles que Duration, Move, Scale, Opacity, Rotate, Easing et Delay.
La durée est la durée d’une animation en secondes.
Déplacer est les coordonnées où l’élément est déplacé par rapport à sa position d’origine. Pour les configurer, vous pouvez affecter des valeurs ou déplacer l’élément.
L’échelle est le degré d’augmentation ou de diminution de l’élément à la fin de l’étape.
L’opacité est la valeur de la transparence des éléments à la fin de l’étape.
La rotation est la rotation d’un élément en degrés vers la fin de l’étape.
Easing est la possibilité de choisir un effet d’animation: Linéaire (exécution d’animation linéaire); easeIn, easeOut, easeInOut (ralentissement au début, à la fin ou les deux au début et à la fin de l’animation); bounceFin (un petit rebond d’un élément à la fin de l’animation).
Le délai est la durée d’une pause avant le début de la lecture d’une animation.
La durée est la durée d’une animation en secondes.
Déplacer est les coordonnées où l’élément est déplacé par rapport à sa position d’origine. Pour les configurer, vous pouvez affecter des valeurs ou déplacer l’élément.
L’échelle est le degré d’augmentation ou de diminution de l’élément à la fin de l’étape.
L’opacité est la valeur de la transparence des éléments à la fin de l’étape.
La rotation est la rotation d’un élément en degrés vers la fin de l’étape.
Easing est la possibilité de choisir un effet d’animation: Linéaire (exécution d’animation linéaire); easeIn, easeOut, easeInOut (ralentissement au début, à la fin ou les deux au début et à la fin de l’animation); bounceFin (un petit rebond d’un élément à la fin de l’animation).
Le délai est la durée d’une pause avant le début de la lecture d’une animation.
Créer une animation consiste à ajouter des étapes et à modifier les propriétés des éléments à chaque étape.
L'exemple d'une animation en deux temps
Voyons comment déplacer ce carré jaune de 550 pixels vers la droite, le réduire pendant qu'il est en mouvement et revenir à sa position d'origine.
Voici un guide étape par étape avec nos commentaires ci-dessous :
Vérifiez le fonctionnement de votre animation dans le navigateur
En plus des boutons « Élément de lecture » et « Lecture tout », vous pouvez également prévisualiser votre animation.
Ouvrez deux onglets dans votre navigateur : Zero Block et la même page en mode aperçu.
Ainsi, lorsque vous cliquez sur Enregistrer dans Zero Block, vous verrez les modifications sur la page d’aperçu après l’avoir actualisée.
Ouvrez deux onglets dans votre navigateur : Zero Block et la même page en mode aperçu.
Ainsi, lorsque vous cliquez sur Enregistrer dans Zero Block, vous verrez les modifications sur la page d’aperçu après l’avoir actualisée.
Les exemples d'animation pas à pas :
Cliquez pour afficher la page et regarder l'animation.
Cliquez pour afficher la page et regarder l'animation.
Cliquez pour afficher la page et regarder l'animation.
Examen des fonctionnalités de base.
Travailler avec des conteneurs et créer des éléments fluides.
Une liste de tous les raccourcis clavier pour accélérer votre travail.
Bases de l'animation : fixation, parallaxe et effets interactifs.
Un outil d'animation avancé : principes de base, réglages et exemples.
