Leçons apprises de soixante jours de zombies réanimants avec du CSS codé à la main

Dix leçons tirées de 60 jours d'animation de zombie CSS pure

AVERTISSEMENT: AVERTISSEMENT À ÉLÉMENTAGE À LA PLUSE, un grand nombre de zombies et de contenu parodie arrivent! Cet article partagera quelques conseils pratiques, mais les exemples sont presque tous liés aux zombies et aux blagues drôles. Veuillez être préparé mentalement.

Je vais créer un lien vers des travaux d'animation individuelle dans la discussion, mais si vous voulez connaître l'intégralité du projet, visitez l'Institut Undead pour voir la série d'animation 60 jours. Le projet a commencé le 1er juin 2020 et s'est terminé le 1er août, ce qui coïncide avec la date de publication d'un livre que j'ai écrit sur l'animation, l'humour et les zombies de CSS - car il est évident que les zombies détruiront le monde sans utiliser vos compétences Web pour arrêter la fin du monde. Rien ne peut mieux frapper les zombies que les éléments HTML dynamiques!

J'ai fait des règles pour moi tout au long du projet:

1. Tout le code CSS doit être écrit manuellement. (Je suis juste un masochiste.)
2. Toutes les animations sont déclenchées par l'utilisateur. (Je déteste les animations qui sont à mi-chemin.)
3. Utilisez JavaScript le moins possible et ne l'utilisez jamais pour l'animation. (Je n'ai utilisé JavaScript qu'une seule fois dans l'animation finale, c'était pour démarrer l'audio. Je ne suis pas contre JavaScript, c'est juste qu'il n'est pas nécessaire ici.)

Leçon 1: 80 jours sont trop longs.

Le titre ne dit-il pas «60 jours»? Oui, mais mon objectif initial était de 80 jours, et lorsque le premier jour est arrivé, j'avais moins de 20 animations prêtes, et le temps de production moyen pour chaque animation était de 3 jours, j'ai été paniqué et changé à 60 jours. Cela m'a donné 20 jours supplémentaires de temps de préparation et réduit 20 œuvres d'animation.

Leçon 1A: 60 jours sont encore trop longs.

C'est en effet un défi d'accomplir tant d'animation avec un temps limité, une créativité et des compétences artistiques plus limitées. Bien que j'avais pensé à raccourcir à 30 jours, je suis content de ne pas avoir fait ça. 60 jours m'ont permis de traverser moi-même et de mieux comprendre comment les animations CSS - et le CSS lui-même - travaille. Je suis également fier de la plupart des œuvres que j'ai terminées plus tard parce que mes compétences se sont améliorées, je dois être plus innovant et réfléchir plus profondément à la façon de rendre le travail plus intéressant. Une fois que vous manqueriez de toutes les options simples, le vrai travail et les meilleurs résultats commenceront. (Oui, cela finit par avoir 62 jours, car j'ai commencé le 1er juin et je voulais terminer l'animation finale le 1er août. Cela semble gênant à partir du 3 juin)

Donc, vraie leçon 1: mettez-vous au défi .

Leçon 2: L'animation interactive est difficile à produire et la conception réactive est encore plus difficile.

Si vous voulez qu'un élément vole sur l'écran et se connecte avec un autre élément, ou semblez initier le mouvement d'un autre élément, vous devez utiliser toutes les unités standard et inflexibles ou toutes les unités flexibles.

Trois variables déterminent le temps et la position d'un élément d'animation pendant tout processus d'animation: durée, de la vitesse et de la distance. La durée de l'animation est définie dans la propriété animation et ne peut pas être modifiée en fonction de la taille de l'écran. La fonction du temps d'animation détermine la vitesse; La taille de l'écran ne peut pas changer cela. Par conséquent, si la distance varie avec la taille de l'écran, il y aura des écarts de synchronisation, sauf pour la largeur et la hauteur de l'écran spécifiques.

Découvrez le réservoir! Exécutez des animations sur des écrans larges et étroits. Bien que je l'ai prévu de très près, si vous comparez, vous constaterez que lorsque le dernier zombie tombe, la position du réservoir par rapport au zombie est différente.

Pour éviter ces problèmes de temps, vous pouvez utiliser des unités fixes et un nombre plus grand, tel que 2000 ou 5000 pixels ou plus, afin que l'animation puisse couvrir la largeur (ou la hauteur) de tous les écrans, sauf l'affichage maximal.

