Timing et assouplissement avancé pour les animations Web avec un battage médiatique tumulte

Les plats clés

• TUMULT HYPE est un outil d'animation Web moderne qui permet aux animateurs de créer des images clés (point de départ et d'arrêt) et l'ordinateur remplit dynamiquement tous les trames intermédiaires. La façon dont l'ordinateur génère ces cadres peut avoir un impact sur l'attention d'un spectateur et la connexion émotionnelle.
• Les fonctions de synchronisation jouent un rôle crucial dans l'humanisation des éléments que vous animez. Ils peuvent aider à présenter des informations proprement et clairement, à se concentrer directement, à transmettre les émotions et à divertir et à s'engager. Les fonctions de synchronisation peuvent également modéliser le mouvement des objets «inanima» et «animer».
• TUMULT HYPE propose un éditeur de fonction de synchronisation personnalisé qui permet de manipuler les points de contrôle et d'ajouter de nouveaux points sur la courbe pour former vos propres fonctions de synchronisation personnalisées. Ces fonctions peuvent être nommées et enregistrées pour une utilisation future dans le document de battage médiatique, et peuvent également être définies comme la fonction de synchronisation par défaut pour toute nouvelle animation.
• Les conseils pratiques pour l'utilisation des fonctions de synchronisation incluent la laisse de votre animation «reposer» pendant quelques jours pour voir si vous l'aimez toujours à votre retour, obtenir des commentaires des pairs, en évitant un assouplissement significatif avec des animations déclenchées par les actions de l'utilisateur comme elle le fera se sentir lent, observer la nature et comprendre les mathématiques de la gravité / physique pour informer comment composer les animations.

Cet article a été parrainé par tumulte . Merci de soutenir les partenaires qui rendent le point de point possible.

L'animation peut être à peu près définie comme montrant des images ou des cadres successifs pour donner l'illusion de changements en douceur. Au lieu de produire chaque cadre à main, des outils d'animation Web modernes comme Tumult Hype, laissez un animateur créer des images clés (généralement des points de démarrage et d'arrêt) et l'ordinateur remplit dynamiquement tous les cadres intermédiaires. La façon dont l'ordinateur décide de générer ces cadres peut affecter l'attention d'un spectateur et la connexion émotionnelle. Cet article explore un élément critique d'animations générées, la fonction de synchronisation et comment faire le meilleur usage de l'éditeur de fonction de synchronisation avancée de Tumult Hype pour vos animations.

Avant de lire, la première étape consiste à télécharger le battage médiatique tumulte. L'essai est entièrement fonctionnel pendant 14 jours. Le battage médiatique tumulte a deux modes de saveur: standard et professionnel. Pour faire des fonctions de synchronisation personnalisées (et suivre cet article!), Vous voudrez utiliser Hype Professional.

Fonctions de synchronisation linéaire et d'assouplissement

Disons que vous souhaitez animer une boîte se déplaçant sur l'écran. Au cours de deux secondes, vous le ferez se déplacer à 300 pixels vers la gauche. En générant une animation, l'ordinateur doit déterminer la position de la boîte dans le temps, et c'est le rôle de la fonction de synchronisation. La plus élémentaire d'entre elles est l'interpolation linéaire, qui divise uniformément la distance par le nombre de trames. Ainsi, une animation de 30 images par seconde aurait chaque étape déplacer la boîte de 5 pixels, comme 300px / (2s * 30fps) = 5px. Cela crée avec succès une animation:

Pour être subjectif, cette animation est fade! Il se déplace sans aucune physique ni poids naturel. Les yeux d'un spectateur doivent rattraper la vitesse que la boîte se déplace et dépassera probablement son regard lorsque l'animation se terminera brusquement. La solution la plus courante consiste à appliquer une accélération et une décélération de base à la boîte. Cette fonction de synchronisation est appelée facilité à sortir:

Cela semble mieux et est le choix le plus courant pour les animations. Il s'agit de la fonction de synchronisation par défaut dans le battage médiatique tumulte et la plupart des autres outils d'animation pour une bonne raison.

