0

見つけたイージング関数を移植して実装しようとしています

編集

:間違ったイージング機能を貼り付けました、ごめんなさい!正しいものは次のとおりです。

Math.easeOutQuart = function (t, b, c, d) {
    t /= d;
    t--;
    return -c * (t*t*t*t - 1) + b;
};

私が使用している言語はFlashまたはActionscriptではありません。これが私のコードです:

ease:{outquart:{function(t as float,b as float,c as float,d as float) as float
        t=t/d
        t=t-1
        return -c * (t*t*t*t - 1) + b
    end function}}

私はループで関数を呼び出しています:

EDIT2-呼び出し元の関数。

m.moveは、移動する方向の場合は1または-1に設定され、移動する方向の場合は-5+5に設定されます。setspritemovesは可能な限り頻繁に呼び出されます。現在、システムが呼び出すことができる速度と同じですが、ミリ秒のタイマーで呼び出しをトリガーできます。

setspritemoves:function()
                if m.move=1 then
                m.duration=1
                    if m.ishd then
                        for i=0 to m.spriteposx.count()-1
                            m.moveto[i]=m.spriteposx[i]+m.move*324
                        next i
                    else
                        for i=0 to m.spriteposx.count()-1
                            m.moveto[i]=m.spriteposx[i]+m.move*224
                        next i
                    end if                          
                else if m.move=5 then
                    m.duration=5
                    if m.ishd then
                        for i=0 to m.spriteposx.count()-1
                            m.moveto[i]=m.spriteposx[i]+m.move*324
                        next i
                    else
                        for i=0 to m.spriteposx.count()-1
                            m.moveto[i]=m.spriteposx[i]+m.move*224
                        next i
                    end if      
                else if m.move=-1 then
                m.duration=1
                    if m.ishd then
                        for i=0 to m.spriteposx.count()-1
                            m.moveto[i]=m.spriteposx[i]-m.move*324
                        next i
                    else
                        for i=0 to m.spriteposx.count()-1
                            m.moveto[i]=m.spriteposx[i]-m.move*224
                        next i
                    end if      
                else if m.move=-5 then
                    m.duration=5
                    if m.ishd then
                        for i=0 to m.spriteposx.count()-1
                            m.moveto[i]=m.spriteposx[i]-m.move*324
                        next i
                    else
                        for i=0 to m.spriteposx.count()-1
                            m.moveto[i]=m.spriteposx[i]-m.move*224
                        next i
                    end if
                end if
                end function

m.moveto [i]は宛先x座標、m.timeは整数I増分、m.durationは変更が完了するまでにかかる時間と想定される時間、m.spriteposxは現在の位置です私が動かしているオブジェクトの。[i]は現在のスプライトです。

1/2秒で345ピクセルを移動したい場合、時間の増分値はどのくらいにする必要がありますか?

すべての実験で、私は大きな要因でオーバーシュートするか、数ピクセルしか移動しません。

現在、m.timeは反復ごとに1ずつ増加し、m.durationは100です。私はすべての種類の値を試しましたが、一貫して機能するものはないようです。

4

3 に答える 3

2

なぜロジックを1-1にコピーしなかったのですか?トゥイーンは単純なアルゴリズムであり、座標をからに四次形式でマッピングbb+cます。つまり、間隔b + c*t^4t値を取得します[0,1]。置換によりt=0、値が初期値の場合、、bおよびt->1位置が必須であることがわかりb+cます。

t \= dこれが線の理由でdあり、任意の継続時間でありt、アニメーションの開始から経過した時間は前述の範囲の値を取得します。しかし、あなたはt=t-1ネガティブなことをしたり、取ったりしました。なぜですか?

たとえば、345pxを0.5秒で移動すると、初期位置が得られ、pxが測定単位であるbと想定します。アニメーションを選択した長さの間隔に分割します(アニメーションを実行するマシンの能力によって異なります。モバイルデバイスはデスクトップほど強力ではないため、状況に応じて適切なフレームレートを選択します)。たとえば、24 fpsを選択したので、間隔をフレームに分割し、1 / 24、2 / 24などの値を取得して、毎回1​​/24秒ごとに関数を呼び出します。秒単位ではなくフレーム単位で動作し、値1,2、...、12を取ります。計算はどちらの方法でも同じです。c=345d=0.50.5*24 = 12td=12t

これが良い例です(ボックスをクリックしてデモを実行します)。値を自由にいじってください。

http://jsfiddle.net/nKhxw/

于 2011-10-11T12:45:40.370 に答える
0

ベジェ関数

http://blog.greweb.fr/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/から借用

