Implement 3D Touch effect on web page

We can’t talk about 3D Touch without mentioning the similar Force Touch. Force Touch is a pressure-sensitive screen technology announced by Apple in September 2014. It was first used in the Apple Watch and can recognize tap and tap. Subsequently, Force Touch was improved and renamed 3D Touch in iPhone 6S in September 2015, providing higher sensitivity of Touch Force recognition and stronger Touch feedback, supporting three dimensions of tap, tap and heavy press.

3D Touch is available on the iPhone 6s, iPhone 6S Plus, iPhone 7 and iPhone 7 Plus.

The most typical 3D Touch interactions are Quick Actions and Peek and Pop. Pressing again on the APP icon brings up a set of shortcut menus, which are typically Quick Actions:

With Peek and Pop, you can quickly preview your content and do more:

As shown in the above image, pressing hard on an item in the email APP triggers Peek to pop up a preview window. (Sliding up in Peek also triggers Quick Actions to bring up some Quick Actions.) A Pop is triggered to enter the email content interface. This process is called Peek and Pop.

In addition to email APP, Peek and Pop 3D Touch interaction form is well supported by many system apps such as messages and photos as well as some third-party apps (such as wechat, Facebook and Twitter).

To implement 3D Touch on a web page, you need to know two things:

1. Touch the force

The Touch object contains a read-only property called Force, which ranges from 0 to 1, indicating how hard the touch is pressed, 0 indicating that no pressure is detected, and 1 indicating the maximum pressure the device can recognize

2, touchforcechange

Touchforcechange is a new event in Safari 10 that will be triggered when the pressure changes

(Note: There is a corresponding WebKitMouseForcechanged event on MacOS Safari that will reflect a change in the value Force on a Force Touch enabled Trackpad, but this article is only for mobile devices.)

The key to 3D Touch is to get the value of touch.force in real time. Since 3D Touch on the web is largely limited by device and browser support, we have divided the following three scenarios to see how to implement it

1. Devices that support 3D Touch and are upgraded to iOS 10

In this optimal case, only need to listen on the TouchForcechange event to obtain the current value of force, force value changes in the appropriate form of feedback on the interface to achieve 3D Touch effect.

2. Devices that support 3D Touch but are later than iOS 10

In this case, although the touchForcechange event cannot be listened to, the force attribute of the Touch object can still reflect the correct pressure. You can subtly set a timer to obtain the current value of force in a polling way

3. Devices that don’t support 3D Touch

In this case, the touch. force value is always 0. Although the long-press interaction can be used instead, it is recommended to gracefully degrade and not handle it at all

This is where you want to say “Shut up and show me the code…” Ok, let’s take a look at an example. In this example page, you can make the sloth laugh by pressing the blue button on a 3D Touch device

You can scan the above QR code, or poke me for a preview, note that please use iOS Safari browser to access! Use iOS Safari!! Use iOS Safari!! 3. Say important things three times. Because the current wechat WebView does not support 3D Touch.

The implementation idea is actually quite simple, according to the knowledge just said, we respectively listen to the TouchForcechange, TouchStart, TouchEnd, TouchCancel events

• In the TouchStart event, a timer is started to poll for the value of touch.force;
• Get the current touch. force value in the TouchForcechange event and clear the timer set in the TouchStart event, since polling is not necessary if the TouchForcechange event is supported;
• Reset touch.force to 0 on the TouchEnd and TouchCancel events and clear the timer.

The sloth laughing animation uses the following Sprite image, and sets background-position to display the corresponding animation frame based on the current touch. force value

You can visit the Github project to see the source code. The core code is located in threedTouch.js, which encapsulates a class called ThreeDTouch. When instantiated, you pass in a DOM object to retrieve the value of the pinch in the callback.

/** * 3D Touch event handler, pass in the DOM object to listen to, Get the current force value in the callback * * @param {HTMLElement} el - the DOM object to listen on * @param {Function} callback - the callback Function with the force value * */ function ThreeDTouch(el, Callback) {this.el = el this.callback = callback this._bindevents ()} ThreeDTouch. Prototype = {// Bind related touch events _bindEvents: function() { var events = ['touchforcechange', 'touchstart', 'touchend', 'touchcancel'] events.forEach(function(event) { this.el.addEventListener(event, this, false) }.bind(this)) }, HandleEvent: function(ev) {switch (ev.type) {case 'touchForcechange ': this._touchForceDidChange(ev) break case 'touchstart': this._touchDidStart(ev) break case 'touchend': Case 'touchForceDidChange ': this._touchDidend (ev)}}, // Force value changed _touchForceDidChange: Function (ev) {var force = ev.touches[0]. Callbacks (force) clearTimeout(this.timeoutid) }, _touchDidStart: function(ev) {var touch = ev.touches[0] this._touchForce (touch)}, _touchDidEnd: Function (ev) {this.callback(0) clearTimeout(this.timeoutid)}, function(touch) { this.callback(touch.force) this.timeoutId = setTimeout(this._checkForce.bind(this, touch), 16) } }Copy the code

Last update: 2016-10-10 10:04:02