Représentation des fonctions de synchronisation

Pour être plus précis, une fonction de synchronisation saisit la valeur du temps (x) et publie une valeur de la propriété animée (Y). Rappelant de retour à l'algèbre du collège, F (x) = les fonctions de style Y sont une forme qui peut être représentée sur un graphique 2D. La fonction de synchronisation linéaire de base semble comme on pourrait s'y attendre, une ligne:

La facilité est une courbe douce qui montre comment elle commencera et se terminera à des vitesses plus lentes:

Cette fonction de synchronisation est créée avec les mathématiques d'une courbe cubique Bézier. En modifiant les points de contrôle affectant la courbure, une accélération et des décélérations différentes peuvent être obtenues:

Les valeurs de propriété peuvent même baisser en dessous de la valeur minimale ou supérieure à la valeur maximale, créant des fonctions de synchronisation d'anticipation et de dépassement:

Le battage médiatique tumulte offre encore plus de puissance: plusieurs courbes de Bézier peuvent être combinées pour former des chemins multiples. Ceux-ci peuvent être utilisés pour une variété d'effets tels que le rebond ou l'élasticité:

raisonnement général pour se concentrer sur les fonctions de synchronisation dans vos animations

La nature ne bouge pas mécaniquement comme la fonction de synchronisation linéaire ci-dessus. Les fonctions de synchronisation comme l'assouplissement servent donc un rôle essentiel dans l'humanisation des éléments que vous animez. Cela aide à présenter les informations proprement et clairement. Il dirige la concentration.

Le bon timing aide à donner un sens aux animations. Il transforme les formes sans vie en réalité. Certains peuvent aider à transmettre des émotions qui sont essentielles à la marque. D'autres horaires peuvent divertir et s'engager.

Le mouvement des objets «inanimés» est davantage régi par la physique. Les objets «animés» sont régis par leurs propres pensées et émotions. Les deux styles peuvent être modélisés avec des fonctions de synchronisation.

Application des fonctions de synchronisation dans le battage médiatique tumulte

Modifier la fonction de synchronisation d'une animation dans le battage médiatique tumulte est facile. L'étape zéro fait l'animation, donc si vous ne savez pas, consultez les tutoriels et la documentation.

Pour ajuster la fonction de synchronisation d'une seule animation, vous pouvez double-cliquez sur la barre d'indicateur d'animation entre les images clés dans la zone par propriété:

Si plusieurs animations sont sélectionnées, vous pouvez utiliser le bouton pop-up de la fonction de synchronisation sur le côté droit de l'interface de la chronologie:

Lorsqu'aucune animation n'est sélectionnée, la fonction de synchronisation par défaut est affichée comme le titre du bouton de réduction de la fonction de synchronisation.

Dans Hype Professional, cette interface permet de manipuler les points de contrôle et d'ajouter de nouveaux points sur la courbe pour former vos propres fonctions de synchronisation personnalisées. Les fonctions de synchronisation peuvent être nommées afin qu'elles soient enregistrées pour une utilisation future dans le document de battage médiatique. Ils peuvent également être définis comme la fonction de synchronisation par défaut pour toute nouvelle animation:

Cet éditeur est similaire à d'autres applications d'édition vectorielles. Voici la feuille de triche pour manipuler les points de contrôle:

• Cliquez sur la courbe: ajoutez un nouveau point
• Supprimer la touche: supprimer le point de contrôle
• Cliquez sur Option: Converti en sommet angulaire
• Drag d'option: glisser les nouveaux points de contrôle
• Option (tout en faisant glisser le point de contrôle): miroir
• Commande (tout en faisant glisser le point de contrôle): déconnecté
• None (Point de contrôle en traînant simplement): asymétrique
• Shift (lors de la traînée du point de contrôle): Gardez à 45 ° les angles

Conseils pratiques pour utiliser les fonctions de synchronisation

