Grâce à l'étude des trois leçons précédentes, nous avons maîtrisé la méthode de réalisation d'animation, même si l'animation produite est encore très rudimentaire. Vous souvenez-vous encore que lorsque vous appreniez les bases, vous étiez longtemps exposé à un seul bloc de couleur ? Cela n’a pas affecté le niveau de performance actuel de chacun. De même, nous commencerons bientôt à réaliser des animations plus détaillées. Mais avant que tout cela n’arrive, chacun doit apprendre quelques notions de design thinking nécessaires. Le soi-disant design thinking fait référence à la planification et aux considérations avant de réaliser des animations. Cette planification comprend de nombreux aspects.
Parlons d’abord de l’organisation des calques. L’animation finale ne contient pas d’informations sur les calques. Les couches mentionnées ici se réfèrent uniquement à celles en production. Pour les animations produites à l'aide de changements de position de calque, un problème évident est que les calques doivent être disposés de manière raisonnable , car la plus petite unité de mouvement est le calque, donc si vous devez créer plusieurs objets avec des trajectoires de mouvement différentes, ils doivent être répartis dans différents couches. Vous devez également tenir compte de la distance de mouvement à l'avance. La taille et l'emplacement de l'image doivent laisser suffisamment d'espace pour le mouvement.
La seconde consiste à déterminer si elle croisera d'autres couches et comment gérer l'intersection, qui couvrira qui, c'est-à-dire la disposition hiérarchique des couches. La figure suivante répertorie trois façons de se croiser. sont Lorsque les deux calques sont à 100 %, le vert recouvre le rouge. Les deux autres montrent les différents effets de couverture de différents calques à une opacité de 50 %. Si le vert recouvre le rouge, alors l’intersection sera plus verte, et vice versa. Tout cela se déroule dans le mode de fusion normal. Si vous choisissez d'autres modes de fusion tels que la superposition, vous devez accorder plus d'attention au calque.
Les problèmes mentionnés ci-dessus sont tous des problèmes techniques, parlons maintenant des problèmes d’intrigue. D’une manière générale, si un objet est toujours en mouvement dans l’image, il n’est pas nécessaire d’en tenir compte. Mais si l'objet n'était pas dans l'image à l'origine mais y est entré plus tard, ou s'il était à l'origine dans l'image et a ensuite été déplacé hors de l'image, vous devez expliquer l'apparition et la disparition de l'objet. Cette explication est une transition, permettant l'apparition et la disparition de l'objet. spectateur d’avoir un changement psychologique plus naturel. Une technique courante consiste à faire apparaître progressivement des objets (également appelé fondu d'entrée) ou à disparaître progressivement (également appelé fondu de sortie). Comme le montre la figure ci-dessous, il montre la comparaison de l'effet du fondu entrant et sortant dans le même mouvement de texte.
Vous pouvez déplacer la souris dans la zone de lecture pour observer l'effet d'animation réel et déplacer la souris hors de la zone de lecture pour arrêter la lecture. Grâce à la comparaison, je pense que tout le monde sentira que l'effet de l'ajout d'un traitement de fondu d'entrée et de sortie est meilleur.
De plus, le paramètre de boucle est également un problème d'intrigue. Nous l'avons déjà mentionné, c'est-à-dire que dans certaines situations, une animation en boucle infinie peut être utilisée, tandis que dans d'autres situations, elle n'est pas adaptée. Par exemple, si l'animation du texte du titre d'une colonne en fondu est répétée en continu, la page Web entière paraîtra désordonnée et les spectateurs se sentiront mal à l'aise. L'approche la plus appropriée à l'heure actuelle consiste à le lire une seule fois, afin que l'effet puisse être affiché sans affecter l'ensemble de la page Web. Un cycle réglé sur 2 à 3 fois est généralement acceptable, et plus n'est pas bon.
Cependant, il est préférable de placer les animations qui ne sont jouées qu'une seule fois en haut de la page Web afin qu'elles puissent être vues dès que vous entrez dans la page Web. Si elle est placée au bas de la page Web, l'animation peut avoir fini de jouer au moment où le spectateur atteint ce point. Dans ce cas, cela n’aurait aucun sens de créer des animations et il serait préférable d’utiliser des images statiques à la place.
Il convient de noter que l'image GIF animée sera relue à chaque appel. Si certaines personnes ont déjà des connaissances en production de pages Web, elles peuvent utiliser cette propriété pour définir les actions correspondantes dans le logiciel de production de pages Web. Par exemple, c'est ainsi que vous déplacez la souris ici pour regarder l'animation de l'exemple. L'animation recommence toujours depuis le début après chaque mouvement. De cette façon, même si l’animation n’est jouée qu’une seule fois, elle peut être jouée plusieurs fois sur la page web. Ne vous inquiétez pas si vous n’avez pas de connaissances en production de pages Web, cela n’affectera pas notre apprentissage ultérieur en matière d’animation. .
Un problème important à considérer en ce qui concerne les effets de fondu qui ont fière allure est que les navigateurs peuvent être configurés pour désactiver les animations. À ce stade, l'animation n'affichera que la première image de l'animation. Ensuite, une animation similaire au « va et vient tranquillement » ci-dessus sera vide dans la page Web, car la première image est à l'origine vide. Cela peut facilement provoquer des malentendus parmi les téléspectateurs.
Peut-être penserez-vous que personne n'éteindra délibérément l'affichage de l'animation, mais comme ce facteur ne peut être exclu, nous devons considérer la situation du visiteur au niveau le plus large. Dans la présentation générale de la page Web, évitez d'utiliser des animations de fondu dans les parties de texte ou d'indicateur importantes. Après avoir placé l'animation dans la page Web, il est préférable de désactiver manuellement la lecture de l'animation pour vérifier s'il y a un problème. En plus de désactiver la lecture de l'animation, si le visiteur appuie sur la touche ESC lorsque la page est affichée, la lecture de l'animation sera également interrompue et l'écran restera au moment de l'interruption.
Si vous souhaitez prendre soin des visiteurs à qui il est interdit de jouer aux animations et de ceux qui sont autorisés à jouer des animations en même temps, et trouver un équilibre entre les deux, vous devez alors suivre un principe dans la production d'animations, à savoir : la partie principale ne doit pas bouger et les parties modifiées doivent être animées. Comme le montre l'image ci-dessous, le texte lui-même n'est pas animé, seuls les bords du texte sont animés. De cette manière, même si l'animation fixe est lue ou interrompue pendant la lecture, cela n'affectera pas la compréhension du contenu par le spectateur.
Cependant, tant que le contenu peut être reflété avec précision à tout moment et que la disparition du texte ou une déformation excessive est évitée, le texte principal peut également être déplacé.
Le contenu décrit dans cette leçon n'est pas lié à la technologie de production d'animation. Cependant, lorsque vous souhaitez appliquer l'animation à des pages Web, vous devez considérer les méthodes de production et de performance de l'animation dans une perspective large. Apprendre simplement ces contenus est un peu ennuyeux. Il suffit de laisser une impression sur tout le monde et de l'appliquer dans les productions futures.
Cette mission consiste à créer l'animation de "Quietly Come and Go". De plus, les deux animations dérivées suivantes sont également produites.
Dans la section suivante, nous expliquons comment exprimer les fondus d'entrée et de sortie dans une animation.