翻译 UX“平移”手势以设置没有上限的线性值的策略

Posted 2023-02-19

【中文标题】翻译 UX“平移”手势以设置没有上限的线性值的策略

【英文标题】：Strategy for translating a UX `pan` gesture to set a linear value without an upper bound

【发布时间】：2017-07-08 07:21:39

【问题描述】：

我正在尝试使用ionic2 中的pan 手势设置滑块（实际上是厨房计时器），请参阅：http://ionicframework.com/docs/v2/components/#gestures

滑块/计时器有一个开放的上限，可以通过panright 设置，但在panleft 上下降为零。

如何最好地将pan 事件转换为对速度敏感，以允许接近 36000 的上限，但又足够敏感以将增量设置为小至 10？ deltaX 的最大值约为 400 像素，但我想用户可以使用一些 pan 手势来达到较大的值。

我可以使用一些现成的easing 函数来实现这一点吗？

【问题讨论】：

您是否尝试过组合锤子给出的deltaX 和velocityX 参数？然后通过easing curve of your choice 计算您的转换 - 类似于“平移”时缓入，然后缓出。

【参考方案1】：

只是抽象地思考：

您可以检测 2 个连续平移事件之间的幅度。如果它足够小，那么您可以允许更小的增量粒度。另一方面，如果你决定它足够大，那么你可以允许更大的增量。从理论上讲，您可以在平移事件期间连续执行此检查，甚至动态影响上限（尽管不确定为什么这是相关的）。

我不明白为什么在这种情况下您需要担心上限。你能解释一下为什么吗？

【参考方案2】：

使用 Riron 的注释，您可以将 velocityX 乘以 deltaX。我在一个快速测试中看到速度很容易高于 8 低于 1（例如 0.5）。增量可以是几十或几百，因此它允许两种所需的灵敏度。 这是一个代码：

hammerObj.on("panright panleft",
  function(ev)
      if(ev.type == "panright")
          timer += ev.speedX * ev.deltaX; 
            //timer = Math.min(36000, ev.speedX*ev.deltaX+timer); for an upper bound of 36000 instead of unbound
       else if (ev.type == "panleft")
          timer = Math.max(0, timer - (ev.speedX * ev.deltaX));