問題タブ [easing-functions]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
1619 参照

wpf - WPF 3.5アニメーションのイージング関数?

Silverlight と WPF 4.0 が出てくるためのいくつかのイージング関数があることは知っています。

しかし、私は自分のプロジェクトに本当に必要であり、ネット上で見つけることができないようです(WPF 4.0ではありません)

私が使用できるSilverlightの実装またはポートを知っている人はいますか?

ありがとうマーク

0 投票する
2 に答える
1088 参照

iphone - 既知の開始速度と距離で UIViewAnimationCurveEaseOut アニメーションの継続時間を計算するにはどうすればよいですか?

UIViewAnimationCurveLinear を使用して 2 点間のビューをアニメーション化しているので、このアニメーションの速度がわかります。特定の状況では、UIViewAnimationCurveEaseOut を追加して、ビューを遅くして停止させたいと考えています。この効果をシームレスにするには、イーズアウト アニメーションは、その前の線形アニメーションと同じ速度で開始する必要があります。このイージングを発生させたい一定の距離が与えられた場合、この既知の開始速度を達成するために必要な時間をどのように計算できますか?

たとえば、ビューを x = 0 から x = 100 まで 10 秒間アニメーション化するとします。したがって、速度は 10 ピクセル/秒です。UIViewAnimationCurveEaseOut アニメーションを使用して、ビューを x = 100 から x = 120 に減速させたいと思います。アニメーションが 10 ピクセル/秒で開始されるようにするには、このアニメーションの長さをどのくらいにする必要がありますか?

Core Animation の CAMediaTimingFunction は、2 番目と 3 番目の制御点が曲線の形状を決定する 3 次ベジエ曲線を使用してアニメーションのペーシングを制御することを理解しています。UIViewAnimationCurve イージング関数も 3 次ベジエ曲線であると思います。これらの関数で使用されるデフォルトのコントロール ポイントを知っていれば、与えられた速度と距離から持続時間を計算する式を導き出すことができるはずですが、どこにも文書化されているこれらのデフォルトのコントロール ポイントを見つけることができませんでした。

0 投票する
3 に答える
3831 参照

drag - 慣性で設定距離を移動するための初速度を計算します

何かを一定の距離だけ動かしたい。ただし、私のシステムでは、慣性/ドラッグ/負の加速があります。私はそれのためにこのような簡単な計算を使用しています:

これを複数のフレームに適用すると、動きが「ランプアップ」または減衰します。例:

ですから、私は移動したい距離と加速度を知っていますが、そこに到達するための初速度はわかりません。たぶんもっと良い説明は、ビリヤードボールが特定のポイントで止まるように打つのがどれほど難しいか知りたいということです。

私は運動方程式(http://en.wikipedia.org/wiki/Equations_of_motion)を見てきましたが、私の問題の正しいものが何であるかを理解することができません...

何か案は?ありがとう-私は科学のバックグラウンドではなくデザインの出身です。

更新:Fiirhokには、固定加速度値を使用したソリューションがあります。HTML + jQueryデモ: http:
//pastebin.com/ekDwCYvj
小数値またはイージング関数を使用してこれを行う方法はありますか?私の経験では、固定加速とフレームベースのアニメーションが最終ポイントをオーバーシュートすることがあり、強制する必要があり、わずかなスナップグリッチが発生するという利点があります。

0 投票する
1 に答える
1883 参照

javascript - このウィンドウスクロール移動機能にJQueryイージングを実装する方法は?

このコードを使用すると、マウスホイールの動きをキャプチャして、垂直方向のデフォルトではなく水平方向のスクロール バーに適用することができました。

この jQuery イージング アニメーションをスクロールの動きに追加する方法はありますか?

よろしくお願いします!

0 投票する
2 に答える
2610 参照

wpf - WPFアニメーションのイージング機能

さまざまなパラメーターを使用してこれらすべてのイージング関数を試して、変更を確認できる、優れたサンプルアプリはありますか?

私が自分で1つを構築できない理由は2つあります。

  • 時間がない
  • 私は彼の怠惰を甘やかす必要がある気の愚かな怠惰な男です
0 投票する
3 に答える
8591 参照

wpf - WPF では、コード ビハインドからアニメーションにイージング関数を追加するにはどうすればよいですか?

コードで doubleAniation を作成していて、それにイージング関数を追加したいのですが、どうすればよいですか?

0 投票する
1 に答える
432 参照

silverlight - GUIアイテムのドロップをシミュレートするための最良のイージング機能は何ですか?

Expression Blendには非常に多くのイージング機能があり、それぞれに非常に多くの設定があるため、どのイージング機能を選択するかを本能的に知るのは難しいことがよくあります。すべてのオプションを試すには、かなり長い時間がかかります。

この場合、アイテムが前後に倒れたような印象を与えたいと思います。Xを中心とした投影回転を使用しており、現在、円形イージング関数の1つを使用していますが、正しく感じられません。微妙な跳ね返りがおそらく役立つでしょう。

短い距離を落下したような印象を与えるための最良のオプション(および特定の設定)は何でしょうか?

いつものように、よろしくお願いします。

フォローアップ: 以下のコメントの後、ここで提起された一般的な問題(キーワードによるイージング機能と設定の選択)に対する潜在的な長期的な解決策として、www.easing.coをセットアップしました。コミュニティからの貢献を募集しますので、プロジェクトの支援に興味がある場合は、そのWebサイトからのみご連絡ください。

0 投票する
1 に答える
593 参照

apache-flex - flex 4 remove 回転イージング

flex4 で画像をアニメーション化 (回転) しようとしていますが、flex がデフォルトでアニメーションにイージングを追加しているようです。これをオーバーライドして、回転にイージングがないようにするにはどうすればよいですか。

ここで私が使用しているコード行

0 投票する
4 に答える
26168 参照

jquery - Jquery ScrollTo イージング

Jquery ScrollTo にイージング メソッドを適用できません:

これは何も楽にしません...私は今jqueryを使い始めているので(長い間プロトタイプを使っていました)、これは間違いなく私の間違いです。これを実現するにはイージング プラグインが必要ですか? このプラグインのイージング オプションは何ですか (ある場合)? ドキュメントはこれについて明確ではありません。ありがとう。

0 投票する
1 に答える
613 参照

jquery - background-positionを使用する既存のCSSマウスオーバーでjQueryイージングを使用できますか?

カーソルを合わせると背景の位置が変わる一連の画像のマウスオーバーリンクがあります。CSS3を変更せずにこれらのリンクでjqueryイージングを使用することは可能ですか?もしそうなら、誰かが何か例がありますか?

これが私のコードです: