dans les transitions CSS3, vous pouvez spécifier une fonction de synchronisation sous la forme de 'cubic-bézier: (0,25, 0,3, 0,8, 1.0)' Dans cette chaîne, vous ne spécifiez que le XY pour les points P1 et P2 le long de la courbe, car p0 et P3 sont toujours (0,0, 0,0) et (1,0, 1,0) respectivement.
Selon le site d'Apple: x [est] exprimé comme une fraction de la durée globale et y exprimée comme une fraction du changement global
Ma question est de savoir comment cela peut être mappé sur une valeur T traditionnelle 1 dimensions en JavaScript?
-
3 Réponses :
Vous voulez trouver la valeur [0,1] pour une valeur de temps t [0,1]? Il y a une équation bien définie pour une courbe cubique bézier. Wikipedia Page: http://fr.wikipedia.org/wiki/ B% c3% a9zier_curve # cubic_b.c3.a9zier_curves
Donc, je n'ai pas besoin de taper leur formule (probablement formatée au latex), j'ai copié - collé la même formule de Qu'est-ce qu'il appelle MU sur cette page est votre variable de temps t.
Edit: Si vous ne voulez pas faire le calcul, on dirait que quelqu'un a déjà écrit une petite bibliothèque utilitaire en JavaScript pour faire de base Bezier Curve Math: https://github.com/sporitt/jsbezier . pointoncurve (courbe, emplacement) ressemble à ce que vous demandez. b (u) = p0 * (1 - u) 3 + p1 * 3 * u * (1 - u) 2 + p2 * 3 * U2 * (1 - u) + p3 * u3
Cela donne le point P le long de la courbe, mais pas comment traduire cela dans une position finale pour que l'objet soit déplacé. (Je ne déplace pas l'objet le long de la courbe)
Plusieurs années plus tard, je vais répondre à mon propre commentaire avec: vous déplacez une courbe longue, c'est juste que y est toujours zéro. Vous vous déplacez le long de la "ligne courbe" qui commence à 0,0 et se termine à 1,0 avec des points de contrôle contrôlant la manière dont vous semblez accélérer / décélérer.
Parcourir un bit WebKit-Source un peu, le code suivant donnera la valeur T correcte pour la courbe implicite utilisée dans les transitions CSS3:
J'espère que cela aide quelqu'un!
Voici le code source C ++ dans webkit: Github .com / webkit / webkit / blob / principale / source / webcore / plate-forme / ...
Et c'est ce que Firefox utilise: Github.com/mozilla / gecko-dev / blob / maître / dom / smil / ...
J'ai essayé de rechercher beaucoup de temps et de formes et j'ai définitivement atteint un simple et rapide. L'astuce consiste à obtenir la fonction cubique bézier sous cette forme:
P (u) = U ^ 3 (C0 + 3C1 -3C2 + C3) + U ^ 2 (3C0 -6C1 + 3C2) + U (-3C0 + 3C1) + C0
où CI sont les points de contrôle.
L'autre partie est la recherche Y à partir de x avec une recherche binaire. }
La longueur
est une fonction de la valeurt . Pas vraiment sûr de savoir comment vous allez avoir cela.