前后滚动 jQuery 动画

Posted 2023-05-08

【中文标题】前后滚动 jQuery 动画

【英文标题】：Scrolling a jQuery animation backwards and forwards

【发布时间】：2010-10-14 11:20:30

【问题描述】：

我正在制作一个五人制足球（室内足球）教练应用程序，它允许教练在屏幕上添加球员，设置他们的移动方向（通过使用 html5 画布绘制箭头），然后按“播放”以移动所有球员屏幕。播放器由带有播放器背景图像的 div 组成。

动画正在使用jquery .animate() 函数完成。

我所做的只是更改播放器 div's left 和 top css 位置属性。

我想做两件事，但不确定如何做：

我想创建一个 jQuery 滑块，并在动画发生时逐步移动它。我猜我会通过在开始之前计算动画的总长度来做到这一点？

我想来回移动上面的 jQuery 滑块 - 以反转动画并在需要时暂停它。考虑到我们正在为动画移动 div，而不是进行逐帧序列动画，这有可能吗？

【问题讨论】：

这个应用怎么样了？我认为同样的技术可以用来创建一个简单的舞台拦截应用。

【参考方案1】：

在动画开始之前，保存开始位置怎么样？

startpostion = $(playerdiv).position(); //Or offset, I keep forgetting which
$(playerdiv).data("startTop",startposition.top);
$(playerdiv).data("startLeft",startposition.left);

稍后您可以使用检索它

left = $(playerdiv).data("startTop")

等等

您始终可以使用 step 选项为动画提供回调，这样您就可以相应地更新滑块。

$(playerdiv).animate( 
    top : targetTop,
    left : targetLeft, 
    step, function() magic happens here
)

【参考方案2】：

我会这样做：

如果用户点击“播放”，则开始将 div 从其当前位置动画化到目的地。您可以根据滑块的位置轻松计算剩余时间和 div 位置：

startingDivTop = initialDivTop + (finalDivTop - initialDivTop) * sliderPosition; startingDivLeft = initialDivLeft + (finalDivLeft - initialDivLeft) * sliderPosition; startingTime = totalDuration * sliderPosition；

（或类似的东西，sliderPosition 介于 0 和 1 之间）

如果用户再次单击滑块，则在所有 div 上调用 .stop() 方法：这样它们将停止动画并且您将能够静态设置它们：计算 div 应位于的位置at 并将它们静态移动到该点。

如果用户“放下”滑块并且“播放”仍处于激活状态，则动画应从滑块被放下的点继续向前。

听起来你正在做一个不错的项目:)