向后和向前滚动 jQuery 动画

Question

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

动画是通过使用完成的 jquery .animate() 功能。

我所做的就是更换播放器 div's left 和 top CSS 位置属性。

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

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

2. 我想前后移动 jQuery 滑块 - 以反转动画并在需要时暂停它。考虑到我们正在移动 div 进行动画，而不是逐帧序列动画，这是否可能？

Answer 1

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

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

稍后您可以使用它来检索它

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

ETC。

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

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

Answer 2

我会这样做：

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

   • 起始DivTop = 初始DivTop + (finalDivTop - 初始DivTop) * sliderPosition;
   • 起始DivLeft = 初始DivLeft + (finalDivLeft - 初始DivLeft) * sliderPosition;
   • 起始时间 = 总持续时间 * 滑块位置；

   （或者类似的东西，其中 sliderPosition 是 0 到 1 之间的值）

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

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

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