向后和向前滚动jQuery动画

我正在制作一个五人制足球（室内足球）教练应用程序，允许教练在屏幕上添加玩家，设置他们的移动方向（通过使用HTML5canvas绘制箭头），然后按“播放”移动屏幕上的所有玩家。 玩家由具有玩家背景图像的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") 

等等

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

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

Answer 2

我会这样做：

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

   • startingDivTop = initialDivTop +（finalDivTop – initialDivTop）* sliderPosition;
   • startingDivLeft = initialDivLeft +（finalDivLeft – initialDivLeft）* sliderPosition;
   • startingTime = totalDuration * sliderPosition;

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

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

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

这听起来像你正在做的一个很好的项目:)