移動設備的普及使得越來越多的用戶通過手機和平板電腦訪問網頁。截至2013年12月,每五次網頁訪問中就有一次來自移動設備。如果您的網站或應用程序能夠適應移動設備,這個比例可能會更高。多設備開發麵臨挑戰,但也帶來了一些台式電腦無法實現的可能性。例如,振動機制就是一個簡單的觸覺反饋設備,可以提醒您新的消息或電話。在嘈雜的環境中或安靜的環境中(聲音會造成乾擾),它尤其有用。如果您的應用程序可以使用振動功能,豈不是很棒?
HTML5 振動 API 允許您做到這一點!
是否需要振動?
僅僅因為我們可以讓手機振動,並不意味著我們應該這樣做。振動會嚴重消耗電池電量,因此如果電量不足或當前標籤頁中未運行遊戲,最好將其禁用。根據您的應用程序,最好提供用戶選項,以便他們可以啟用、禁用或配置振動條件。
瀏覽器支持和檢測
該 API 相對較新,目前僅限於最新版本的 Firefox 和 Chrome 支持。較早的版本分別需要 moz 和 webkit 前綴。您還應該使用具有振動機制的設備——API 可能會在您的瀏覽器中可用,但如果沒有振動機制,您將無法知道它是否有效!使用以下檢查來檢測振動支持:
if ("vibrate" in navigator) { // 支持振动 API }
要檢查和使用帶前綴的版本,您可以使用以下代碼:
// 启用振动支持 navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate; if (navigator.vibrate) { // 支持振动 API }
振動基礎
可以通過將毫秒數傳遞給 navigator.vibrate 來設置基本振動:
// 振动一秒钟 navigator.vibrate(1000);
或者,您可以傳遞一個包含以毫秒為單位指定的振動和延遲參數的數組。例如,要振動 500 毫秒,等待 300 毫秒,然後再次振動 100 毫秒:
// 振动一秒钟 navigator.vibrate([500, 300, 100]);
偶數索引的數組項定義振動時間(數組從零開始,因此第一項和第三項分別是 0 和 2)。奇數索引的數組項定義延遲時間。振動是非阻塞的;當設備正在振動時,您的 JavaScript 代碼將繼續運行。要停止振動,您可以將零傳遞給 navigator.vibrate。此概念在遊戲中可能很有用。例如,當用戶撞壞汽車時,您設置 navigator.vibrate(10000)。但是,如果碰撞效果在 10 秒內結束,則設置 navigator.vibrate(0) 以結束振動。
振動演示
要在您的設備上測試 API……查看振動 API 演示……查看所有 HTML、CSS 和 JavaScript 的源代碼。表單參數構建一個數組,在單擊“開始”時將其傳遞給 navigator.vibrate。單擊“停止”按鈕時,將執行 navigator.vibrate(0);。盡情使用振動 API,如果您有任何有趣的用途,請告訴我。
HTML5 振動 API 常見問題解答
HTML5 振動 API 是一種強大的工具,允許開發人員以編程方式訪問設備上(如果存在)的振動硬件。這可以用於根據各種事件(例如接收通知或按下按鈕)向用戶提供觸覺反饋。需要注意的是,API 並不能保證振動會發生,因為最終決定權留給操作系統和用戶的設置。
要使用振動 API,您需要調用 navigator.vibrate() 方法。此方法接受單個整數或整數數組。單個整數表示振動持續的毫秒數。整數數組表示振動和暫停的模式。例如,navigator.vibrate(200) 將使設備振動 200 毫秒,而 navigator.vibrate([200, 100, 200]) 將使設備振動 200 毫秒,暫停 100 毫秒,然後再次振動 200 毫秒。
振動 API 主要用於具有內置振動硬件的移動設備。但是,可以在任何設備上調用 API。如果設備不支持振動,則對 navigator.vibrate() 的調用將被簡單地忽略。
您可以使用 navigator 對象的 vibrate 屬性來檢查設備是否支持振動 API。如果該屬性存在,則該設備支持該 API。以下是您可以執行此操作的方法:if ("vibrate" in navigator) { / 設備支持振動 / }。
是的,您可以通過使用參數 0 或空數組調用 navigator.vibrate() 方法來在振動結束前停止振動。例如,navigator.vibrate(0) 或 navigator.vibrate([]).
大多數現代瀏覽器(包括 Chrome、Firefox 和 Opera)都支持振動 API。但是,Internet Explorer 不支持它,Safari 的支持有限。
不可以,振動 API 在工作線程上下文中不可用。它只能在主瀏覽器上下文中使用。
是的,使用振動 API 有一些限制。例如,在某些瀏覽器中,API 只能響應用戶操作(例如單擊或觸摸)來使用,以防止濫用或煩人的使用。
不可以,振動 API 不允許您指定振動的強度。強度由設備的硬件和操作系統控制。
是的,您可以通過將整數數組傳遞給 navigator.vibrate() 方法來使用振動 API 創建複雜的振動模式。數組中的每個整數都表示振動或暫停的持續時間。例如,navigator.vibrate([200, 100, 200, 100, 200]) 將創建一個由三個振動組成的模式,每個振動持續 200 毫秒,由兩個暫停隔開,每個暫停持續 100 毫秒。
以上是如何使用HTML5振動API的詳細內容。更多資訊請關注PHP中文網其他相關文章!