Cette page a été traduite automatiquement de l’anglais et n’a pas encore été relue par un locuteur natif.

Interactions et animation

Ajoutez des interactions aux calques, désactivez-les par point de rupture, respectez le mouvement réduit et réglez les transitions.

Interactions

Sélectionnez un calque et choisissez Ajouter une interaction dans la section Interactions des Propriétés. Le calque apparaît en fondu quand il entre dans la vue.
Chaque interaction indique ce qui la déclenche et ce qu’elle fait, par exemple À l’apparition · Animer.
Désactivez-la sur un point de rupture avec Sur Desktop, Sur Tablet ou Sur Phone.
Mouvement réduit décide de ce qui se passe pour les personnes qui demandent moins de mouvement à leur appareil : Fondu seulement garde un fondu, Désactivé affiche le calque tout de suite.
Supprimer l’interaction la retire. Supprimer un calque retire aussi ses interactions, et annuler les rétablit.

Ouvrez Transition pour régler le mouvement d’une animation. La courbe le montre.
Ressort prend une durée et un rebond. Ressort physique prend la raideur, l’amortissement et la masse.
Courbe d’accélération propose des courbes prêtes à l’emploi, les jetons de courbe de votre projet ou une Courbe personnalisée à deux poignées.
Instantanée change tout de suite. Délai attend avant de commencer, et Décalage lance les calques animés l’un après l’autre.

Sélectionnez un calque et choisissez Survol, Appui ou Focus dans États. Tant qu’un état est choisi, ce que vous modifiez dans les Propriétés ne s’applique qu’à cet état.
Transition règle la façon dont le calque passe à cet état. Effacer retire ce que l’état modifie, et Terminé revient au calque lui-même.
Le survol ne s’affiche que sur les appareils qui le permettent, comme un ordinateur avec une souris.

Déclencheur choisit ce qui lance une interaction : l’apparition du calque, le chargement de la page, ou un clic, un survol, un appui ou le focus clavier.
Un clic, un survol, un appui ou un focus peut Animer le calque vers les valeurs sous Anime vers, ou Défiler jusqu’à un autre calque, en s’arrêtant Décalage pixels au-dessus.
Un calque qui est un lien ne peut pas aussi lancer une interaction au clic.

Les éléments interactifs s’ajoutent depuis le groupe Interactif du panneau Insérer. Sélectionnez-en un pour modifier ses réglages dans Élément.
Un élément créé avec une fonctionnalité que cet éditeur n’a pas est conservé tel quel. Élément l’indique, et la page publiée l’affiche comme une boîte vide.

Choisissez Au défilement jusqu’à l’élément comme déclencheur pour animer un calque tant qu’un calque est visible, et revenir quand il sort de l’écran.
Calque visible est le calque qui doit apparaître : Ce calque, ou une autre section ou un calque nommé de la page.
Décalage indique combien de pixels doivent être visibles avant que l’animation commence.

Un Accordéon affiche des questions dont les réponses s’ouvrent d’un clic, comme une FAQ. Chaque élément est un cadre à l’intérieur : son premier calque est la question, le reste la réponse.
Dans Élément, Plusieurs ouverts à la fois permet de garder plusieurs réponses ouvertes ; sinon, en ouvrir une ferme les autres. Ouvert au départ est l’élément ouvert au chargement (0 pour aucun).
Pendant l’édition, toutes les réponses s’affichent pour les modifier sur place. La page publiée n’a besoin d’aucun script, et au clavier on ouvre et ferme les réponses avec Entrée ou Espace.

Sélectionnez une pile en ligne ou une liste de collection et choisissez Envelopper dans un défilant dans la palette de commandes. Ses éléments défilent alors sans fin sur le site publié ; dans le canevas, le défilant reste immobile.
Dans Élément, réglez la Vitesse (px par seconde), la Direction et la Vitesse sous le pointeur (0 le met en pause). Réglez la vitesse sur un autre point de rupture pour la changer là seulement.
Un défilant se met en pause hors de l’écran et reste immobile pour les visiteurs qui préfèrent un mouvement réduit. Les lecteurs d’écran lisent ses éléments une seule fois.

Sélectionnez une pile en ligne ou une liste de collection et choisissez Envelopper dans un carrousel dans la palette de commandes. Ses éléments deviennent des diapositives que les visiteurs font défiler, ou parcourent avec les flèches, les points ou les touches fléchées.
Dans Élément, activez ou désactivez les Flèches et les Points, choisissez En boucle, ou la Lecture automatique toutes les quelques secondes ; elle s’arrête tant que le pointeur ou le focus clavier est dessus.
Les noms des boutons sont du texte du site : écrivez-les dans la langue du site et traduisez-les comme tout autre texte. Dans le nom d’un point, {n} est le numéro de la diapositive.

Une interaction peut faire passer une instance d’un composant à une autre de ses variantes : choisissez Changer de variante comme Action, puis l’instance de la page et la variante. Un clic, un survol, un appui, le focus clavier ou un défilement jusqu’à l’élément peut la déclencher ; un survol, un appui, un focus ou un défilement revient à la variante affichée auparavant quand il prend fin.
Le changement s’anime avec la Transition de la variante : dans le maître du composant, choisissez la variante dans Variantes et réglez son animation d’entrée. Seules les propriétés que la variante modifie s’animent.