HTML5 Vibration API: Vibrátorteszt, példák, beépülő modulok és kód – Tech

Szeretett volna már JavaScriptet használó webhelyről vibrálni telefonját?

Ebből a teljes útmutatóból megtudhatja, hogyan használhatja ki az új HTML Vibration API-t, hogy magával ragadó webes élményt hozzon létre, hozzáadva vibrációs hatások csak néhány soros JavaScript kóddal.

Miért használja a Vibration API-t webhelyeken?

A vibrációs effektusok tapintható visszajelzést adnak a mobilfelhasználók felhasználói élményének javítása érdekében. Ha takarékosan használják, a rezgések interaktívabbá tehetik a webelemeket anélkül, hogy bosszantóak vagy túlzottan igénybe vennék őket.

Néhány nagyszerű használati eset:

  • Biztosítani haptikus visszajelzés tovább gomb kattintások
  • Értesítések és riasztások
  • Szórakoztató hatások zenével vagy témákkal párosítva

Gondos tervezéssel a rezgések jelentősen javíthatják a mobilwebhelyek és -alkalmazások felhasználói élményét. ✨

Vessünk egy pillantást a működésére:

// Rezgés 1 másodpercig navigator.vibrate(1000);

Ebből a teljes útmutatóból megtudhatja:

Tehát, ha azt szeretné, hogy webes projektjei rezegjenek, zúgjanak, remegjenek és zörögjenek – kezdjük!

Vibration API böngésző támogatás

A Vibration API-t a legtöbb modern böngésző támogatja, de van néhány kivétel:

Eszköz/böngésző Támogatás
iOS Safari ❌ Nem
Opera Mini ❌ Nem
AZAZ ❌ Nem
Android böngésző ✅ Android 4.4 óta
Króm ✅ Igen!
Firefox ✅ Igen!
Az Ön böngészője

A vibrációs API-t a navigator.vibrate tartalmazza. Tehát a funkció meghívásakor a telefon rezeg. Kipróbálhatja, hogy a böngészője elég friss-e ahhoz, hogy a navigátorban legyen rezgés funkció. A JavaScript támogatásának ellenőrzése:

Olvasni:  Személyre szabás az UX-ben: Az Ön közelében lévő ügyfelek bevonása a Next.js Geolocation segítségével –

