Melalui informasi online dan kompilasi saya sendiri, saya menulis pengantar fungsi shake HTML dan menggunakannya sebagai cadangan teknis.
Poin -poin penting dari pengetahuan
1. DevicemotionEvent
Ini adalah acara penginderaan gravitasi yang didukung oleh HTML5. Untuk dokumentasi, silakan lihat: http://w3c.github.io/deviceorientation/spec-source-orientation.html
Pendahuluan Acara:
Deviceorientation memberikan informasi arah fisik perangkat, dinyatakan sebagai sudut rotasi serangkaian sistem koordinat lokal.
DeviceMotion memberikan informasi akselerasi untuk perangkat, dinyatakan sebagai koordinat cardi yang ditentukan dalam sistem koordinat pada perangkat. Ini juga menyediakan laju rotasi perangkat dalam sistem koordinat. Jika layak, acara tersebut harus memberikan informasi akselerasi di pusat gravitasi perangkat.
CompassNeedScalibration digunakan untuk memberi tahu situs web untuk mengkalibrasi peristiwa di atas menggunakan informasi kompas.
2. Pengantar acara tersebut
window.addeventListener ("deviceorientation", function (event) {// proses event.alpha, event.beta dan event.gamma}, true);
{alpha: 90, beta: 0, gamma: 0};Ini adalah parameter yang dikembalikan oleh acara Deviceorientation. Untuk mendapatkan penunjuk kompas, Anda dapat menggunakan 360 derajat untuk minus alpha. Jika paralel dengan permukaan horizontal, kompasnya menunjuk pada (360 - alpha). Jika pengguna memegang perangkat, layar berada di bidang vertikal dan bagian atas layar menunjuk ke atas. Nilai beta adalah 90, alpha dan gamma tidak terkait. Perangkat genggam pengguna menghadap ke sudut alfa, layar ada di layar vertikal, dan bagian atas layar menunjuk ke kanan, dan informasi arahnya adalah sebagai berikut
{alpha: 270- alpha, beta: 0, gamma: 90};Daftarkan penerima untuk acara Devicemotion:
Salinan kode adalah sebagai berikut: window.addeventListener ("devicemotion", function (event) {// event.acceleration, event.accelerationIncludegravity, // event.rotationrate dan event.interval}, true);
Tempatkan perangkat di atas kendaraan dengan layar di bidang vertikal dengan bagian atas menghadap ke atas dan menghadap bagian belakang kendaraan. Kendaraan berjalan dengan kecepatan V dan berbelok ke kanan dengan jari -jari r. Perangkat mencatat situasi di mana akselerasi dan akselerasi termasuk gravitas berada pada posisi X, dan perangkat juga mencatat nilai negatif rotasi. Gamma:
{Acceleration: {x: v^2/r, y: 0, z: 0}, accelerationincludedgravity: {x: v^2/r, y: 0, z: 9.81}, rotasi: {alpha: 0, beta: 0, gamma: -v/r*180/pi}};Implementasi Fungsional
if (window.devicemotionEvent) {window.addeventListener ('devicemotion', yaoyiyao, false); } var speed = 30; // speed var x = y = z = lastx = lasty = lastz = 0; fungsi yaoyiyao (eventData) {var acceleration = eventData.accelerationincludededgravity; x = acceleration.x; y = Acceleration.y; z = Acceleration.z; if (math.abs (x-lastx)> speed || math.abs (y-lasty)> speed || math.abs (z-lastz)> kecepatan) {// peringatan kode pemicu goyang sederhana (1); } lastx = x; terakhir = y; lastz = z; }Pertama, tentukan apakah browser mendukung acara ini.
Yaoyiyao digunakan untuk mendeteksi apakah ponsel bergetar. Secara khusus, ini adalah untuk mendapatkan data seluler ponsel dan menyimpannya dalam variabel eksternal. Ketika acara pengocok dipicu lagi lain kali, tentukan apakah koordinat pengocok terakhir dan koordinat pengocok saat ini berada dalam berbagai mobilisasi yang sering: Math.ABS (X-LASTX)> Kecepatan || Math.ABS (Y-Lasy)> Kecepatan || Math.ABS (Z-LASTZ)> Kecepatan
Pada dasarnya, jika kondisi ini terpenuhi, telepon dalam keadaan gemetar, dan tambahkan kode guncangan yang ingin Anda jalankan ke dalam pernyataan IF.
Di atas adalah gagasan untuk menerapkan fungsi shake HTML5, dan saya harap ini akan membantu untuk pembelajaran semua orang.