Dans cet article, nous allons voir comment ajouter des animations à n'importe quelle partie de votre conception.
Les animations sont un moyen efficace d'afficher des promotions, des annonces et des messages. Elles attirent l'œil humain par le mouvement, amenant naturellement les gens à regarder vers leur source. Avec Designer, il est facile d'ajouter des animations à vos conceptions, leur apportant plus d'attention de la part des visiteurs.
Pour une introduction à l'utilisation de Designer, consultez notre article sur Premiers pas avec Designer.
Comment ajouter des animations aux éléments de conception
La sélection du bouton Animer vous permettra d'ajouter des animations à vos éléments de conception.
Ce bouton est également disponible pour chaque élément.
En cliquant dessus, vous ouvrirez la zone Animer dans le menu latéral :
Pour ajouter une animation, vous devez sélectionner un élément à animer. Ensuite, décidez d'utiliser une Animation de page ou une Animation d'objet.
Pour démontrer les différences entre les deux et comment les utiliser au mieux (ensemble ou séparément), nous utiliserons une conception de modèle simple, comme ci-dessous :
Animations de page
Les Animations de page s'animeront dans l'ordre où elles sont placées dans la liste. Elles ne s'animeront également qu'une seule fois, lorsque la page se charge.
Par exemple, disons que nous voulons que l'eau de notre modèle exemple arrive depuis la droite - pour donner l'apparence d'éclabousser les bouteilles d'eau.
D'abord, sélectionnez l'élément. Ensuite, cliquez sur Animer → Ajouter sous la section Animations de page. Cela fera apparaître tout un tas d'options :
Types d'animation :
- Fondu entrant
- Fondu sortant
- Arrivée depuis la gauche
- Arrivée depuis la droite
- Arrivée depuis le bas
- Arrivée depuis le haut
- Sortie vers la gauche
- Sortie vers la droite
- Sortie vers le bas
- Sortie vers le haut
- Zoom avant - Agrandit brièvement l'élément
- Zoom arrière - Réduit brièvement l'élément
- Rebond X - Fait rebondir l'élément horizontalement
- Rebond Y - Fait rebondir l'élément verticalement
- Flash
- Zoom - Alterne entre l'agrandissement et la réduction de l'élément
- Rotation à gauche
- Rotation à droite
Bien que nous pourrions fournir des descriptions détaillées de chacune d'elles, il est plus amusant de jouer avec elles et de voir comment elles correspondent à votre vision par vous-même !
Timing de l'animation :
- Après la précédente - Définit l'animation pour se déclencher après l'animation précédente dans la liste.
- Avec la précédente - Définit l'animation pour se déclencher en même temps que l'animation précédente.
- Depuis le début - Définit l'animation pour se déclencher dès que la ressource se charge.
Délai (sec) - Durée du délai entre le chargement de la ressource/l'animation précédente et le déclenchement de l'animation.
Vitesse d'animation - Modifie la rapidité du mouvement de l'animation.
| NOTE |
|
Pour utiliser correctement le timing de l'animation, vous devrez coordonner votre choix avec l'option Délai. Par exemple, disons que nous avons trois animations de page, A, B et C.
|
Une fois qu'une animation est ajoutée, d'autres peuvent être créées. La liste des animations peut être réorganisée par glisser-déposer :
| NOTE |
| L'ordre dans lequel les animations sont glissées ne remplace pas leur timing d'affichage. Par exemple, si vous avez trois animations et qu'une est définie pour s'afficher "Depuis le début" et que vous la glissez en bas de l'ordre, elle s'affichera toujours depuis le début malgré le fait d'être la dernière dans l'ordre. Changer l'ordre par glisser-déposer ne changera pas le paramètre de timing de l'animation. |
Pour créer l'animation que nous voulons, nous sélectionnons simplement les différents éléments d'eau et les faisons Arriver depuis la droite, définis sur Depuis le début pour que toute l'eau arrive en même temps. Nous pouvons tester cela en cliquant sur Lecture :
Animations d'objet
Les Animations d'objet s'animeront simultanément, quel que soit l'ordre dans lequel elles sont placées. Elles peuvent également être configurées pour s'animer indéfiniment (ou tant que la ressource est affichée à l'écran).
Par exemple, disons que nous voulons que notre écran reste affiché pendant un certain temps (plus d'une minute, disons). Pour cela, nous voudrons inclure des animations supplémentaires pour nous assurer qu'il ne devienne pas stagnant, et pour continuer à attirer l'attention des gens.
Pour ce faire, nous attirerons l'attention sur l'élément de texte Hydratation en créant une Animation d'objet.
L'onglet Animations d'objet est similaire à l'onglet Animations de page, avec quelques différences clés :
Timing de l'animation
- Délai - fait référence au délai entre chaque animation. Cela inclut au début, et à chaque animation suivante
- Délai de fin - Fait référence au délai à l'intérieur de chaque animation.
Boucle
- Indéfiniment - Fait boucler continuellement l'animation jusqu'à ce que la ressource soit changée.
- Une fois - Joue l'animation au chargement une seule fois.
- Itérations - Vous permet de spécifier combien de fois vous souhaitez que l'animation se répète.
| NOTE pour les utilisateurs de Designer 1.0 hérité |
| Avec la récente mise à jour Designer 2.0, nous avons déprécié les animations d'objet multiples sur un seul élément. Si vous avez 2-3 animations d'objet dans une conception 1.0, elle peut toujours être éditée dans 2.0. Si elle est supprimée, cependant, elle devra être ajoutée à nouveau dans 1.0. Une fois que Designer 1.0 sera déprécié, vous ne pourrez que modifier ou supprimer ces animations. |
Disons que nous voulons que le texte Hydratation rebondisse d'un côté à l'autre, mais pas trop rapidement pour ne pas être distrayant ou ennuyeux.
Nous définirons le Délai à 3 secondes et ensuite définirons le Délai de fin à 3 secondes également. Cela fera que le rebond reste suspendu pendant cette durée. Enfin, nous définirons la Boucle sur Indéfiniment :
Maintenant, lorsque nous mettons toutes nos animations ensemble, nous obtenons un bel ensemble rapide d'animations au début grâce à nos Animations de page, suivi d'une belle boucle après grâce à notre Animation d'objet. Cela peut être testé avec Tout lire ou Aperçu :
| NOTE |
|
La formule pour chaque itération d'Animation d'objet est la suivante : Délai + Durée de l'animation + Délai de fin = 1 Itération. |
Problèmes courants avec les animations
Maintenant, passons en revue quelques problèmes courants que vous pourriez rencontrer en essayant d'afficher vos animations sur un écran.
Préchargement des ressources dans la playlist
Cette fonctionnalité permet une apparence plus fluide en chargeant les ressources avant de les afficher à l'écran. Cela réduit la probabilité que votre affichage se fige pendant une seconde ou deux pendant le chargement des ressources.
OptiSigns préchargera vos ressources 6 à 8 secondes avant que la ressource ne s'affiche à l'écran. Cela a l'effet malheureux de potentiellement sauter votre animation, qui s'affichera immédiatement au chargement. Pour corriger cela, vous pouvez soit :
- (Recommandé) Ajouter un délai de 1 à 3 secondes sur vos animations pour vous assurer qu'elles apparaissent à l'écran lorsque ce préchargement est sélectionné :
- Désactiver le préchargement des ressources dans la playlist. Cependant, cela affichera un écran vide entre les transitions.
Performance de l'appareil
Exécuter trop d'animations en même temps affectera les performances de votre appareil et créera une expérience d'affichage numérique moins qu'idéale.
En général, le degré auquel cela se fait sentir dépendra des capacités de performance de votre appareil. Un appareil Roku, une smart TV typique, Amazon FireStick ou autre appareil non conçu spécifiquement pour l'affichage numérique est susceptible de souffrir de problèmes plus graves. Si vous utilisez l'un de ces appareils, nous recommandons pas plus de 1 ou 2 animations par ressource créée.
En revanche, les appareils Windows et Linux ou les lecteurs OptiSigns peuvent gérer des charges significativement plus élevées. Cependant, si vous voyez des saccades lors de l'utilisation de l'un de ces appareils, nous recommandons de limiter les animations à 3-4 animations par ressource créée.
C'est tout !
OptiSigns est le leader du logiciel d'affichage numérique. Si vous avez des questions supplémentaires, des préoccupations ou des commentaires sur OptiSigns, n'hésitez pas à contacter notre équipe d'assistance à support@optisigns.com.