我有一个与图像滑块非常相似的容器，设计用于水平触摸/鼠标拖动以在幻灯片之间移动 . 为了美观，应用缓动功能，使其在释放时滑动到每个滑块的中心位置 . 移动方法是“transform：translateX（）” .
我目前遇到的问题是，如果用户释放，然后触摸并在它已经运动时再次移动它，它将在它转换结束时跳转到幻灯片 . 例如：如果你在幻灯片1中，移动它并在幻灯片2的区域中释放，然后在它仍然处于运动状态时尝试再次移动，它将立即跳转到幻灯片2，然后从那里移动到我移动手指的地方
我实际上寻找的是一种在翻译动画运行时获得中间过渡距离的方法 . 有没有办法测量元素在转换过程中的实际位置？如果没有，这种情况有哪些解决方案？
编辑：我找到了我的问题的根本原因，虽然它没有改变问题的焦点 . 为了更广泛地解释发生了什么，我将在此处加入 .
默认转换持续时间设置为300毫秒 . 当用户通过鼠标或触摸拖动内容时，将其设置为0ms，以便它不会落后于用户的移动 . 发布后，它将被设置回300毫秒 . 如果它在运动时再次被 grab ，它将转移到它的位置，并在持续时间设置为0ms时捕捉它 . 这比允许它在再次拖动时继续在那里流动的替代方案更好，因为内容将在拖动点下滑动 .
1 回答
根据问题帖子的评论，我认为这意味着我的第一个问题的答案是：不，你不能在翻译过程中直接获得中间值 .
至于第二个问题，评论提到了在动画完成之前阻止活动的选项 . 虽然这可行，但我觉得它也会减少用户体验，所以我决定尝试一些不同的东西 . 我的解决方案似乎很适合作为一种解决方法，因此我决定回答我自己的问题并在此处发布给其他人 . 我还更详细地编辑了这个问题 .
我最终做的是使用计时器来预测中间值的位置，这样如果被中断，它就会在正确的位置无缝地停止中间过渡 .
这样做需要一些数学，精确的公式取决于采用何种缓和方式 . “线性”缓和是最容易预测的，但其他一些是非常可行的一点点三角函数 . 我使用了“缓出”，所以我将在下面的伪代码中包含我的解决方案：
startX + (finishX - startX) * sin((now - startTime) / transitionDuration * PI / 2)startX是滑块在释放时的位置（转换开始） .finishX是滑块移动的位置（过渡结束） .now是当前时间（以毫秒为单位） .startTime是滑块释放时的时间（转换开始） .transitionDuration是转换完成的时间（以毫秒为单位） .总之，上面允许您预测过渡期间元素的位置 . 虽然专门为“缓出”而写，但要使其适应其他基本曲线应该是微不足道的 .