Laksanakan fungsi goncang WeChat berdasarkan kemahiran tutorial html5 DeviceOrientation_html5

Dalam HTML5, acara DeviceMotion yang disediakan oleh ciri DeviceOrientation merangkum masa penderia gerakan peranti Dengan menukar masa, anda boleh mendapatkan status gerakan peranti, pecutan dan data lain (terdapat juga acara DeviceOrientation yang menyediakan sudut peranti. orientasi dan maklumat lain) .

Menentukan status gerakan peranti melalui DeviceMotion boleh membantu kami mencapai kesan interaktif "goncang" pada halaman web.

Pemantauan acara gerakan

Salin kod

Kod adalah seperti berikut:

jika (tetingkap.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
alert('Telefon anda teruk, beli yang baharu.');
}

Dapatkan maklumat pecutan

Tindakan "goncang" bermaksud peranti bergerak pada jarak tertentu dalam tempoh masa tertentu Oleh itu, dengan memantau kadar perubahan nilai x, y, z yang diperoleh dalam langkah sebelumnya dalam julat masa tertentu. , anda boleh menentukan sama ada peranti telah Buat pertimbangan yang goyah. Untuk mengelakkan salah menilai pergerakan normal, nilai kritikal yang sesuai perlu ditetapkan untuk kadar perubahan.

Salin kod

Kod tersebut adalah seperti berikut:

function deviceMotionHandler(eventData) {
var acceleration = eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime - last_update) > 100) {
var diffTime = curTime - last_update;
last_update = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x y z - last_x - last_y - last_z) / diffTime * 10000;
var status = document.getElementById("status");
if (kelajuan > SHAKE_THRESHOLD) {
doResult();
}
last_x = x ;
last_y = y;
last_z = z;
}
}

Kesannya seperti yang ditunjukkan dalam gambar: