5

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

动画是通过使用jquery .animate()函数来完成的。

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

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

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

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

4

2 回答 2

3

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

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
})
于 2009-03-22T02:45:54.213 回答
0

我会这样做：

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

    • startDivTop = initialDivTop + (finalDivTop - initialDivTop) * sliderPosition;
    • startDivLeft = initialDivLeft + (finalDivLeft - initialDivLeft) * sliderPosition;
    • 开始时间 = 总持续时间 * 滑块位置；

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

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

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

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

于 2009-03-20T10:46:41.500 回答