2

イージングが次のアニメーションに引き継がれるように、1 つのアニメーションとしてグループ化したい 2 つのアニメーションがあります。2 番目のアニメーションは、最初のアニメーションが終了した後に開始する必要があります。これは私がこれまでに持っているものですが、2 番目のアニメーションが始まると、イージングが最初からやり直されます (これは私が期待していたものです)。

$progressBar.animate({width: progressBarWidth + '%'}, barAnimationSpeed, 'swing', function(){
    $overGoalBar.animate({width: overGoalBarWidth + '%'}, barAnimationSpeed, 'swing', function(){});
});

これが現在どのように機能するかの例です。

これらのアニメーションを 1 つのイージング アニメーションにグループ化するにはどうすればよいですか?

4

3 に答える 3

0

イージング効果のあるプログレスバーの動的に作成されたパーセンテージ値を示したい場合。

サーバーで作成された背景画像を使用します

例) PHP で GD ライブラリを使用する

その画像を CSS の 1 つの DIV タグの背景として設定します。

#progressBar { background-img('Dynamically-created-image.jpg'); }

最後に、その 1 つの DIV タグを 1 回だけアニメーション化します。

私があなたのことを正しく理解していれば、このアイデアはうまくいくかもしれません。

于 2011-09-16T17:39:07.007 に答える
0

これは、カスタム イージング関数を作成するための優れたオンライン ツールです...

http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm

また、イージングに関する一般的な情報を以下に示します。イージング関数がある場合、イージング プラグインは必要ありません。含まれているリンクから、それぞれのデモを見て、その背後にあるイージング関数と比較できます...

この jQuery アニメーションにアクセラレーションを追加するにはどうすればよいですか?

于 2011-09-16T18:37:09.707 に答える
0

使ってみましたlinearか？

$('#progressBar').animate({width: 50 + '%'}, 2500, 'linear', function(){
    $('#overGoalBar').animate({width: 49 + '%'}, 2500, 'linear', function(){});
});

2 つのアニメーションを正確に連鎖させていることに注意してください。ただし、滑らかにします。

http://jsfiddle.net/dkBMA/11/

于 2011-09-16T18:53:49.463 に答える