0

わかりました、これは数学の人向けだと思います。私は簡単な機能の基本的な知識を持っていますが、これには助けが必要です。

「easeOutSine」関数を使用して、CSS トランジション (translateX) で変換される要素があります。

距離 A を 1500 ミリ秒でカバーします。距離 B (その間のどこか) をカバーするのに必要な時間を調べる必要があります。

「easeOutSine」の関数は次のとおりです。

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

明らかに、A と B は既知の値です。しかし、それらを引数のどこに置くか、またはこれを処理する方法を知る必要があります。よろしくお願いします！

編集：

例: 要素が 1500 ミリ秒で 1000 ピクセル移動するとします。360px のとき、正確にどれくらいの時間が経過しましたか? 線形に動くタイミングを見つけるのは簡単ですが、easyOutSine 関数ではこれを先に進めることはできません。（この位置に到達したら、別の要素にクラスをアタッチしたい）

4

1 に答える 1

1

仮定

私が聞いているのは、t=0 から t=1500 までの紙に y = c * sin(t/d*pi/2) + b という線をたどった場合、鉛筆が移動した距離です。あなたの目標は、距離が B になるような t を見つけることです。

解決

簡単に言えば、弧の長さの公式を見ることになります。具体的には、B = sqrt(1+(pi*c/(2d))^2 * cos(pi*t/(2*d))^2)dt の 0 から t までの積分を解く必要があります。ここで、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 に対して単調なので、あなたに正しい答えを得る。

申し訳ありませんが、計算がうまくいきませんでした。あなたがしようとしていることは、明示的に計算することは実際には不可能です。その方法に慣れていない場合は、数学の問題に対する答えを二分探索する方法に関するチュートリアルを確認することをお勧めします。幸運を！

于 2016-06-07T17:28:41.833 に答える