Leçon 3: Si vous voulez des animations réactives, mettez tout dans (l'une d'entre elles) des unités de fenêtre.

Prendre une solution de compromis pour les proportions unitaires (par exemple, le réglage de la largeur et de la hauteur dans les pixels, mais la position de réglage et le mouvement dans les unités de la fenêtre) peut conduire à des résultats imprévisibles. N'utilisez pas non plus vw et vh en même temps, mais utilisez l'une d'elles; qui est la direction principale. Un mélange d'unités vh et vw rendra votre animation "bizarre", qui, je crois, est un terme professionnel.

Par exemple, jetez un œil à superbement zomborrifique. Il utilise un mélange de pixels, vw et d'unités vh . La prémisse est que le super zombie vole vers le haut et que la "caméra" suit. Le super zombie frappe un rebord et tombe pendant que la caméra continue de se déplacer, mais si votre écran est suffisamment haut, vous ne comprendrez pas cela.

Cela signifie également que si vous avez besoin de quelque chose pour aller du haut - comme je l'ai fait dans personne ici que nous, les humains, vous devez régler vw suffisamment élevée pour vous assurer que les zombies ninja ne sont pas visibles dans la plupart des rapports d'aspect.

Leçon 3A: Utilisez des unités de pixels pour le mouvement à l'intérieur d'un élément SVG.

Autrement dit, la conversion des éléments dans les éléments SVG ne doit pas utiliser les unités de la fenêtre. Les balises SVG sont leur propre univers proportionnel. Le SVG "Pixel" conservera un rapport de tous ses autres éléments SVG dans l'élément SVG , contrairement à l'unité de la fenêtre. Par conséquent, utilisez des unités de pixels dans l'élément SVG pour la conversion, mais utilisez des unités de fenêtre ailleurs.

Leçon 4: SVG évolue mal au moment de l'exécution.

Pour les animations, comme OOPS…, j'ai zoom sur l'image SVG du zombie à cinq fois l'original, mais cela a brouillé les bords. [Wave Fists sur les graphiques vectoriels "évolutifs". ]]

 / * Code d'origine qui provoque le flou des bords * /
.zombie {
 transformée: échelle (1);
 Largeur: 15VW;
}

.Toggle-Checkbox: coché ~ .zombie {
 Animation: 5S Facteur-out-out 0s reverseshRinkyDink Forward;
}

@keyframes reverseshRinkyDink {
 0% {
  transformée: échelle (1);
 }
 100% {
  transformée: échelle (5);
 }
}

J'ai appris à régler leur taille sur la taille finale qui prendra effet à la fin de l'animation, puis utiliser la transformation du zoom pour les réduire à la taille au début de l'animation.

 / * Code modifié * /
.zombie {
 transformée: échelle (0,2);
 Largeur: 75VW;
}

.Toggle-Checkbox: coché ~ .zombie {
 Animation: 5S Facteur-out-out 0s reverseshRinkyDink Forward;
}

@keyframes reverseshRinkyDink {
 0% {
  transformée: échelle (0,2);
 }
 100% {
  transformée: échelle (1);
 }
}

En bref, le code modifié passe d'une version réduite de l'image à sa pleine largeur et à sa hauteur. Le navigateur se rend toujours à 1, de sorte que les bords sont clairs et nets à une échelle de 1. Ainsi, au lieu de mettre à l'échelle de 1 à 5, j'ai évolué de 0,2 à 1.

Leçon 5: Les axes ne sont pas des vérités universelles.

L'axe d'un élément est maintenu en synchronisation avec lui-même, pas la page. La réalisation d'une rotation à 90 degrés avant translateX change la direction de translateX de horizontal à vertical. Dans personne ici que nous, les humains, 2, j'ai retourné les zombies en utilisant une rotation à 180 degrés. Mais une valeur y positive déplacera les ninjas vers le haut et une valeur négative les déplacera vers le bas (par opposition à la normale). Notez comment la rotation affecte les transformations ultérieures.

Leçons 6. Décomposer des animations complexes en éléments concentriques pour un ajustement facile.

Lors de la création d'animations complexes qui se déplacent dans plusieurs directions, l'ajout de divins ou d'éléments parentaux enveloppement et animer chaque élément séparément peut réduire les conflits de transformation et vous empêcher de vous écraser.

