Wie bekomme ich die Zeit, ein Element, das CSS-Übergang mit easeOutSine hat, um eine bestimmte Strecke zurückzulegen?

Question

Ok, das ist eine für Mathe Leute, schätze ich. Ich habe ein Grundwissen über die Funktionen der Lüftung, aber ich brauche etwas Hilfe.

Ich habe ein Element, das mit CSS-Übergang (translateX) mit der Funktion 'easeOutSine' übersetzt wird.

Es deckt den Abstand A in 1500 ms ab. Ich brauche, um herauszufinden, wie viel Zeit es einen Abstand B bedecken muss (irgendwo dazwischen)

Die Funktion für ‚easeOutSine‘ ist:

function easeOutSine(t, b, c, d) { 
    return c * Math.sin(t/d * (Math.PI/2)) + b; 
} 

Offensichtlich A und B sind für mich bekannte Werte. Aber ich muss wissen, wo ich sie in die Argumente stecken oder wie ich damit umgehen soll. Vielen Dank im Voraus!

EDIT:

Beispiel: Nehmen wir an, das Element 1000px in diesen 1500ms bewegt. Wie viel Zeit ist genau vergangen, wenn es bei 360px ist? Es ist einfach herauszufinden, wann es sich linear bewegt, aber ich komme mit der Funktion easeOutSine nicht voran. (Wenn es diese Position erreicht würde Ich mag eine Klasse zu einem anderen Element befestigen)

Answer 1

Annahmen

Was ich höre, ist, dass wenn du die Linie y = c * sin verfolgen (t/d * pi/2) + b Auf einem Blatt Papier von t = 0 bis t = 1500 ist die von Ihrem Bleistift zurückgelegte Entfernung A. Ihr Ziel ist es, t so zu finden, dass der Abstand B ist.

Lösung

Lange Rede kurzer Sinn, Sie werden sich die arc length formula ansehen. Insbesondere müssen Sie B = ganzzahlig von 0 bis t von sqrt (1+ (pi * c/(2d))^2 * cos (pi * t/(2 * d))^2) dt lösen , wobei B, c und d Konstanten sind und die gesuchte Variable B ist.

Es ist nicht wirklich offensichtlich für mich, wie die Informationen, die du über A hast, dir dabei helfen können, also würde ich eine Binärdatei empfehlen Suche nach t, ​​wo dein anfänglicher Bereich von [0, 1500] ist, und du "evaluierst" die Funktion (dieses Integral) über eine Technik zur Approximation von Integralen. Die Funktion y = ganzzahlig von 0 bis t von sqrt (1+ (pi * c/(2d))^2 * cos (pi * t/(2 * d))^2) dt ist monoton über t, so dass bekommst du die richtige Antwort.

Sorry darüber, wie Mathy das bekam; Was Sie suchen, ist nicht wirklich möglich, explizit zu berechnen. Vielleicht möchten Sie einige Tutorials zur binären Suche nach einer Antwort auf ein mathematisches Problem ausprobieren, wenn Sie mit dieser Methode nicht vertraut sind. Viel Glück!