来回滚动jQuery动画

Question

我正在制作一个futsal (室内足球)教练应用程序，它允许教练在屏幕上添加球员，设置他们的移动方向(通过使用HTML5画布绘制箭头)，然后按“play”来移动屏幕上的所有球员。播放器由一个带有播放器背景图像的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")

等。

您可以随时使用step选项对动画进行回调，这样就可以相应地更新滑块。

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

Answer 2

我会这样做：

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

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

(或者类似的东西，其中sliderPosition是0到1之间的东西)

如果用户再次单击滑块上的

1. ，则在所有div上调用.stop()方法:这样，它们将停止动画，您将能够静态地设置它们:计算div应处的位置并将其静态移动到该位置。如果用户“删除”滑块并“播放”，则
2. 将继续从滑块被丢弃的点向前移动。

。

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