• L'élaboration et le choix des fonctions de synchronisation sont une compétence, l'expérience rendra une meilleure.
• Laissez votre animation «reposer» en allant quelques jours sans le regarder, et voyez si vous l'aimez toujours à votre retour. Ou obtenir des commentaires des pairs.
• Les animations en boucle doivent généralement utiliser une fonction de synchronisation linéaire. Les fonctions de synchronisation basées sur la facilité créeraient un point d'arrêt ou sauteraient au début du cycle de boucle.
• Évitez un assouplissement significatif (accélération lente) avec des animations déclenchées par les actions des utilisateurs car elle se sentira lente.
• Le dépassement (dos) et l'anticipation (retour arrière) peuvent être des effets qui peuvent sembler glorieux, mais cela va souvent à l'encontre du but d'une animation d'aider les actions associées d'un spectateur. De plus, ceux-ci peuvent perdre du temps d'un utilisateur car ils ont tendance à prendre plus de temps. Utiliser avec parcimonie.
• Il peut être bon d'expérimenter l'utilisation des mêmes durées d'animation et différentes fonctions de synchronisation pour plus d'intrigue visuelle ou d'exprimer un poids / inertie différent. Cela dit, à moins d'animation à partir de modèles ou de personnages naturels, il vaut mieux ne pas aller trop loin avec trop de fonctions de synchronisation différentes. N'oubliez pas d'expérimenter également avec des heures de début d'animation stupéfiantes ou une durée légèrement changeant à la place.
• Tout comme les visuels ont souvent des poids de contrôle de la ligne et des palettes de couleurs, il est bon de trouver un langage de conception pour les animations, y compris les durées et les fonctions de synchronisation, ainsi que la justification des circonstances pour choisir la fonction de synchronisation.
• Observez la nature et comprenez les mathématiques de la gravité / physique car cela peut aider à informer comment composer les animations. Par exemple, pour faire un objet rebondissant, la valeur y doit utiliser la fonction de synchronisation de rebond. La valeur X doit avoir une fonction de synchronisation linéaire car il n'y a pas de forces agissant sur cet axe. Même s'il est bien compris, il est parfois plus facile d'utiliser un moteur de physique.
• Inspirez-vous de la nature ou des maîtres animateurs:
  • Timing for Animation de John Halas et Harold Whitaker
  • Le kit de survie de l'animateur de Richard Williams

Conclusion

La manipulation des fonctions de synchronisation est une étape avancée dans la création d'animations significatives. Ils peuvent aider à modéliser la physique, l'émotion ou simplement réduire la construction de l'image clé. L'éditeur de fonction de synchronisation personnalisée de Tumult Hype donne de la puissance et de la flexibilité pour vous aider à faire vos meilleures animations.

Si vous souhaitez essayer le battage médiatique, en ce moment en tant qu'utilisateur SitePoint, vous pouvez obtenir une norme de battage médiatique pour 50% de réduction à 24,99 $ USD.

ou si vous recherchez la version avec toutes les cloches et sifflets, nous offrons également une remise de 25% pour le professionnel du battage médiatique à 74,99 USD

Les questions fréquemment posées sur les fonctions de synchronisation avancées et l'assouplissement des animations Web

Quelles sont les principales différences entre CSS et JavaScript pour les animations Web?

CSS et JavaScript sont deux outils puissants pour créer des animations Web, mais elles ont des différences clés. CSS est généralement plus simple et plus facile à utiliser, ce qui en fait un bon choix pour les animations simples. Il fonctionne également mieux que JavaScript dans la plupart des cas, car il peut décharger des tâches d'animation au moteur de rendu du navigateur. Cependant, JavaScript offre plus de contrôle et de flexibilité, permettant des animations et des interactions complexes. Il a également une meilleure compatibilité avec les navigateurs plus anciens.

Comment puis-je utiliser l'API des animations Web?

L'API des animations Web fournit un modèle unifié pour les animations dans HTML, SVG et CSS. Il vous permet de créer, de contrôler et d'animer les éléments directement à partir de JavaScript. Pour l'utiliser, vous devez d'abord créer un objet d'animation à l'aide de la méthode élément.animate (), transmettant les images clés et les options de synchronisation comme arguments. Vous pouvez ensuite contrôler l'animation à l'aide de méthodes comme play (), pause () et reverse ().

