2 つの正方形を同時に動かそうとしました...最初のアニメーションが無限に繰り返されることはわかっていますが、どうすればよいですか?
質問する
628 次
3 に答える
2
その理由は、ボックスに次の一連のアニメーションを開始するように指示する前に、最初のアニメーションが完了するのを待つ必要があるためです。コードでは、赤いボックスにアニメーションを開始する機会を与えていません。これは、黄色のボックスが常にアニメーションを実行しているためです ( によって作成されたクロージャーがありanimateTheBox、両方のボックスがそれを呼び出しています) :)
そのため、完全な関数ハンドラーをあなたに追加し、呼び出しをそこに.animate()移動しました。animateTheBox()
于 2013-03-14T23:56:54.853 に答える
2
他の解決策はどちらも正しいですが、大量の内部ブロックを含む if else 条件のリストをコードに作成しないでください。代わりに、次の解決策を検討してください。
$(document).ready(function(){
animateTheBox('block1',0);
animateTheBox('block2',2);
});
function animateTheBox(block,i) {
var animation = {};
var duration = 3000;
var easing = 'linear';
var done = function(){ animateTheBox(block, (i+1)%4); };
switch(i){
case 0: animation = {'left' : "-=100px"}
break;
case 1: animation = {'top' : "-=100px"}
break;
case 2: animation = {'left' : "+=100px"}
break;
case 3: animation = {'top' : "+=100px"}
break;
default: return; //This is so you can't call the function in weird ways, as before.
}
$('.' + block).animate(animation, duration, easing, done);
}
switch ステートメントを使用して、実行するアニメーションの種類を決定し、実際のアニメーション呼び出しを 1 回だけ記述します。この種の抽象化は読みやすく、より保守しやすいという追加の利点があります。アニメーションが毎回同じ方法で行われることを確認できます。
編集：
上記の設計パターンはおそらく長期的には優れていますが、代わりに配列を使用して簡単にこれを行うことができます。
$(document).ready(function(){
animateTheBox('block1',0);
animateTheBox('block2',2);
});
function animateTheBox(block,i) {
var animations = [
{'left' : "-=100px"}
, {'top' : "-=100px"}
, {'left' : "+=100px"}
, {'top' : "+=100px"}
];
var duration = 3000;
var easing = 'linear';
var done = function(){ animateTheBox(block, (i+1)%4); };
if ( i < 0 || i >= animations.length)
return; //Don't deal with out of bound numbers.
$('.' + block).animate(animations[i], duration, easing, done);
}
実際、これにより、マルチステップ アニメーションの抽象化が非常に簡単になります。
$(document).ready(function(){
var block1Steps = [
{'left' : "-=100px"}
, {'top' : "-=100px"}
, {'left' : "+=100px"}
, {'top' : "+=100px"}
];
var block2Steps = [
{'left' : "+=100px"}
, {'top' : "+=100px"}
, {'left' : "-=100px"}
, {'top' : "-=100px"}
];
multiAnimate($('.block1'), block1Steps, 3000, 'linear', true);
multiAnimate($('.block2'), block2Steps, 3000, 'linear', true);
});
function multiAnimate(item, animations, duration, easing, infinite){
var i = -1;
var step = function(){
i++;
if (infinite)
i %= animations.length;
if (i >= animations.length) return;
item.animate(animations[i], duration, easing, step);
};
step();
}
次に、本当に Apeshit を取得したい場合は、各アニメーションに独自の持続時間とイージングを与え、BAM! あなたは基本的に、少し任意のマルチステップ アニメーション ライブラリを自分用に作成しました。
function multiAnimate(item, animations, duration, easing, infinite){
var defaultDuration = 1000;
var defaultEasing = 'linear';
var i = -1;
var step = function(){
i++;
if (infinite)
i %= animations.length;
if (i >= animations.length) return;
item.animate(animations[i].animation
, (animations[i].duration)? animations[i].duration: defaultDuration
, (animations[i].easing)? animations[i].easing: defaultEasing
, step
);
};
step();
}
$(document).ready(function(){
var block1Steps = [
{
animation: {'left' : "-=100px"}
, duration: 3000
, easing: 'linear'
}
, {
animation: {'top' : "-=100px"}
, duration: 1000
, easing: 'swing'
}
, {
animation: {'left' : "+=100px"}
, duration: 5000
, easing: 'swing'
}
, {
animation: {'top' : "+=100px"}
, duration: 2000
, easing: 'linear'
}
];
var block2Steps = [
{
animation: {'left' : "+=100px"}
, duration: 5000
, easing: 'swing'
}
, {
animation: {'top' : "+=100px"}
, duration: 2000
, easing: 'linear'
}
, {
animation: {'left' : "-=100px"}
, duration: 3000
, easing: 'linear'
}
, {
animation: {'top' : "-=100px"}
, duration: 1000
, easing: 'swing'
}
];
multiAnimate($('.block1'), block1Steps, 3000, 'linear', true);
multiAnimate($('.block2'), block2Steps, 3000, 'linear', true);
});
于 2013-03-15T00:06:22.313 に答える
1
次のアニメーションを開始するには、各アニメーションの完了関数を次のように使用する必要があります。
$(document).ready(function(){
animateTheBox('block1',0);
animateTheBox('block2',2);
});
function animateTheBox(block,i) {
if (i==0)
{
$('.'+block).animate({'left' : "-=100px"}, 3000, 'linear', function() {
animateTheBox(block,1);
});
}
else if (i==1)
{
$('.'+block).animate({'top' : "-=100px"}, 3000, 'linear', function() {
animateTheBox(block,2);
});
}
else if (i==2)
{
$('.'+block).animate({'left' : "+=100px"}, 3000, 'linear', function() {
animateTheBox(block,3);
});
}
else if (i==3)
{
$('.'+block).animate({'top' : "+=100px"}, 3000, 'linear', function() {
animateTheBox(block,0);
});
}
}
実際のデモ: http://jsfiddle.net/jfriend00/39SUN/
DRY の精神で、これを行うためのはるかに短い方法を次に示します。
$(document).ready(function(){
animateTheBox('.block1',0);
animateTheBox('.block2',2);
});
function animateTheBox(block,i) {
var anims = [
{left: "-=100px"},
{top: "-=100px"},
{left: "+=100px"},
{top: "+=100px"},
];
$(block).animate(anims[i], 3000, 'linear', function() {
animateTheBox(block,(i+1) % 4);
});
}
于 2013-03-14T23:58:43.960 に答える