javascript - 如何在过渡时获得平移偏移量

Question

我有一个与图像 slider 非常相似的容器，设计用于水平触摸/鼠标拖动以在幻灯片之间移动。为了美观，应用了缓动功能，以便在释放时滑入每张幻灯片的中心位置。移动的方法是“transform:translateX()”。

我目前遇到的问题是，如果用户松开，然后触摸并在它已经处于运动状态时再次移动它，它会在过渡结束时跳转到幻灯片。因此，例如:如果您在幻灯片 1 中，当它处于幻灯片 2 的区域时移动它并释放，然后在它仍在移动时尝试再次移动，它会立即跳转到幻灯片 2，然后从那里移动到我移动手指的任何地方。

我主要寻找的是一种在平移动画运行时获取中间过渡距离的方法。有什么方法可以衡量元素实际处于过渡中间的位置吗？如果不是，针对这种情况有哪些解决方案？

编辑:我找到了我的问题的根本原因，尽管它并没有改变问题的重点。为了对发生的事情进行更广泛的解释，我将其包含在此处。

默认的过渡持续时间设置为 300 毫秒。当用户通过鼠标或触摸拖动内容时，它被设置为 0 毫秒，这样它就不会滞后于用户的 Action 。释放时，它将设置回 300 毫秒。如果它在运动中再次被捕获，它会在持续时间设置为 0 毫秒时占据它正在过渡到的位置并捕捉到那里。这比允许它在再次拖动时继续流向那里的替代方案要好，因为内容会在拖动点下方滑动。

Answer 1

根据问题帖的评论，我认为这意味着我的第一个问题的答案是:不，您不能在翻译过程中直接获取中间值。

关于第二个问题，评论提到了在动画完成之前阻止事件的选项。虽然这可行，但我觉得它也会降低用户体验，所以我决定尝试一些不同的东西。作为解决方法，我的解决方案似乎非常有效，因此我决定回答我自己的问题并将其张贴在这里供其他人使用。我还更详细地编辑了问题。

我最终做的是使用计时器预测中间值的位置，这样如果被打断，它似乎会在正确的位置无缝地停止中间转换。

这样做需要一些数学知识，精确的公式取决于所采用的缓动类型。 “线性”缓动是最容易预测的，但其他的缓动通过一点点三 Angular 函数就可以实现。我使用了“缓出”，所以我将在下面的伪代码中包含我的解决方案:

startX + (finishX - startX) * sin((now - startTime)/transitionDuration * PI/2)


• startX 是 slider 在释放时所在的位置(过渡开始)。
• finishX 是 slider 移动的位置(过渡结束)。
• now 是以毫秒为单位的当前时间。
• startTime 是 slider 释放时的时间(过渡开始)。
• transitionDuration 是完成转换所需的时间(以毫秒为单位)。

总而言之，以上内容允许您在过渡期间预测元素的位置。虽然专门为“缓出”而编写，但使其适应其他基本曲线应该是微不足道的。