2017-02-18 3 views
9

Я пытаюсь установить ползунок (на самом деле кухонный таймер) с помощью pan жеста в ionic2 Престоле: http://ionicframework.com/docs/v2/components/#gesturesстратегии для перевода UX `pan` жест, чтобы установить линейную величину без верхней границы

Ползун/timer имеет открытую верхнюю границу, которая может быть установлена ​​panright, но спуститься до нуля на panleft.

Как я могу лучше всего перевести событие pan, чтобы быть чувствительным к скорости, чтобы верхние границы около 36000, но достаточно чувствительные, чтобы установить приращения до 10? Максимальное значение deltaX будет около 400 пикселей, но я предполагаю, что пользователь может использовать несколько жестов pan, чтобы достичь большого значения.

Есть ли какая-то готовая функция easing, которую я могу использовать для достижения этого?

+0

Вы пытались объединить 'deltaX' и' velocityX' Params данные молотом? Затем вычислите свою трансформацию через [ослабляющую кривую по вашему выбору] (http://gizma.com/easing/) - Что-то вроде ослабления при «панорамировании» и затем ослаблении. – Riron

ответ

0

Просто думать отвлеченно:

Вы можете обнаружить величину между 2 последовательными событиями панорамирования. Если его достаточно мало, то вы можете позволить меньшую детализацию приращения. С другой стороны, если вы решите его достаточно большой, то вы можете позволить увеличить его. Теоретически вы можете постоянно проверять это событие во время календаря (событий), даже динамически влияя на верхнюю границу (хотя не уверены, почему это актуально).

Я не понимаю, почему вам нужно беспокоиться о верхней границе в этом случае. Можете ли вы объяснить, почему?

0

Используя комментарий Рирона, вы можете просто умножить 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)); 
     } 
    } 
Смежные вопросы