/**
* KeySpline - use bezier curve for transition easing function
* is inspired from Firefox's nsSMILKeySpline.cpp
* Usage:
* var spline = new KeySpline(0.25, 0.1, 0.25, 1.0)
* spline.get(x) => returns the easing value | x must be in [0, 1] range
*/
function KeySpline (mX1, mY1, mX2, mY2) {

  this.get = function(aX) {
    if (mX1 == mY1 && mX2 == mY2) return aX; // linear
    return CalcBezier(GetTForX(aX), mY1, mY2);
  }

  function A(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
  function B(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
  function C(aA1)      { return 3.0 * aA1; }

  // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
  function CalcBezier(aT, aA1, aA2) {
    return ((A(aA1, aA2)*aT + B(aA1, aA2))*aT + C(aA1))*aT;
  }

  // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
  function GetSlope(aT, aA1, aA2) {
    return 3.0 * A(aA1, aA2)*aT*aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
  }

  function GetTForX(aX) {
    // Newton raphson iteration
    var aGuessT = aX;
    for (var i = 0; i < 4; ++i) {
      var currentSlope = GetSlope(aGuessT, mX1, mX2);
      if (currentSlope == 0.0) return aGuessT;
      var currentX = CalcBezier(aGuessT, mX1, mX2) - aX;
      aGuessT -= currentX / currentSlope;
    }
    return aGuessT;
  }
}

一般的な曲線のエイリアス:

{
    "ease":        [0.25, 0.1, 0.25, 1.0], 
    "linear":      [0.00, 0.0, 1.00, 1.0],
    "ease-in":     [0.42, 0.0, 1.00, 1.0],
    "ease-out":    [0.00, 0.0, 0.58, 1.0],
    "ease-in-out": [0.42, 0.0, 0.58, 1.0]
}

独自の曲線を簡単に作成できるはずです...

于 2012-07-12T10:43:12.117 に答える
0

ありがとう、ジョニー!

Bezierイージング関数を実装する方法は次のとおりです。iOSの場合はCまたはObjective-C

// APPLE ORIGINAL TIMINGS:
//    linear        (0.00, 0.00), (0.00, 0.00), (1.00, 1.00), (1.00, 1.00)
//    easeIn        (0.00, 0.00), (0.42, 0.00), (1.00, 1.00), (1.00, 1.00)
//    easeOut       (0.00, 0.00), (0.00, 0.00), (0.58, 1.00), (1.00, 1.00)
//    easeInEaseOut (0.00, 0.00), (0.42, 0.00), (0.58, 1.00), (1.00, 1.00)
//    default       (0.00, 0.00), (0.25, 0.10), (0.25, 1.00), (1.00, 1.00)

+(double)defaultEase_Linear:(double)t
{
    return t;
}

// Замедление в начале
+(double)defaultEase_In:(double)t
{
    return [AnimationMath easeBezier_t:t

                              point0_x:0
                              point0_y:0

                              point1_x:0.42
                              point1_y:0

                              point2_x:1
                              point2_y:1

                              point3_x:1
                              point3_y:1];
}

// Замедление в конце
+(double)defaultEase_Out:(double)t
{
    return [AnimationMath easeBezier_t:t

                              point0_x:0
                              point0_y:0

                              point1_x:0
                              point1_y:0

                              point2_x:0.58
                              point2_y:1

                              point3_x:1
                              point3_y:1];
}

+(double)defaultEase_InOut:(double)t
{
    return [AnimationMath easeBezier_t:t

                              point0_x:0
                              point0_y:0

                              point1_x:0.42
                              point1_y:0

                              point2_x:0.58
                              point2_y:1

                              point3_x:1
                              point3_y:1];
}

+(double)defaultEase_default:(double)t
{
    return [AnimationMath easeBezier_t:t

                              point0_x:0
                              point0_y:0

                              point1_x:0.25
                              point1_y:0.1

                              point2_x:0.25
                              point2_y:1.0

                              point3_x:1
                              point3_y:1];
}


// For *better understanding* there is p1 and p2, because it is a Bezier curve from 0,0 to 1,0. So, you can remove p1 and p2 from this method, it is just for better understanding what's going on here

double ease_bezier_A(double aA1, double aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
double ease_bezier_B(double aA1, double aA2) { return 3.0 * aA2 - 6.0 * aA1; }
double ease_bezier_C(double aA1)      { return 3.0 * aA1; }

// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
double ease_bezier_calc(double aT, double aA1, double aA2) {
    return ((ease_bezier_A(aA1, aA2)*aT + ease_bezier_B(aA1, aA2))*aT + ease_bezier_C(aA1))*aT;
}

// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
double ease_bezier_get_slope(double aT, double aA1, double aA2) {
    return 3.0 * ease_bezier_A(aA1, aA2)*aT*aT + 2.0 * ease_bezier_B(aA1, aA2) * aT + ease_bezier_C(aA1);
}

double ease_bezier_get_t_for_x(double aX, double mX1, double mX2) {
    // Newton raphson iteration
    double aGuessT = aX;
    for (int i = 0; i < 4; ++i) {
        double currentSlope = ease_bezier_get_slope(aGuessT, mX1, mX2);
        if (currentSlope == 0.0) return aGuessT;
        double currentX = ease_bezier_calc(aGuessT, mX1, mX2) - aX;
        aGuessT -= currentX / currentSlope;
    }
    return aGuessT;
}



// Objective-C
// For ***better understanding*** there is p1 and p2, because it is a Bezier curve from 0,0 to 1,0. So, you can remove p1 and p2 from this method, it is just for better understanding what's going on here
// p1_x always = 0
// p1_y always = 0
// p2_x always = 1.0
// p2_y always = 1.0
+(double)easeBezier_t:(double)t
             point0_x:(double)point0_x point0_y:(double)point0_y
             point1_x:(double)point1_x point1_y:(double)point1_y
             point2_x:(double)point2_x point2_y:(double)point2_y
             point3_x:(double)point3_x point3_y:(double)point3_y
{
    if (point0_x != 0 || point0_y != 0 || point3_x != 1 || point3_y != 1) {
        [NSException raise:@"Error! Your bezier is wrong!!!" format:@""];
    }

    double v = ease_bezier_calc(ease_bezier_get_t_for_x(t, point1_x, point2_x), point1_y, point2_y);

    return v;
}
于 2016-12-14T13:09:42.437 に答える