翻译 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
函数来实现这一点吗?
【问题讨论】:
您是否尝试过组合锤子给出的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));
【讨论】:
以上是关于翻译 UX“平移”手势以设置没有上限的线性值的策略的主要内容,如果未能解决你的问题,请参考以下文章