如何在过渡时获得平移偏移量
How to get translation offset while transitioning
我有一个与图像滑块非常相似的容器，专为水平 touch/mouse 拖动而设计，可在幻灯片之间移动。为了美观，应用了缓动功能，以便在释放时滑入每张幻灯片的中心位置。移动方式为"transform: translateX()".
我目前遇到的问题是，如果用户松开，然后触摸并在它已经在运动时再次移动它，它会在过渡结束时跳转到幻灯片。因此，例如：如果您在幻灯片 1 中，当它处于幻灯片 2 的区域时移动它并释放，然后在它仍在移动时尝试再次移动，它会立即跳转到幻灯片 2，然后从那里移动到我手指所到之处。
我主要寻找的是一种在平移动画 运行 时获得中间过渡距离的方法。有什么方法可以衡量元素实际处于过渡中间的位置吗？如果没有，这种情况有什么解决办法？
编辑：
我找到了我的问题的根本原因，尽管它并没有改变问题的重点。为了更广泛地解释正在发生的事情，我将把它包括在这里。
默认的过渡持续时间设置为 300 毫秒。当用户通过鼠标或触摸拖动内容时，它被设置为 0 毫秒，这样它就不会滞后于用户的动作。释放时，它将设置回 300 毫秒。如果它在运动中再次被抓住，它会在持续时间设置为 0 毫秒时占据它正在过渡到的位置并捕捉到那里。这比允许它在再次拖动时继续流向那里的替代方案要好，因为内容会在拖动点下方滑动。
根据对问题 post 的评论，我认为这意味着我第一个问题的答案是：不，您不能在翻译过程中直接获取中间值。
关于第二个问题，评论中提到阻止 activity 直到动画完成的选项。虽然这可行，但我觉得它也会降低用户体验，所以我决定尝试一些不同的东西。作为解决方法，我的解决方案似乎非常有效，因此我决定回答我自己的问题，并 post 在这里为其他人解答。我还更详细地编辑了问题。
我最后做的是使用定时器来预测中间值的位置，这样如果被打断，它似乎会以正确的方式无缝停止中间转换地方。
这样做需要一点数学知识，精确的公式取决于所采用的缓动类型。 "Linear" 缓动是最容易预测的，但其他的则只需一点点三角函数就可以实现。我使用了 "ease-out"，所以我将在下面的伪代码中包含我的解决方案：
startX + (finishX - startX) * sin((now - startTime) / transitionDuration * PI / 2)
startX 是释放滑块时的位置（过渡开始）。finishX 是滑块移动的位置（过渡结束）。now 是以毫秒为单位的当前时间。startTime 是滑块释放时（过渡开始）的时间。transitionDuration 是完成转换所需的时间（以毫秒为单位）。
总而言之，以上内容允许您在过渡期间预测元素的位置。虽然是专门为 "ease-out" 编写的，但适应其他基本曲线应该是微不足道的。
我有一个与图像滑块非常相似的容器，专为水平 touch/mouse 拖动而设计，可在幻灯片之间移动。为了美观，应用了缓动功能，以便在释放时滑入每张幻灯片的中心位置。移动方式为"transform: translateX()".
我目前遇到的问题是，如果用户松开，然后触摸并在它已经在运动时再次移动它，它会在过渡结束时跳转到幻灯片。因此，例如：如果您在幻灯片 1 中，当它处于幻灯片 2 的区域时移动它并释放，然后在它仍在移动时尝试再次移动，它会立即跳转到幻灯片 2，然后从那里移动到我手指所到之处。
我主要寻找的是一种在平移动画 运行 时获得中间过渡距离的方法。有什么方法可以衡量元素实际处于过渡中间的位置吗？如果没有，这种情况有什么解决办法？
编辑： 我找到了我的问题的根本原因，尽管它并没有改变问题的重点。为了更广泛地解释正在发生的事情，我将把它包括在这里。
默认的过渡持续时间设置为 300 毫秒。当用户通过鼠标或触摸拖动内容时，它被设置为 0 毫秒，这样它就不会滞后于用户的动作。释放时，它将设置回 300 毫秒。如果它在运动中再次被抓住，它会在持续时间设置为 0 毫秒时占据它正在过渡到的位置并捕捉到那里。这比允许它在再次拖动时继续流向那里的替代方案要好，因为内容会在拖动点下方滑动。
根据对问题 post 的评论，我认为这意味着我第一个问题的答案是：不，您不能在翻译过程中直接获取中间值。
关于第二个问题，评论中提到阻止 activity 直到动画完成的选项。虽然这可行，但我觉得它也会降低用户体验，所以我决定尝试一些不同的东西。作为解决方法，我的解决方案似乎非常有效，因此我决定回答我自己的问题，并 post 在这里为其他人解答。我还更详细地编辑了问题。
我最后做的是使用定时器来预测中间值的位置，这样如果被打断，它似乎会以正确的方式无缝停止中间转换地方。
这样做需要一点数学知识，精确的公式取决于所采用的缓动类型。 "Linear" 缓动是最容易预测的，但其他的则只需一点点三角函数就可以实现。我使用了 "ease-out"，所以我将在下面的伪代码中包含我的解决方案：
startX + (finishX - startX) * sin((now - startTime) / transitionDuration * PI / 2)
startX是释放滑块时的位置（过渡开始）。finishX是滑块移动的位置（过渡结束）。now是以毫秒为单位的当前时间。startTime是滑块释放时（过渡开始）的时间。transitionDuration是完成转换所需的时间（以毫秒为单位）。
总而言之，以上内容允许您在过渡期间预测元素的位置。虽然是专门为 "ease-out" 编写的，但适应其他基本曲线应该是微不足道的。