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

Posted

技术标签:

【中文标题】翻译 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 函数来实现这一点吗?

【问题讨论】:

您是否尝试过组合锤子给出的deltaXvelocityX 参数?然后通过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));
      
    

【讨论】:

以上是关于翻译 UX“平移”手势以设置没有上限的线性值的策略的主要内容,如果未能解决你的问题,请参考以下文章

当翻译显示在标签中时,查看平移手势停止 - Xcode

UICollectionView 中的长按和平移手势

在 iOS7 上的应该开始和处理程序(状态开始)之间重置平移手势翻译

将平移手势限制为设置帧

斯威夫特:如何设置最大/最小平移手势?

旋转后平移手势行为不正确