想象一下，我有一个具有已定义宽度和高度的视口。我在右侧克隆了一个视图之外的元素，然后在一个随机y位置的视口中将其拖动，代码如下：
...
.css({
'left': BASE_NODE_INIT_LEFT_PX,
'top' : rand(BASE_NODE_INIT_TOP_MIN_PX, BASE_NODE_INIT_TOP_MAX_PX) + 'px',
'width': _width + 'px',
'height': _height + 'px',
})
.animate({
left: BASE_NODE_ANIMATE_DISTANCE_X_PX
}
...
足够简单的动画。这是有趣的部分：在每一步我想对这个元素应用一些物理。
这样的事情：
...
step:function(currentStep){
if($(this).data('animating-wind') !== true)
{
$(this).data('animating-wind',true);
var wind = (rand(1,2) == 2) ? '+=' + rand(1, 100) + 'px' : '-=' + rand(1, 100) + 'px';
$(this).animate({
'top': wind,
'text-indent': wind,
},{
duration: 500,
complete: function(){
$(this).data('animating-wind',false);
},
queue: false
});
}
}
...
基本上发生的事情不是从右到左直线飞行，而是随着我的意图减速，加速，随机升起和下降。
我面临的问题是，有时“风”足够强，以便当步数达到总计算步数时，元素在视口中仍然可见，并且它将消失（发生在我的complete:function(){ ...$(this).remove(); ...}
显然正在发生的事情是JQuery认为动画是完整的，因为它计算了这些步骤，并且说“我在这很多步骤中通过这么多毫秒的时间动画这个对象很多像素 - 就在那里”。但是风动画在动画队列之外是 ，所以这个动画过程是非常明智的。
我想要的是开始动画并保持动画直到元素从任何方向退出视口 - 一旦它不再可见，无论是从其初始飞行路径还是从风吹出屏幕，我将检测到它并触发onComplete回调。我唯一能想到的就是将这个动画放在一个函数中，并在complete:function(){}中对它自己进行递归调用，然后在step:function(){}里面我将“在视口中看到”检查如果stop(true,false)，请致电true。这似乎是一个非常昂贵的检查 - 在400-1200ms运行计算100次以上可能会使动画波动，所以我正在寻找更优雅的解决方案。
TL; DR： 如果由于其上设置了额外的动画，如果它还没有到达目的地，我该如何保持动画？
更新：我已应用@mu is too short's idea并提出了以下建议：
/**
* Create a new clone of the master div for user interaction. Position it
* randomly off the canvas, and animate it across at a random speed.
*/
function spawn_target() {
spawn_timeout = setTimeout(function() {
var bonus = (rand(1, BONUS_ODDS) == BONUS_ODDS) ? ' ' + BONUS_CLASS : '';
var _img_src = (bonus.length > 0) ? BONUS_NODE_IMG_SRC : BASE_NODE_IMG_SRC;
var _width = $('#' + BASE_NODE_ID).width();
_width = Math.floor(rand(_width / 3, _width));
var _height = _width;
var _framerate = 10 - Math.floor(_height/10);
var _clone = $('#' + BASE_NODE_ID).clone().addClass(CLONE_CLASS + bonus).attr('id', CLONE_ID).appendTo('#' + CANVAS_ID).css({
'left': BASE_NODE_INIT_LEFT_PX,
'top': rand(BASE_NODE_INIT_TOP_MIN_PX, BASE_NODE_INIT_TOP_MAX_PX) + 'px',
'width': _width + 'px',
'height': _height + 'px',
})
$(_clone).children('img').attr('src', _img_src);
/**
* Handle the actual flight across the viewport
* @param object _this The clone we are animating manually
* @return object pointer This contains the interval so we can clear it later
*/
function fly(_this) {
var animating_wind = false;
var pointer = {
timer_id: null
};
pointer.timer_id = setInterval(function() {
// Get rid of the node if it is no longer visible in the viewport
if (!$(_this).is(':onviewport')) {
clearInterval(pointer.timer_id);
$(_this).remove();
adj_game_data(GAME_DATA_LIVES_ID, -1);
check_lives();
spawn_target();
}
// Move node along with slight realism
var distance = rand(FLY_DISTANCE_MIN, FLY_DISTANCE_MAX);
$(_this).css('left', '-=' + distance + 'px');
// Only trigger the wind animation when it is idle
if (animating_wind !== true) {
animating_wind = true;
// Setup the wind physics
var _wind_power = rand(WIND_POWER_MIN, WIND_POWER_MAX);
var _wind_dir = (rand(1, 2) == 2) ? '+=' : '-=';
// Override wind direction to keep node inside viewport
if(($(_this).offset().top + $(_this).height() + _wind_power) > CANVAS_HEIGHT)
{
_wind_dir = '-=';
}
if(($(_this).offset().top - _wind_power) < CANVAS_TOP_BUFFER_PX)
{
_wind_dir = '+=';
}
var _wind = _wind_dir + _wind_power + 'px';
// Apply the wind physics and don't let the node break the top or bottom
// boundaries of the viewport
$(_this).animate({
'top': _wind
}, {
duration: WIND_ANIMATION_DURATION,
complete: function() {
animating_wind = false;
},
queue: false
});
}
}, _framerate);
return pointer;
}
$(_clone).data('interval', fly(_clone));
}, rand(SPAWN_TARGET_TIMEOUT_MIN, SPAWN_TARGET_TIMEOUT_MAX));
}
以下是我到目前为止的内容：http://jsfiddle.net/AlienWebguy/DmtQ7/embedded/result/
我喜欢这个想法虽然看起来JQuery应该有内置的东西，这是我所希望的。现在，我必须$(obj).stop()而不是clearInterval($(obj).data('interval').timer_id);。 *划伤头......
答案 0 :(得分：1)
这是我认为你应该做的（伪JavaScript）：
function animate_it($thing) {
var wind = false;
var timer_id = setInterval(function() {
// Compute the movement for this step.
// Then factor in the wind effect and update the `wind` variable.
// Then apply the movement to `$thing`.
if(it_is_off_the_page($thing))
clearInterval(timer_id);
}, n);
}
如果内部计算中有任何反复计算的内容，请在animate_it级别对其进行预计算，然后让闭包关闭它。你可能想稍微玩一下来弄清n应该是什么。
只需手动制作动画，这样就不会与jQuery的animate功能作斗争，并在知道完成后停止动画。这也允许你包括风的方向和强度（以便你的动画对象可以倒退）几乎是免费的。
你可能想让timer_id回到外面的世界，这样你就可以从外面阻止整个事情了。在这种情况下，你想要伪造一个带有一个元素对象的指针：
function animate_it($thing) {
var wind = false;
var pointer = { timer_id: null };
pointer.timer_id = setInterval(function() {
// Compute the movement for this step.
// Then factor in the wind effect and update the `wind` variable.
// Then apply the movement to `$thing`.
if(it_is_off_the_page($thing)) {
clearInterval(pointer.timer_id);
pointer.timer_id = null;
}
}, n);
return pointer;
}
var timer = animate_it($thing);
// And then later, to shut it down...
if(timer.timer_id)
clearInterval(timer.timer_id);
如果您有很多动画对象，那么您可能希望animate_it上的“已消失”回调，这样可以让您的外部计时器列表保持干净无瑕。
尝试使用animate执行此操作的问题是animate计算开头的步数，然后您可以更改它。你需要一些可变数量的步骤，但animate并不关心（它比蜂蜜獾还要少）。