Comment documentez-vous et partagez-vous les informations de mouvement / animation avec les développeurs?
J'ai un projet en ce moment. Je construis un site Web avec un développeur. J'ai partagé tous les actifs en utilisant Zeplin. Mais puisque c'est la première fois, je devrais également partager comment tout devrait se comporter. J'ai un ensemble de règles basées sur le mouvement et les valeurs, mais quelle est la bonne façon de le faire; les effets de parallaxe, et toutes les autres choses?
Je n'ai aucune idée de Zeplin mais j'en utilise d'autres comme AE, Pixate et Flinto pour faire des animations UX. Quand il est nécessaire de dire à nos développeurs comment fonctionne ma démo et les effets dont j'ai besoin, j'ai enregistré les mouvements, les paramètres et les chiffres que j'ai définis. Comme ça:
le bouton "confirmer" descend de 30 pixels en 1 seconde, avec sa valeur d'axe Y passée de 100 à 130.
le bouton flottant disparaît progressivement en 2s, sa valeur d'opacité passant de 80% à 0%. Et en attendant, sa taille est passée de 100% à 0%.
En un mot, tout tourne autour
1. Objet + changements (position ， échelle, rotation, couleur, transparence) + temps.
2. Si les plusieurs changements d'un objet ou d'objets différents se produisent dans le même intervalle de temps ou non.
Si c'est trop complexe, un calendrier serait utile pour le comprendre.
J'espère que je comprends votre sens et cela aide :)
Tout dépend de l'ensemble de compétences de chacun.
Je connais AE, donc je peux créer n'importe quelle animation 2D que j'aime, puis je peux utiliser Lotti (anciennement Bodymovin), qui transforme mon animation en un fichier json que les développeurs peuvent simplement utiliser sur le site Web. S'il n'y a pas d'animations complexes et que le chargement de Lottie nuit aux performances, il existe l'outil de Firefox pour convertir le json Lottie produit en un sprite svg, ce qui se traduit par une animation très légère et d'excellentes performances!
Si je n'avais pas connu AE, j'aurais trouvé de bonnes références à envoyer aux développeurs. Les références sont bonnes à plusieurs égards a) elles traduisent très bien sa signification b) elles ajoutent d'autres aspects du comportement que vous avez omis de mentionner c) les développeurs peuvent simplement utiliser les bibliothèques utilisées dans l'exemple que vous avez donné et gagner du temps à chercher des solutions à leurs problème. Une bonne référence est d'abord celle que vous regardiez lorsque vous avez conçu ce comportement, et s'il n'y en a pas d'autre qu'un site Web fonctionnel avec l'animation que vous avez demandée est génial. Un bon endroit pour rechercher de telles références est this excellent site Web qui fournit des solutions ainsi que des exemples d'application.