if (“rezgés” a navigátorban) { // rezgés támogatott! }

Van néhány kulcsfontosságú korlátozás:

  • Valóságos vibrációs hardvert igényel a készülékben
  • Az oldalnak láthatónak kell lennie – nem működik a háttérben lévő lapokon
  • Egyes böngészők korlátozzák a túlzott rezgést

Most pedig nézzük meg, hogyan lehet ténylegesen kiváltani a rezgéseket!

A navigator.vibrate használata

A navigator.vibrate függvény egy számot vagy egy számtömböt fogad el.

A következő példában a készülék rezegni fog 1000 ezredmásodperc (ms):

Teszt kód

// rezeg 1000 ms-ig navigator.vibrate(1000) // vagy alternatívaként navigator.vibrate([1000])

A rezgésmintát a rezgés időtartamának ezredmásodpercei és a várakozási időszak időtartama alkotja.

Ebben a példában az eszközök rezegni fognak 1000 ms, várj 500 ms, és ismét rezeg.

Teszt kód

// az eszköz rezegni fog várj vibráció navigator.vibrate([1000, 500, 1000])

Minden új hívás leállítja az előző rezgéssorozatot. Ha az oldal már nem látható, mint például az eszköz lezárása, az ablak kicsinyítése, átlépés egy másik lapra, akkor a rezgés is megszűnik.

Ebben a példában az eszközök abbahagyják a rezgést.

Teszt kód

// Rezgés leállítása navigator.vibrate() navigator.vibrate(0) navigator.vibrate([])

A telefon rezgése az interneten

Addig folytathatjuk a rezgést, amíg a felhasználó abbahagyja az eszköz érintését. A vibráció azonban egy idő után megszűnik. De amúgy sem arra való, hogy a végtelenségig nyomkodják.

Ebben a példában a készülék addig rezeg, amíg az érintési esemény le nem áll

Teszt kód

var isMobile = /iPhone|iPod|iPad|Android|BlackBerry/.test(navigator.userAgent) $(‘.button’).on(isMobile ? ‘touchstart’ : ‘mousedown’, function (e) { navigator.vibrate( Infinity) // A végtelen egy szám }) $(‘.button’).on(isMobile ? ‘touchend’ : ‘egér’, function (e) { navigator.vibrate(0) })

Rezgés kattintásra

Ennek az API-nak a legjobb felhasználási esete a gombok használata. Egy kis tapintható visszajelzést kap, mint a natív alkalmazások esetében. Ezt úgy lehet megtenni, hogy a rezgést nagyon alacsony értékre állítja. Nekem 50 ms ideálisnak tűnik.

Ebben a példában az oldalon lévő összes gomb és hivatkozás koppintásra rezeg. Azt is észleljük, hogy az eszköz mobil-e, és touchendet használunk.

Teszt kód

Olvasni:  Kész és egyedi megoldások: mit válasszon flottaüzletéhez

var isMobile = /iPhone|iPod|iPad|Android|BlackBerry/.test(navigator.userAgent) $(‘.button, a’).on(isMobile ? ‘touchend’ : ‘kattintás’, funkció (e) { navigátor. rezeg(50) })

Rezgés jelölőnégyzetekkel

A csúszó jelölőnégyzetre kattintás utáni rezgés is nagyon hasznos. Nagyon természetes érzés. Az elején rövid rezgés, majd egy várakozási idő, amíg a jelölőnégyzet mozog, majd egy hosszabb rezgés a végén.

Ebben a példában a jelölőnégyzet rezegni fog.

$(‘.ui.checkbox’). click(function () { navigator.vibrate([5, 200, 20]) })

Rezgés időtartama

Ha nem biztos abban, hogy mennyi ideig kell tartania a tapintási visszajelzést. Különféle időintervallumokkal kísérletezhet. Próbálja ki ezeket a gombokat mobileszközön. Bármi, ami fent van 100 ms úgy tűnik, vágyik rám.

Ebben a példában a következő gombok mindegyike különböző időintervallumban rezeg.

Rezgés értesítéskor

Egy másik nagyszerű használati eset az értesítések. Ezek egy kicsit hosszabbak lehetnek, mint a tapintható visszajelzés. A minták a megkülönböztetésre is használhatók.

Kérem ügyeljen a telefonon megjelenő rezgésértesítésre, és ne ismételje meg azokat, nehogy megzavarja a felhasználót. Ideális lenne némi vizuális visszajelzés a rezgéssel együtt.

Kattintson az alábbi gombokra. Amikor a folyamatjelző sáv eléri a végét. Értesítést kapsz! Minden gomb különböző rezgésmintázatú.

// Rezgés a befejezéskor var pattern = [500, 100, 500]; $(.progress .bar”) .css({width: “0%”}) .animate({width: “100%”}, { időtartam: 1000, teljes: function() { if (canVibrate) navigátor. vibrál(minta); } });

Rezgés dalmintákkal

Groggie megemlítette blogbejegyzését a Vibration API zenéhez és főcímdalokhoz való használatáról. Ez egy nagyon klassz példa arra, hogy mit lehet tenni a Vibration API használatával és némi kreatív gondolattal. A játékhoz kattintson az alábbi címekre.

navigator.vibrate([
125, 75, 125, 275, 200, 275, 125, 75, 125, 275, 200, 600, 200, 600,
]) navigator.vibrate([
200, 100, 200, 275, 425, 100, 200, 100, 200, 275, 425, 100, 75, 25, 75, 125,
75, 25, 75, 125, 100, 100,
]) navigator.vibrate([
500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170, 40,
500,
]) navigator.vibrate([
100, 30, 100, 30, 100, 200, 200, 30, 200, 30, 200, 200, 100, 30, 100, 30, 100,
])

Olvasni:  GPT Writer: Hogyan írjunk SEO-optimalizált blogbejegyzést mesterséges intelligencia segítségével – SEO

Vibration API kód ​​példák

Vue.js vibráció

Korábban saját Vibration API kódot írtam a Vue.js-ben, de a hoook bevezetésével a Vue 3-ban elkezdtem használni az úgynevezett hook-ot. használja a vibrációt tól től @vueuse/core.

import { useVibrate } innen: ‘@vueuse/core’ // Rezgés az eszközön 300 ms-ig, várjon 100 ms-ig, rezgés 300 ms-ig const minta = [300, 100, 300]
const { vibrate, stop, isSupported } = useVibrate({ minta }) vibrate() // leáll a minta befejezése után stop() // rezgés azonnali leállítása

Next.js és React vibration

A Next.js és a React programban a Web Vibration API-t közvetlenül a funkcionális összetevőkben használhatja. Íme egy példa arra, hogyan hozhat létre egyéni horgot a rezgések kezelésére:

“use client” import { useCallback } from ‘react’; függvény exportálása useVibration(pattern) { const vibrate = useCallback(() => { if (‘rezgés’ a navigátorban) { navigator.vibrate(pattern); } }, [pattern]); visszatérő rezgés; }

Ezután használhatja ezt a kampót az összetevőiben, hogy rezgéseket váltson ki a felhasználói interakciók vagy más események alapján.

Ellenkező esetben íme egy példa arra, hogyan hozhat létre olyan gombot, amely kattintáskor rezeg:

‘use client’ // Csak a böngészőben és a kliens összetevőiben lehetséges function VibrateButton({ minta }) { const handleClick = () => { if (‘rezgés’ a navigátorban) { navigator.vibrate(pattern); } }; return ( ); } // Használja a VibrateButton összetevőt az alkalmazásban

jQuery.vibrate.js

Ha a manuális végrehajtás nehéznek tűnik Önnek, írtam egy jquery beépülő modult, amellyel azonnal elkezdheti.

Töltse le és ágyazza be a kódot majd inicializálja a következő módok egyikével:

// Rezgés 50 ms-ig minden .button kattintáskor $(‘.button’).vibrate() // Rezgés 20 ms-ig kattintáskor $(‘.button’).vibrate(‘short’) // Rezgés 50 ms-ig kattintáskor $(‘.button’).vibrate(‘medium’) $(‘.button’).vibrate(‘default’) $(‘.button’).vibrate(50) // Rezgés 100 ms-ig $(‘ .button’).vibrate(‘long’) // Rezgés 1000 ms-ig érintésindításkor. Hagyja abba a rezgést érintés közben. $(‘.button’).vibrate({ időtartam: 1000, trigger: ‘touchstart’, })

Olvasni:  Miért érdemes csapatot bérelni vállalkozása bővítéséhez?

Csináltam egy diavetítést is: További információ a Vibration API-ról tól től illyizmus. Nyugodtan oszd meg és mutasd meg.

További Javascript és CSS cikkek iránt érdeklődik? Tekintse meg a CSS-szövegátmenetekről szóló cikkünket.

Új publikációk:

Ajánlott