問題タブ [easing-functions]

jQuery Easing プラグインとバウンス イージング効果を使用しています。私はそれが好きですが、それは信じられないほど劇的です。トーンを下げる必要があります (おそらく、バウンスを取り除き、曲線をあまり劇的にしないようにします.

この投稿を見つけましたが、実は私は数学を専攻していません... 誰か英語で助けてくれませんか? 私はそれを完全に把握する必要さえありません。誰かが私に機能を提供してくれるだけで大​​丈夫です。

試したコードを貼り付ければいいのはわかっているのですが、何を試したらいいのかわからないので、jQuery Easing プラグインで提供されているイージング関数を投稿しようと思います。

私は数学が得意ではありません。アニメーションにこれを実装する方法を推測しようとしています。しかし、現在は機能していません。アニメーションのイージング機能を実行する方法を誤解していると思います。

平面を表すことを目的としたオブジェクトがあり、そのキャンバスには次のプロパティがあります。

次に、数学を組み込んで、イージング関数を使用して飛行機が滑走路に着陸するようにします。これにより、次のような現実世界の物理学でなくても、視覚的に半分まともに見えます。

問題は、飛行機が目的地に向かって滑走路を長く進むときに減速しないことです。それは本当に遅いままです。

イージング関数の仕組みと数学を混同していませんか?

私は現在、GSAP (Greensock の JS Tweening ライブラリ) を含まないプロジェクトに取り組んでいますが、ビジュアル エディターを使用して独自のカスタム イージング関数を作成するのは非常に簡単なので、必要な機能を分解する方法があるかどうか疑問に思っていましたcreateJS Tween で再利用できるように関数を緩和しますか?

例：

そのため、次のようになります。

(この特定のイージング メソッドのグラフは次のようになります。 )

ease("elastic", a, p)d3js で関数を使用しているときに、非常に奇妙な問題が発生します。円の半径を移行していますが、コンソールに大量のエラーが表示され、Web ページの速度が大幅に低下しています。エラーは、私が負の半径を設定していることを示しています — いくつかのデバッグの後 (すべてをコンソールに記録してから前のコードとの差分まで)、elasticイージングが原因であることがわかりました。これが私のコードです：

そして、これが私が得ているエラーの例です:

行を変更すると：

に：

...コンソールにエラーが吐き出されることはありません。

ここにもスクリーンショットがあります：

この問題を解決する方法を教えていただければ幸いです。前もって感謝します！

値の変化が 0 の場合、easeInQuad常に 20easeOutElasticが返され、間違った値も返されます。

値の変化を 0 にすることはできませんか? jQueryはどのように処理animate({top: 0})し、0を0.0001に設定しますか?

値の変化の意味を誤解しています。終了値が必要な場合0、パラメーターcは-20

使用しています

そして、私は3つのアニメーションセクションを使用しています

ただし、キー フレームの 1 つで、イーズインしたいと考えています。

これにイージング関数を追加するにはどうすればよいですか?

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

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

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

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

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

編集：

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

d3.scale数値の配列を変更し、カスタム補間関数を使用して新しい範囲に出力したいと考えています。補間関数は、トランジションで使用されるイージング関数の 1 つにする必要があります。たとえば、次のようになりeaseInOutQuadます。

したがって、私の入力配列は、配列の先頭で数値がゆっくりと増加し、中央に向かって徐々に速くなり、最後に向かって再び遅くなる[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]ようなものになります。[0, 2, 5, 10, 20, 40, 70, 90, 95, 98, 100]

これまでの私のコード:

このようなイージング関数を で使用する方法の提案/例をありがとうd3.interpolate。