3

アクティブユーザーのGoogleAnalyticsでこのようなアニメーションを作りたいです。

分析カウンター

アニメーションを実行するスクリプトをいくつか見ましたが、それらは線形モードで実行します。たとえば、速度は0からXXXまで同じです。ゆっくりと開始し、速度を上げて、再びゆっくりと終了するようにします。

javascript / jqueryでこれを行うにはどうすればよいですか？

要求に応じて、私が試したこと：

<span id="counter">0</span>    

$(function ()
{
    var $counter = $('#counter'),
        startVal = $counter.text(),
        currentVal,
        endVal = 250;


    currentVal = startVal;
    var i = setInterval(function ()
    {
        if (currentVal === endVal)
        {
            clearInterval(i);
        }
        else
        {
            currentVal++;
            $counter.text(currentVal);
        }
    }, 100);


});

しかし、私はそれが行く方法ではないと思います...

4

1 に答える 1

8

これにはjQueryの組み込みアニメーションを使用します。

stepオプション forに関数を渡すと、.animate()アニメーション中のティックごとに呼び出されます。そうすれば、jQuery がすべてのイージングとそうでないものを処理します。データを処理するだけです。

$({countValue:0}).animate(
    {countValue:346},
    {
        duration: 5000, /* time for animation in milliseconds */
        step: function (value) { /* fired every "frame" */
            console.log(value);
        }
    }
);

コンソールには、0 から 346 までの値が表示され、イージングが完了しています。

于 2012-11-21T20:27:53.893 に答える