Par exemple, dans Space Cadet, j'ai trois transformations différentes. Le premier est le mouvement de haut en bas des astronautes et des zombies. Le second est un mouvement horizontal. Le troisième est la rotation. Au lieu d'essayer de tout faire en une seule transformation, j'ai ajouté deux éléments d'enveloppe et les ai animés sur chaque élément (j'ai également sauvé mes cheveux ... au moins une partie de celui-ci). Cela permet d'éviter le problème de l'axe discuté dans la leçon précédente, car je tournais sur l'élément le plus intérieur, conservant ainsi l'axe de ses éléments parent et grand-parent.

Leçon 7: Les transformations SVG et CSS sont les mêmes.

Certains chemins, groupes et autres éléments SVG ont déjà défini des transformations. Cela peut être causé par des algorithmes d'optimisation, ou c'est peut-être la façon dont le logiciel d'illustration génère du code. Si un chemin, un groupe ou tout autre élément d'un SVG a déjà une transformation SVG, la suppression de cette transformation réinitialise l'élément, généralement avec un changement singulier de position ou de taille par rapport au reste des dessins.

Étant donné que les transformations SVG et CSS sont les mêmes, toute transformée CSS que vous remplacez la transformation SVG, ce qui signifie que votre transformée CSS commencera à cette position ou taille singulière, pas la position ou la taille définie dans le SVG.

Vous pouvez copier la transformée de l'élément SVG en CSS et le définir sur la position de début dans le CSS (mettez-le d'abord à mettre à jour vers la syntaxe CSS). Vous pouvez ensuite le modifier dans l'animation CSS.

Par exemple, dans mon travailleur de bureau, un travail hommage UHHH, ouais…, le bras supérieur supérieur droit de Renberg (élément # ARM2) a une transformation du code SVG d'origine.

<path d="M0 171h9v9H0z" fill="#91c1a3" fill-rule="nonzero" transform="translate(0 -343) scale(4 3.55)"></path>

Déplacez la transformation en CSS comme suit:

<path d="M0 171h9v9H0z" fill="#91c1a3" fill-rule="nonzero"></path>

 # arm2 {
 Transform: traduire (0, -343px) échelle (4, 3,55);
}

... Je peux alors créer une animation qui ne réinitialise pas accidentellement la position et l'échelle:

 .Toggle-Checkbox: coché ~ .z # arm2 { 
 Animation: 6S Faisons de 0,15s ARM2Move Forward;
}

@keyframes arm2move {
 0%, 100% {
  Transform: traduire (0, -343px) échelle (4, 3,55);
 }
 40%, 60% {
  Transformer: traduire (0, -403px) échelle (4, 3,55);
 }
 50% {
  Transformer: traduire (0, -408px) échelle (4, 3,55);
 }
}

Ce processus est encore plus difficile lorsque l'outil qui génère du code SVG essaie de "simplifier" la transformation en matrice. Bien que vous puissiez recréer des transformations matricielles en les copie en CSS, en élargissant, en tournant ou en panorant exactement comme vous le souhaitez est une tâche intimidante.

Alternativement, vous pouvez utiliser la traduction, la rotation et la mise à l'échelle pour recréer la transformation de la matrice, mais si le chemin est complexe, les chances que vous puissiez le recréer dans le temps sans vous mettre en difficulté sont faibles.

La dernière option la plus simple est d'utiliser un groupe ( ) Éléments d'emballage de balises. Ajoutez une classe ou une ID pour un accès facile à CSS et transformer le groupe lui-même, séparant ainsi les transformations, comme discuté dans la leçon précédente.

Leçon 8: Restez sain d'esprit lorsque vous transformez une partie d'un SVG

La propriété transform-origin CSS déplace le point auquel la transformation se produit. Si vous essayez de faire tourner vos bras - comme je l'ai fait dans Clubbin ’It - votre animation sera plus naturelle si vous faites pivoter vos bras du centre de votre épaule, mais l'origine de transformation naturelle de ce chemin est dans le coin supérieur gauche. Utilisez transform-origin pour résoudre ce problème pour une sensation plus lisse et plus naturelle… vous savez ce look d'art de pixels très naturel …

Lors du zoom, il est également utile de transformer l'origine, comme je l'ai fait dans des oups moustachés, ou lors de la rotation du mouvement de la bouche, comme le menton d'un dinosaure en super savoureux. Si vous ne modifiez pas l'origine, la transformation utilisera l'origine dans le coin supérieur gauche de l'élément SVG.

