CSS `Force Touch` / `3D Touch` 事件与 `transform` / `opacity` 深度交互 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位朋友，大家好！我是你们的老朋友，今天咱们来聊聊一个有点酷炫，但又经常被忽视的玩意儿：CSS Force Touch / 3D Touch 事件，以及它和 transform、opacity 这些老伙计的深度交互。

别看这玩意儿名字里带着 Force、3D 这么唬人的词儿，其实它背后的原理并不复杂。简单来说，就是设备能感知你按压屏幕的力度，然后我们就能根据这个力度来做点文章。

一、Force Touch/3D Touch：是谁？从哪儿来？要到哪儿去？

首先，得跟大家承认，Force Touch 和 3D Touch 现在有点“过气”了。Apple 已经在新的设备上逐渐放弃了这种硬件特性。但是，理解它的工作原理，以及如何利用它进行交互设计，仍然很有价值。因为类似的压力感应技术可能会以其他形式回归，而且我们现在仍然能用它来做一些很有意思的实验。

Force Touch (Apple Watch, MacBook): 主要检测你按压的力度是 "点击" 还是 "用力点击"。基本上只有两种状态。
3D Touch (iPhone 6s – iPhone XS Max): 可以检测多个压力等级，提供更精细的交互体验。

那么，在 Web 开发中，我们如何感知这个压力呢？答案是 Touch 事件的扩展。

二、触摸事件的那些事儿：不只是touchstart, touchmove, touchend

在移动 Web 开发中，我们最常用的触摸事件莫过于 touchstart、touchmove、touchend。但要玩转 Force Touch/3D Touch，我们得关注 Touch 对象中的一个属性：force。

Touch.force: 这个属性返回一个 0.0 到 1.0 之间的数值，表示触摸的力度。 0.0 表示没有触摸，1.0 表示最大力度。注意，只有支持 Force Touch/3D Touch 的设备上，这个值才有意义。 在不支持的设备上，通常会返回 0.0 或 1.0 (取决于是否触摸)。

三、实战演练：让元素“听话”地响应压力

咱们直接上代码，看看如何利用 Touch.force 来控制元素的 transform 和 opacity。

1. HTML 结构：

<div id="myElement">Hello, Force Touch!</div>

2. CSS 样式：

#myElement {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  text-align: center;
  line-height: 200px;
  font-size: 20px;
  transition: transform 0.2s ease, opacity 0.2s ease; /* 添加过渡效果 */
}

3. JavaScript 代码：

const element = document.getElementById('myElement');

element.addEventListener('touchstart', (event) => {
  const touch = event.touches[0];
  updateElement(touch.force);
});

element.addEventListener('touchmove', (event) => {
  const touch = event.touches[0];
  updateElement(touch.force);
});

element.addEventListener('touchend', (event) => {
  updateElement(0); // 恢复初始状态
});

function updateElement(force) {
  const scale = 1 + force * 0.5; // 力度越大，缩放越大
  const opacity = 0.5 + force * 0.5; // 力度越大，透明度越高

  element.style.transform = `scale(${scale})`;
  element.style.opacity = opacity;
}

这段代码做了什么呢？

我们监听了元素的 touchstart、touchmove、touchend 事件。
在事件处理函数中，我们获取了 Touch 对象，并从中提取了 force 属性。
updateElement 函数根据 force 的值，动态地改变元素的 transform (缩放) 和 opacity (透明度)。
touchend 事件发生时，我们将 force 设置为 0，让元素恢复到初始状态。
CSS 的 transition 属性让动画效果更平滑。

运行效果： 在支持 Force Touch/3D Touch 的设备上，当你按压元素时，它会随着你的按压力度而放大，并且变得更加不透明。

四、更高级的玩法：分段响应与动画优化

上面的例子只是个入门。我们可以让元素对不同的压力范围做出不同的反应。

1. 分段响应：

function updateElement(force) {
  let scale = 1;
  let opacity = 1;
  let backgroundColor = 'lightblue';

  if (force > 0.2 && force <= 0.5) {
    scale = 1.1;
    opacity = 0.8;
    backgroundColor = 'lightgreen';
  } else if (force > 0.5) {
    scale = 1.2;
    opacity = 0.6;
    backgroundColor = 'yellow';
  }

  element.style.transform = `scale(${scale})`;
  element.style.opacity = opacity;
  element.style.backgroundColor = backgroundColor;
}

在这个例子中，我们根据 force 的值，将元素的行为分成了三个阶段：

force <= 0.2: 初始状态。
0.2 < force <= 0.5: 轻微按压，元素稍微放大，透明度降低，背景色变为浅绿色。
force > 0.5: 大力按压，元素进一步放大，透明度进一步降低，背景色变为黄色。

2. 动画优化：requestAnimationFrame

频繁地改变元素的样式可能会导致性能问题，尤其是在 touchmove 事件中。为了优化动画性能，我们可以使用 requestAnimationFrame。

let animationFrameId = null;

element.addEventListener('touchstart', (event) => {
  const touch = event.touches[0];
  updateElement(touch.force);
  startAnimation(touch.force);
});

element.addEventListener('touchmove', (event) => {
  const touch = event.touches[0];
  startAnimation(touch.force);
});

element.addEventListener('touchend', (event) => {
  cancelAnimationFrame(animationFrameId);
  animationFrameId = null;
  updateElement(0);
});

function startAnimation(force) {
  if (animationFrameId) {
    cancelAnimationFrame(animationFrameId);
  }

  animationFrameId = requestAnimationFrame(() => {
    updateElement(force);
  });
}

function updateElement(force) {
  const scale = 1 + force * 0.5;
  const opacity = 0.5 + force * 0.5;

  element.style.transform = `scale(${scale})`;
  element.style.opacity = opacity;
}

requestAnimationFrame 告诉浏览器，我们想要执行一个动画，并请求浏览器在下一次重绘之前调用指定的回调函数。这样可以确保动画与浏览器的刷新频率同步，从而获得更流畅的体验。

五、兼容性问题与解决方案

Force Touch/3D Touch 的兼容性是绕不开的话题。

设备支持： 只有部分设备支持 Force Touch/3D Touch。
浏览器支持： 现代浏览器都支持 Touch 事件，但对 Touch.force 的支持可能不一致。

为了解决这些问题，我们需要进行特性检测和优雅降级。

1. 特性检测：

function isForceTouchSupported() {
  return 'force' in Touch.prototype;
}

if (isForceTouchSupported()) {
  // 支持 Force Touch/3D Touch
  console.log('Force Touch is supported!');
} else {
  // 不支持 Force Touch/3D Touch
  console.log('Force Touch is not supported.');
}

2. 优雅降级：

如果设备不支持 Force Touch/3D Touch，我们可以提供其他的交互方式，例如：

长按： 可以用长按事件来模拟 "用力点击" 的效果。
滑动： 可以用滑动距离来模拟按压力度。

六、一些有趣的应用场景

虽然 Force Touch/3D Touch 的应用范围有限，但它仍然可以用来实现一些很有意思的交互效果。

快速预览： 在列表项上用力按压，可以快速预览详细内容，而不需要跳转到新的页面。
压力感应绘画： 可以根据按压力度来控制画笔的粗细和颜色。
游戏控制： 可以用按压力度来控制游戏角色的移动速度或攻击力度。
音量控制： 可以用按压力度来调节音量大小。

七、总结与展望

Force Touch/3D Touch 是一种很有潜力的交互方式，虽然现在已经逐渐淡出人们的视野，但它所代表的压力感应技术，仍然有很大的发展空间。

希望通过今天的讲解，大家对 Force Touch/3D Touch 事件，以及它与 transform、opacity 的交互有了更深入的了解。即使未来 Force Touch/3D Touch 不再流行，我们今天学到的知识，仍然可以应用于其他的交互设计中。

最后，给大家留个思考题：如何用 Force Touch/3D Touch 实现一个更逼真的 "按下" 效果？提示：可以结合 box-shadow 和 transform 来模拟。

今天的分享就到这里，谢谢大家！期待下次与大家继续交流！

属性/方法	描述
`Touch.force`	返回一个介于 `0.0` (无压力) 和 `1.0` (最大压力) 之间的数值，表示触摸的力度。
`touchstart`	当手指触摸屏幕时触发。
`touchmove`	当手指在屏幕上移动时触发。
`touchend`	当手指离开屏幕时触发。
`transform`	CSS 属性，用于旋转、缩放、倾斜或平移元素。
`opacity`	CSS 属性，用于设置元素的透明度。
`transition`	CSS 属性，用于指定 CSS 属性变化的过渡效果。
`requestAnimationFrame`	浏览器 API，用于告诉浏览器，我们想要执行一个动画，并请求浏览器在下一次重绘之前调用指定的回调函数。
`cancelAnimationFrame`	浏览器 API，用于取消之前通过 `requestAnimationFrame` 安排的动画帧请求。
特性检测	通过检测浏览器或设备是否支持某个特性，来决定如何执行代码。
优雅降级	在不支持某个特性的情况下，提供其他的交互方式，保证用户体验。

发表回复 取消回复

发表回复取消回复