你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
weifengsn

3D Touch在web端的应用 0个回复 专栏 @ Javascript

weifengsn 发布于 1 年前

前言

原本以为3D touch是原生app的东西,没想到在web中也可以使用。 Force Touch API,其中的force属性目前已经添加到Touch Events v2 draft spec, github上已经有人实现了对3D touch的实现。接下来看看是怎么实现的:

Force Touch API

这次主要涉及以下两个:

  1. force属性被新添加到事件属性中,取值范围为0-1,0为没有,而1为最大压力(注意在trackpad上的最大值为3)。
  2. 新增四个新DOM事件:
    - (webkit)mouseforcewillbegin
    - mouseforcedown
    - mouseforceup
    - mouseforcechange

github上的例子

主要是通过检测force的值来判定3D touch的程度。 演示地址
点击图中的太阳来看效果。请在支持3D touch的设备上查看。
附上javascript代码:

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 checkMacForce(e) {
  // max value for trackpad is 3.0 compare to 1.0 on iOS
  renderElement(e.webkitForce/3);
}

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.toFixed(4);
}

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

相关链接

等待第一条回复
登录后回复,如无账号,请使用邀请码注册