easeOutSine을 사용하여 CSS 전환이 적용된 요소를 얻는 방법은 일정한 거리를 커버해야합니까?

Question

좋아, 이것은 수학 사람들을위한 것입니다. 쉬운 기능에 대한 기본적인 지식을 가지고 있지만 이에 대한 도움이 필요합니다.

'easeOutSine'기능을 사용하여 CSS 전환 (translateX)으로 번역되는 요소가 있습니다.

거리 A는 1500ms입니다. 나는

'easeOutSine'의 기능은 그것 (그 사이에) 거리 B를 포함 할 필요가 얼마나 많은 시간을 알아낼 필요 :

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

분명히 A와 B가 알려진 값을 나를 위해. 그러나 나는 논쟁에 이들을 어디에 둘 것인지, 어떻게 처리해야 하는지를 알아야한다. 대단히 감사드립니다!

편집 :

예 :의이 요소들에서 1500ms에서 1000px로 이동한다고 가정 해 봅시다. 그것이 360px 일 때 얼마나 많은 시간이 지났습니까? 선형으로 움직이는 지 알아내는 것은 간단하지만 easeOutSine 함수를 사용하여 앞서 갈 수는 없습니다.

Answer 1

가정

(가이 위치에 도달 할 때 내가 다른 요소에 클래스를 연결하고 싶습니다)

내가 듣고 있어요 당신이 선을 추적한다면 Y = C를 * 죄 (t/D이다 * pi/2) + b를 t = 0에서 t = 1500까지 종이에 대고 연필로 이동 한 거리는 A가됩니다. 목표는 거리가 B가되도록 거리를 찾는 것입니다.

해결책

간단히 말해서, arc length formula을 보게 될 것입니다. 특히, B = 0에서 t까지의 sqrt (1 + (pi * c/(2d))^2 * cos (pi * t/(2 * d))^2) dt의 정수를 풀 필요가 있습니다. 여기서 B, c 및 d는 상수이고 찾고있는 변수는 B입니다.

A에 대한 정보가 어떻게 풀릴 수 있는지 내게는 분명하지 않으므로 바이너리를 권장합니다. 초기 범위가 [0, 1500] 인 t를 찾고, 근사화를위한 몇 가지 기법을 통해 함수 (그 적분)를 '평가'하십시오. 함수 y = sqrt (1 + (pi * c/(2d))^2 * cos (pi * t/(2 * d))^2) dt의 0에서 t까지의 적분은 t에 대해 단조 적이기 때문에 정답을 잡아라.

얼마나 mathy에 대해 미안 해요; 당신이하려는 것은 명시 적으로 계산할 수 없습니다. 이 방법에 익숙하지 않은 경우 수학 문제에 대한 답을 이진 검색하는 방법에 대한 자습서를 확인할 수 있습니다. 행운을 빕니다!