2

JS/JQuery の実行フローを緩和するために、次のようにループします。

for (int i = 0; i < 100; i++)
{ 
   doSomething(...); // returns momentally
}

実行フローにイージングを適用する方法を探しています - 合計期間とイージング パターン (例: 2 秒とイーズバック) を指定します。JS で実行可能なことはありますか (私も jQuery を使用しています)。

Update 2質問を明確にするために更新されました-私は次のものを探しています:

更新 3 - Sheikh Heera は正しいです。私が提供したサンプルは実際の問題を示していません。execute 関数は、私が持っているものに近い外部モジュールを呼び出すように更新されています。関数の呼び出しに jQuery の animate を直接適用する方法がわかりません。

easer.ease({ start: 0, 
   end: 100, 
   duration: 900, 
   easing: "easeOutBounce",
   execute: function (e) { ExternalModule.DoSomethingUseful(e); } });

ここでstart、endはアニメーション範囲を指定する整数、durationミリ秒単位のアニメーション時間、 はeasing範囲内の値をアニメーション化するために使用されるイージング パターンです-上記のサンプルで提供されたイージング パターンを使用してからまでのexecute値で呼び出される関数イージング関数を使用して、数秒以内にmyDiv の高さをアニメーション化します。010001000.9easeOutBounce

理想的には、 に基づく小さなスタンドアロン プラグインとしてjQuery、間違いなくその一部でMootoolsもなく、そのためだけにそれらを持ち込む余裕がない他のヘビー ヒッターでもありません。

4

3 に答える 3

1

最善を尽くして、jQueryの「アニメーション」プロパティを使用して、あなたが望むことを達成しようとしました。

この jQuery プロパティを使用すると、必要に応じて「イージング」、「デュレーション」、「コールバック」などを追加できます。これを実現するために「step」プロパティを使用しました。

機能させるには、HTML に「ダミー」タグを追加して非表示にする必要があります。

デモ: http://jsfiddle.net/vaakash/Wtqm3/

HTML

<!-- Add a dummy tag to apply animate property -->
<span class="holder" style="display:none" ></span>​

jQuery

$('.holder').animate(
    {
        'end': 100 // There is no such "end" css property just using as an end mark
    },
    {
        duration: 500,
        step: function(now, fx) {
            myFunction(now); // Call your function here with the "now" param (i.e ExternalModule.DoSomethingUseful(now) ) in your case                      
        }
        // Add easing property if wanted
    }
);

// The function
function myFunction(param){
    $('body').append('Value now: ' + param + '</br/>');
}​

お役に立てれば。

于 2012-12-01T10:15:01.210 に答える
1

あなたの質問を正しく理解していれば.... .delay(100) または .delay(xmilliseconds) を使用してみてください。各ステップで時間がかかります。

の遅延について詳しくは、http: //api.jquery.com/delay/をご覧ください。

于 2012-11-22T14:43:27.140 に答える
1

jQuery でのイージング

jQuery には、線形とスイングの 2 つのイージングしかありません。あなたが探しているのは、jQuery UI で使用される関数です。からアクセスできます$.easing。

$.easing のデモで、それらを使って遊ぶことができます。

名前で好きな関数を呼び出すことができます$.easing.easeOutBounce(e, t, n, r)。唯一の紛らわしい部分は、実際には 4 つの変数関数であるということです。jQuery UI ドキュメントから:

Robert Pennerのイージング方程式に基づく

それらを使用する「標準的な」方法は、通常変更したい変数であるf(x, 0, 0, 1)ためです。ほとんどの関数の「開始点」のようであり、それらの多くの「パワー」であり、線形スケール係数であるように見えます。entr

免責事項

これは、jquery および jquery-ui のソース ファイルを調べて得た最良の推測にすぎません。イージングを行いたい場合は、安定した API の一部ではない内部パーツに依存するのではなく、独自の関数を作成することをお勧めします。

あなたの使いやすさ機能

このような関数を作成することはお勧めしませんが、興味深い実験でした。デモ。

var ease = function(options) {
    var t = 0;
    // we need a time interval for animating
    var tstep = options.interval || 10;
    var duration = options.duration || 500
    var i = options.start || 0;
    var end = options.end || 100;
    // the easing functions only work over x=0..1
    var scale = end - i;
    //  one divided by the number of tsteps
    var interval = tstep/duration;
    var easing = options.easing || 'linear';
    var callback = options.execute || function(){}; 
    var timeout = function() {
        // we call the callback but pass it the scale result of our easing
        callback(scale*$.easing[easing](Math.min(i, 1)));
        // if we haven't reached the end of the animation, queue up another frame
        if (t <= duration) {
            window.setTimeout(function() {       
                 timeout();
            }, tstep);
            i += interval;
            t += tstep;
        }
    };
    timeout();
};

ease({
    start: 0,
    end: 100,
    duration: 900,
    easing: 'easeOutBounce',
    // we'll print to the screen the results of the easing
    execute: function(e) {$('body').append('<p>' + e)}
});
于 2012-12-01T20:02:57.897 に答える