Points de mouvement de la courbe CSS Bezier pure

Pure CSS Bezier Curve Motion Chemins: Trois méthodes ont comparé

Êtes-vous un passionné de la courbe de Bezier? Leurs propriétés d'élégance et de mathématiques les rendent idéales pour diverses applications, y compris les graphiques vectoriels (SVG, les polices), le timing d'animation et, comme nous l'explorerons, les chemins de mouvement CSS.

Cet article détaille trois méthodes CSS uniquement pour l'animation d'éléments précisément le long d'une courbe Bezier 2D cube, en évitant le JavaScript. Nous examinerons chaque approche, ses forces et ses faiblesses.

Récapitulatif rapide: courbes de Bezier cubique

Une courbe de Bezier cubique est définie par quatre points: deux points d'extrémité (P0, P3) et deux points de contrôle (P1, P2). La forme de la courbe est déterminée par les positions des points de contrôle par rapport aux points d'extrémité.

Le défi: animation CSS précise le long d'une courbe de Bezier

L'objectif est d'animer un élément pour suivre une courbe de Bezier cubique donnée en utilisant uniquement CSS.

Explorons trois solutions:

Méthode 1: Time Warp (en utilisant animation-timing-function)

Cette méthode exploite la fonction cubic-bezier() dans animation-timing-function. Les animations séparées contrôlent les coordonnées x et y, avec cubic-bezier() déformer le temps pour chaque axe pour correspondre à la courbe.

• PROS: relativement simple pour ceux qui connaissent le hack de fonction cubic-bezier() de synchronisation.
• contre: ne fonctionne pas lorsque les points de terminaison sont sur une ligne horizontale ou verticale (facilement atténuée avec un petit décalage), limité aux courbes de Bezier cubique, et offre un contrôle limité sur le synchronisation de l'animation au-delà des paramètres cubic-bezier().

Méthode 2: Animations concurrentes (en utilisant plusieurs @keyframes)

Cette méthode utilise plusieurs règles @keyframes qui interagissent subtilement. Les animations modifient la propriété transform, avec des animations ultérieures s'appuyant sur les transformations appliquées par les antérieures. Cela permet une solution étonnamment élégante, même pour les courbes cubes.

• PROS: CSS simple, prend en charge toute fonction d'animation du temps d'animation CSS et peut facilement s'étendre aux courbes 3D.
• CONS: Les formules pour calculer les images clés peuvent être moins intuitives.

Méthode 3: Construction de la courbe de Bezier standard (en utilisant les variables CSS et @property)

Cette approche imite directement la construction mathématique d'une courbe de Bezier. Il utilise des variables CSS et @property pour définir et animer les points intermédiaires, créant finalement la courbe complète.

• PROS: Intuitif pour ceux qui comprennent la construction de la courbe de Bezier, s'étend facilement aux courbes d'ordre supérieur et 3D, et un synchronisation d'animation flexible.
• CONS: s'appuie sur @property, qui n'est pas universellement pris en charge par tous les navigateurs.

Considérations de synchronisation d'animation

Toutes les méthodes prennent en charge diverses fonctions de synchronisation d'animation (animation-timing-function). Les méthodes 2 et 3 appliquent directement ces fonctions, tandis que la méthode 1 nécessite un ajustement minutieux des paramètres cubic-bezier() pour atteindre l'effet souhaité.

Conclusion

Chaque méthode offre une approche unique pour l'animation le long d'une courbe de Bezier avec des CS purs. Le meilleur choix dépend de votre familiarité avec les techniques, des exigences de compatibilité du navigateur et du niveau de contrôle nécessaire sur le calendrier de l'animation. La méthode 2 offre un bon équilibre de simplicité et de flexibilité pour la plupart des scénarios.

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!