algorithm - Estrategia para traducir un gesto UX `pan` para establecer un valor lineal sin un límite superior

angular ionic2

Question

Estoy tratando de establecer un control deslizante (en realidad, un temporizador de cocina) con un gesto de pan en ionic2 ver: http://ionicframework.com/docs/v2/components/#gestures

El control deslizante / temporizador tiene un límite superior abierto que podría ser establecido por un panright , pero descender a cero en un panleft .

¿Cómo puedo traducir mejor el evento pan para que sea sensible a la velocidad para permitir un límite superior cercano a 36000 pero lo suficientemente sensible como para establecer incrementos tan pequeños como 10? El máximo deltaX sería de alrededor de 400px, pero supongo que el usuario podría usar algunos gestos de pan para alcanzar un gran valor.

¿Hay alguna función easing lista para usar que pueda usar para lograr esto?

Answer 1

Solo pensando abstractamente:

Puede detectar la magnitud entre 2 eventos de panoramización consecutivos. Si es lo suficientemente pequeño, entonces puede permitir la granularidad de incremento más pequeña. Por otro lado, si decides que es lo suficientemente grande, entonces puedes permitir incrementos más grandes. En teoría, puede hacer esta comprobación de forma continua durante el (los) evento (s) panorámico (s), incluso afectando dinámicamente al límite superior (aunque no está seguro de por qué esto es relevante).

No veo por qué tiene que preocuparse por el límite superior en este caso. ¿Puedes explicar porque?

Answer 2

Usando el comentario de Riron, puedes simplemente multiplicar la velocityX por el deltaX . Vi en una prueba rápida que la velocidad puede ser más alta que 8 y menor que 1 (0.5 por ejemplo). El delta puede estar en decenas o en cientos, por lo que permite las dos sensibilidades requeridas. Aquí hay un código para eso:

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));
      }
    }