Question

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

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

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

我想做两件事，不确定如何做到这一点：

我想创建一个jQuery滑块，并在动画发生时以递增方式移动它。我猜我会通过在开始动画之前计算动画的总长度来做到这一点吗？
我想将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

我会这样做：

如果用户点击“播放”，则开始将div从其当前位置设置为目标位置。您可以根据滑块的位置轻松计算剩余时间和div位置：
- startingDivTop = initialDivTop +（finalDivTop - initialDivTop）* sliderPosition;
- startingDivLeft = initialDivLeft +（finalDivLeft - initialDivLeft）* sliderPosition;
- startingTime = totalDuration * sliderPosition;
（或类似的东西，其中sliderPosition介于0和1之间）
如果用户再次单击滑块，则在所有div上调用.stop（）方法：这样他们将停止动画并且您将能够静态设置它们：计算div应该是的位置at并将它们静态移动到那一点。
如果用户“放下”滑块并且仍然激活“播放”，则动画应该从滑块被放下的位置继续前进。

这听起来像是一个很好的项目：）

向后和向前滚动jQuery动画

2 个答案: