一段代码让网页实现3D Touch效果

9 月 14 日凌晨,iOS 10 正式版开始向用户推送更新,而 iOS 10 搭载的 Safari 10 亦带来了不少新特性,其中就有 3D Touch 事件的支持。那么什么是3D Touch以及如何让网页实现3D Touch的效果呢?

什么是3D Touch?

说到 3D Touch 不能不提与之相似的 Force Touch。Force Touch是苹果公司在 2014 年 9 月公布的一项压力敏感屏幕技术,最早用于 Apple Watch ,可识别轻点、轻按两种操作。随后 Force Touch 于 2015 年 9 月在 iPhone 6s 上得到改进并更名为 3D Touch,提供了更高灵敏度的触控力度识别、及更强的触感反馈,支持轻点、轻按及重按三个维度。

20160930001

如何让网页实现3D Touch效果?

要在网页中实现 3D Touch,需要用到以下两个知识点:

1、Touch.force:在 touch 对象中包含有一个名为 force 的只读属性,它的取值从 0 到 1,表示的是触碰点的按压力度,0 表示没有检测到压力,而 1 则是设备能识别出的最大压力。

2、touchforcechange :touchforcechange 是 Safari 10 新增的事件,该事件会在按压力度改变时被触发。(注:在 MacOS Safari 上也有与之对应的 webkitmouseforcechanged 事件,该事件会在支持 Force Touch 的 Trackpad 上反应出按压力度值 force 的变化,但本文仅讨论手机设备的情况)

要实现 3D Touch 效果,关键在于实时地获取 Touch.force 的值。而由于网页上的 3D Touch 很大程度上受限于设备及浏览器的支持情况,因此我们划分以下 3 种情况:①支持3D touch且升级到IOS10的设备;②支持3D Touch版本低于IOS10;③不支持3D Touch的设备。

对于第一种情况,只需要监听 touchforcechange 事件即可获取到 force 的当前值,将 force 值的变化以适当的形式反馈在界面上以实现 3D Touch 效果。对于第二种情况虽然无法监听 touchforcechange 事件,但 Touch 对象的 force 属性仍然可以反应出正确的按压力度,可以巧妙地设置一个定时器,以轮询的方式获取 force 的当前值。对于第三种情况通过检测按压的时间判断出是否长按,来代替3D Touch,我们这里不去讨论长按了。

下面我们看一个案例:

大家可以扫描二维码,用safari浏览器来体验一下,切记不要用微信,因为微信的WEBDev暂不支持。

20160930002

而树懒兄大笑的动画则用的是以下这张雪碧图,根据当前 Touch.force 值来设置 background-position 以显示对应的动画帧来实现的。

1 2

未经允许不得转载:波波助手 » 一段代码让网页实现3D Touch效果

赞 (0)

牛人热评 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址