Leçon 9: les animations de sprite peuvent être réactives

J'ai fini par faire beaucoup d'animations Sprite pour ce projet (c'est-à-dire que vous utilisez plusieurs cadres incrémentiels et basculez rapidement entre eux pour faire en sorte que le personnage se déplace). J'ai créé des images dans un fichier large, je les ai ajoutés sous forme d'images d'arrière-plan aux éléments d'une seule taille de trame, à définir l'image d'arrière-plan sur la largeur de l'image à l'aide background-size et à masquer le débordement. Ensuite, j'utilise background-position et la fonction de temps d'animation step() pour itérer à travers l'image; Par exemple: célébrations post-apocalyptiques.

Avant le projet, j'ai utilisé des images inflexibles. Je vais évoluer un peu pour qu'il y ait au moins quelques effets réactifs, mais je ne pense pas que vous puissiez en faire une largeur complètement flexible. Cependant, si vous utilisez SVG comme image d'arrière-plan, vous pouvez utiliser des unités de fenêtre pour évoluer les éléments à mesure que la taille de l'écran change. Le seul problème est l'emplacement d'arrière-plan. Cependant, si vous utilisez des unités de fenêtre pour cela, il restera synchronisé. Vérifiez-le enfin, seul avec mon sandwich….

Leçon 9A: Définissez la taille de l'arrière

Comme je l'ai appris dans ce projet, l'utilisation d'un seul type d'unité est presque toujours possible. Initialement, j'ai utilisé des pourcentages pour définir la taille de l'arrière-plan du sprite. Le calcul est simple (100% * (étape 1)) et fonctionne bien dans la plupart des cas. Cependant, dans les animations plus longues, le suivi précis du cadre peut mal tourner et peut afficher des parties du mauvais cadre de sprite. Le problème s'aggravera à mesure que davantage de cadres sont ajoutés au sprite.

Je ne sais pas exactement pourquoi cela cause le problème, mais je pense que cela est dû à l'erreur d'arrondi accumulée sur la longueur du tableau des sprites (la quantité de déplacement augmente à mesure que le nombre de trames augmente).

Dans ma dernière animation, ce n'est pas fini jusqu'à ce que le zombie chante, j'ai laissé un dinosaure ouvrir ma bouche pour révéler un chant de viking zombie (bien qu'il y ait du laser tirant en arrière-plan, et bien sûr, la danse, le jeu d'accordéon et les zombies tirés à partir de canons). Oui, je sais comment organiser une fête… une fête de geek.

Les dinosaures et les Vikings sont l'une des plus longues animations d'Elfes faites pour le projet. Cependant, lorsque j'utilise des pourcentages pour définir la taille de l'arrière-plan, certaines tailles de suivi dans les erreurs de safari. À la fin de l'animation, une partie du nez de dinosaure de différents cadres semble apparaître sur le côté droit, tandis qu'une partie similaire du nez manque sur le côté gauche.

Ceci est très difficile à diagnostiquer car cela semble fonctionner correctement dans Chrome, et je pense que je l'ai corrigé dans Safari et je regarde simplement une taille d'écran légèrement différente et je revois la déviation du cadre. Mais si j'utilise des unités cohérentes - c'est-à-dire vw pour background-size , la largeur du cadre et background-position - tout fonctionne bien. Encore une fois, cela revient à utiliser des unités cohérentes!

Leçon 10: invitez les gens à participer au projet.

Bien que j'aie beaucoup appris dans le processus, j'ai passé la plupart de mon temps à frapper le mur (souvent jusqu'à ce que le mur soit cassé ou que ma tête soit cassée… Je ne peux pas faire la différence). Bien qu'il s'agisse d'une méthode, même si vous êtes têtu, vous finirez par avoir mal à la tête. Invitez les autres à participer à votre projet, qu'il s'agisse de chercher des conseils, de souligner des angles morts évidents que vous avez manqués, de fournir des commentaires, d'aider au projet ou de vous encourager à continuer lorsque vous pensez que la portée est trop grande.

Alors permettez-moi de mettre cette leçon en pratique. Que pensez-vous? Comment allez-vous bloquer les zombies avec l'animation CSS? Quels projets entreprenez-vous qui sont trop importants pour vous mettre au défi?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!