2

JavaScript でスライダー モジュールを構築しようとしています。すべてが機能しますが、アニメーションは直線的で、滑らかでも自然でもありません。イージング方程式を接続することを考えていましたが、どこに行くのかわかりません。

ここから借りたアニメーション関数は次のとおりです。

function animate(elem, style, unit, from, to, time) {
    if (!elem) return;
    var start = new Date().getTime(),
        timer = setInterval(function() {
            var step = Math.min(1,(new Date().getTime()-start)/time);

            elem.style[style] = (from+step*(to-from))+unit;

            if (step == 1) clearInterval(timer);
        },25);
    elem.style[style] = from+unit;
}

そして、ここからのイージング関数:

/**
 * @param {Number} t The current time
 * @param {Number} b The start value
 * @param {Number} c The change in value
 * @param {Number} d The duration time
 */ 
function easeInCubic(t, b, c, d) {
    t /= d;
    return c*t*t*t + b;
}

私はすでに持っている値を次のように渡してみました：

elem.style[style] = easeInCubic(start, from, to, time) + unit;

しかし、明らかにそれは間違っています (私は数学が得意ではありません。もちろん、推測にすぎません)。

2つを結合するにはどうすればよいですか？

4

2 に答える 2

2

t現在の時刻、またはより正確には経過時間です。あなたの場合new Date().getTime() - start

cあなたの場合、開始と終了の違いfrom - toです。

        var elapsedTime = new Date().getTime() - start;
        elem.style[style] = easeInCubic(elapsedTime, from, to - from, time) + unit;
        if (elapsedTime >= time) clearInterval(timer);
于 2013-04-24T11:50:05.977 に答える
2

あなたのアプローチは問題ありません。間違ったパラメーターを使用しただけです。それが言うように、tは現在の時間で、dは全体のアニメーション時間です

function animate(elem, style, unit, from, to, time) {
    if (!elem) return;
    var start = new Date().getTime(),
        timer = setInterval(function() {
            var step = Math.min(1,(new Date().getTime()-start)/time);
            elem.style[style] =  easeInCubic(step*time, from,step*(to-from), time)+unit;

            if (step == 1) clearInterval(timer);
        },25);
    elem.style[style] = from+unit;
}
于 2013-04-24T11:38:03.537 に答える