web-dev-qa-db-ja.com

イーズインとイーズアウトのアニメーション式

Ease-Outを実行していて、同じ時間間隔でSステップでX1座標からX2座標へのオブジェクトの動きの Ease-Inアニメーション を実行している場合、この動きのX座標を計算する式を提案できる人はいますか？

c#c++animationeasing
31
ahmd0

二次緩和はどこで：

t =現在の時刻
b =開始値
c =値の変更
d =期間

 function (float time, float startValue, float change, float duration) {
     time /= duration / 2;
     if (time < 1)  {
          return change / 2 * time * time + startValue;
     }

     time--;
     return -change / 2 * (time * (time - 2) - 1) + startValue;
 };

ソース： http://gizma.com/easing/

35
Toad

実際には、[0;で時間を取得する関数を使用します。 1]および[0;で時間を出力します。 1]、結果を任意のタイプ（2Dベクトル、3Dベクトル、...）に適用できるようにします。

解決策1

二次イージングのイン/アウトでは、曲線はtに応じて2つの関数に分けられます。

  • t <0.5の場合：f(t) = square(t)
  • t> = 0.5の場合：f(t) = 1 - square(t - 1) + 0.5

削減後、Cでは、次のようになります。

float InOutQuadBlend(float t)
{
    if(t <= 0.5f)
        return 2.0f * square(t);
    t -= 0.5f;
    return 2.0f * t * (1.0f - t) + 0.5;
}

解決策2（ベジエ）

別の興味深いブレンドカーブは、Bezierによって与えられたもので、非常に最適化されるという利点があります（ifがありません）。 Wolfram で曲線を確認できます。次に、Cコードを示します。

float BezierBlend(float t)
{
    return square(t) * (3.0f - 2.0f * t);
}

解決策3（パラメーター関数）

編集：
@ DannyYaroslavskiが提案するもう1つの方法は、提案された単純な式 here です。

それはパラメトリックであり、ニースのイン/アウトの加速と減速を取得します。

Alpha = 2の場合、次の関数を取得します。

curve

これはCで次のように翻訳されます：

float ParametricBlend(float t)
{
    float sqt = square(t);
    return sqt / (2.0f * (sqt - t) + 1.0f);
}
35
Creak

同じ問題が発生しました。チャート_(Ease in-out)_をアニメーション化したかったのです。

Brainstormには2つの方法がありました。

1）トリゴノメトリー式。まず、y=(sin(x/π*10-π/2)+1)/2を書きました。これはsin^2((5*x)/π)です

_float TrygoEase (float x) {
    float y=(float)Math.pow(Math.sin(5*x/Math.PI),2);
    return y;
}
_

2）2つの放物線。難しくありませんでした。 _y=2*x*x_で_[0;0.5]_を使用し、_[0.5;1]_でy=-2(x-1)^2+1を使用しました

_float ParabolEase(float x) {
    float y=2*x*x;
    if(x>0.5f){
        x-=1;
        y=-2*x*x+1;
    }
    return y;
} 
_

この方法を_x=[0;1]_に使用します。これは_y=[0;1]_も返します。

これで、このグラフを比較できます。

enter image description here

0
Egor Randomize