Cómo capturar el 3D Touch de los iPhone 6S

Una de las características más llamativas y originales de los nuevos dispositivos de Apple, iPhone 6S y iPhone 6S+, es el 3D Touch, lo que anteriormente se conoció como Force Touch. Consiste en un pulsado de la pantalla más fuerte para abrir nuevos menús de acceso rápido. Es decir, para llamar a este evento se necesita pulsar con mucha más fuerza que el simple toque o clic que hacemos ahora con el dedo. El 3D Touch, como he dicho anteriormente, solamente está disponible para dispositivos Apple por lo que solamente será ejecutado por el navegador Safari. Entonces, ¿cómo tenemos que proceder si en nuestra web queremos que se llame a una acción mediante el evento 3D Touch?

Seguro que muchos de vosotros os estáis dejando la vida por encontrar la API de 3D Touch para acceder a los eventos relacionados en Safari de IOS9. Pues ya no busques más, porque lo acabas de encontrar, no la API oficial, pero si un modo de ejecutar el evento de pulsado con más fuerza. Puedes probar la demo en esta página que te indicará el grado de fuerza con la que estás tocando el sol que aparece en la imagen. Abajo, en la parte inferior de la página hay un indicador que te mostrará la potencia con la que estás apretando la pantalla. Debo repetiros que solamente funciona en dispositivos iPhone 6S, así que absteneros los que no tengáis este smartphone.

Capturar el evento 3D Touch

El código javascript que ejecuta esta acción está disponible publicamente en este enlace, pero nosotros hemos querido compartirlo contigo y te lo ofrecemos unas líneas más abajo. Este es el código que debes utilizar para capturar el evento:

var element = document.getElementById('forceMe');
var forceValueOutput = document.getElementById('forceValue');
var background = document.getElementById('background');
var touch = null;

addForceTouchToElement(element);

function onTouchStart(e) {
  e.preventDefault();
  checkForce(e);
}

function onTouchMove(e) {
  e.preventDefault();
  checkForce(e);
}

function onTouchEnd(e) {
  e.preventDefault();
  touch = null;
}

function checkForce(e) {
  touch = e.touches[0];
  setTimeout(refreshForceValue.bind(touch), 10);
}

function refreshForceValue() {
  var touchEvent = this;
  var forceValue = 0;
  if(touchEvent) {
    forceValue = touchEvent.force || 0;
    setTimeout(refreshForceValue.bind(touch), 10);
  }else{
    forceValue = 0;
  }

  renderElement(forceValue);
}

function renderElement(forceValue) {
  element.style.webkitTransform = 'translateX(-50%) translateY(-50%) scale(' + (1 + forceValue * 1.5) + ')';
  background.style.webkitFilter = 'blur(' + forceValue * 30 + 'px)';
  forceValueOutput.innerHTML = 'Force: ' + forceValue;
}

function addForceTouchToElement(elem) {
  elem.addEventListener('touchstart', onTouchStart, false);
  elem.addEventListener('touchmove', onTouchMove, false);
  elem.addEventListener('touchend', onTouchEnd, false);
}

Con este código seremos capaces de recoger el grado de presión que está ejerciendo el usuario sobre un elemento concreto de nuestra página web. Al igual que hace IOS9, podemos llamar a la acción en este evento a un submenú o a un acceso rápido que, de otro modo, tendríamos que dar muchos más rodeos. Por ejemplo, imaginaos que tenemos una sección de noticias en nuestra web cuyo enlace se encuentra en el menú superior de la web (todo muy típico, ¿verdad?). Pues bien, haciendo clic o pulsando con el dedo sobre el menú de noticias, iremos a la sección que reúne todas las noticias pero, imaginate que, haciendo mucha más presión sobre ese menú, se desplegase una ventana modal en la cual se vieran las 3 últimas noticias para que el usuario no tuviese que navegar más. Estaría genial, ¿verdad? Pues esas son las cosas que puedes desarrollar mediante este nuevo evento.

El éxito de los iPhone 6S

Como todos los iPhone, esta nueva versión mejorada del iPhone 6 ha sido un rotundo éxito. Aparte de este nuevo sensor de presión llamado 3D Touch que abre nuevos atajos y nuevos menús contextuales, mejora la velocidad de procesado de su antecesor, cuenta con una conexión mucho más rápida, un cuerpo mucho más robusto y un mejor equipamiento de cámara. Lo malo es que la batería sigue durando lo mismo y el modelo de salida cuenta solo con 16GB de memoria interna, asi que si estás interesado en él y quieres más espacio, vas a tener que rascarte el bolsillo.

Resumiendo, parece que esta tecnología ha llegado para quedarse y que veremos muchas más funciones relacionadas con este nuevo modo de disfrutar de la tecnología móvil. Por nuestra parte ya te hemos indicado como capturar el evento, ahora está en tu mano el que lo lleves a la prácticas y le des distintos usos originales y distintos y que comiences la revolución de los 3D Touch.

¿Tu crees que esta tecnología se quedará con nosotros para siempre o simplemente es una moda pasajera que no funcionará? Puedes dejarnos tus comentarios en el formulario de más abajo pero, recuerda que para hacerlo debes estar logueado.