Quelles sont les fonctions d'assouplissement et comment fonctionnent-elles?

Les fonctions de soulagement sont des fonctions mathématiques utilisées sont-elles utilisées pour contrôler la vitesse d'une animation au fil du temps. Ils peuvent rendre les animations plus naturelles en imitant la façon dont les choses bougent dans le monde réel. Par exemple, les objets commencent généralement à se déplacer lentement, accélèrent, puis ralentissent à nouveau avant de s'arrêter. Les fonctions d'assouplissement peuvent être linéaires, facilitées, facilitées ou facilitées, entre autres.

Qu'est-ce que le battage médiatique tumulte et comment peut-il être utilisé pour les animations Web?

Tumult Hype est un outil puissant pour créer des animations HTML5 et du contenu interactif. Il a une interface conviviale qui vous permet de concevoir et d'animer des éléments sans écrire de code. Cependant, il prend également en charge JavaScript pour des fonctionnalités plus avancées. Les caractéristiques clés de Tumult Hype incluent l'animation basée sur la chronologie, la gestion des scène et les dispositions réactives.

Comment puis-je optimiser mes animations Web pour de meilleures performances?

Il existe plusieurs façons d'optimiser les animations Web pour de meilleures performance. Tout d'abord, essayez d'utiliser CSS pour des animations simples chaque fois que possible, car elle fonctionne mieux que JavaScript. Deuxièmement, utilisez la méthode de demandeanimationframe () pour les animations JavaScript, car elle permet au navigateur d'optimiser la boucle d'animation. Troisièmement, évitez d'animer les propriétés qui déclenchent la disposition ou la peinture, car elles sont plus chères en termes de performances.

Que sont les images clés dans les animations Web?

Les images clés sont des points spécifiques dans une animation où vous définissez à quoi devrait ressembler un élément. Ils sont utilisés pour contrôler les étapes intermédiaires d'une séquence d'animation CSS. Vous pouvez spécifier autant d'images clés que vous le souhaitez, et le navigateur interpolera l'animation entre eux.

Comment puis-je rendre mes animations Web réactifs?

Pour rendre vos animations Web réactifs, vous avez besoin pour s'assurer qu'ils s'adaptent à différentes tailles d'écran et orientations. Cela peut être réalisé en utilisant des unités relatives comme les pourcentages au lieu d'unités absolues comme les pixels, et en utilisant des requêtes multimédias pour ajuster les paramètres d'animation en fonction de la taille de la vision.

Quelles sont les meilleures pratiques pour les animations Web?

Certaines meilleures pratiques pour les animations Web incluent la maintenance des animations simples et subtiles, en utilisant des fonctions d'assouplissement pour rendre les animations plus naturelles, optimiser les animations pour les performances et rendre les animations réactives. Il est également important de s'assurer que les animations améliorent l'expérience utilisateur plutôt que de les distraire.

Comment puis-je tester et déboguer mes animations Web?

La plupart des navigateurs modernes ont des outils de développement intégrés pouvant être utilisé pour tester et déboguer les animations Web. Ces outils vous permettent d'inspecter les propriétés d'animation, de contrôler la lecture de l'animation et de visualiser la chronologie de l'animation. Vous pouvez également utiliser JavaScript pour enregistrer des événements et des états d'animation.

Puis-je utiliser des animations Web pour améliorer l'accessibilité?

Oui, les animations Web peuvent être utilisées pour améliorer l'accessibilité en fournissant des indices visuels et des commentaires, guider les utilisateurs à travers les interactions et améliorer l'expérience utilisateur globale. Cependant, il est important de garantir que les animations ne causent pas de problèmes pour les utilisateurs ayant une sensibilité au mouvement ou d'autres besoins d'accessibilité. Vous pouvez utiliser la requête multimédia préfabriquée pour ajuster ou désactiver les animations pour ces utilisateurs.

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!