Tutorial tentang penggunaan HTML5 untuk mewujudkan fungsi mengguncang ponsel Anda

Komentar: Fungsi shake di ponselnya bagus. Bagaimana mengimplementasikannya

Pada Konferensi Pengembang Baidu, saya memperkenalkan fitur penting lain dari HTML5, yang merupakan Deviceorientation, yang merangkum sensor arah dan sensor gerak yang mendasarinya dalam kemasan tingkat tinggi dan memberikan dukungan untuk acara DOM. Fitur ini mencakup dua acara:

1. Deviceorientation: Acara ini merangkum data sensor arah, dan dapat memperoleh data arah dalam keadaan stasioner ponsel, seperti sudut, orientasi, orientasi, dll. Dari ponsel.

2. Devicemotion: Acara merangkum data sensor gerak, dan dapat memperoleh data seperti akselerasi gerak dalam keadaan gerak ponsel.

Menggunakannya kita dapat dengan mudah mencapai fungsi -fungsi menarik seperti penginderaan gravitasi dan kompas, yang akan sangat berguna di ponsel. Misalnya, contoh bola penginderaan gravitasi dalam versi uji coba Opera H5 dicapai dengan memantau acara perangkat API perangkat perangkat.

Bahkan, itu juga dapat membantu kita mewujudkan fungsi yang sangat umum dan modis dalam aplikasi seluler di halaman web: kocok ponsel.

Saya pertama kali melihat fungsi ini di Photoshake, dan kemudian banyak aplikasi, termasuk WeChat, telah menambahkan fungsi ini.

Jika Anda pernah melakukan pengembangan Android atau iOS, Anda mungkin sangat akrab dengan fitur -fitur tersebut. Namun di bawah ini, kami akan menerapkan fungsi ini untuk pertama kalinya di web.

Mari kita mulai dengan cepat!

DevicemotionEvent Mengembalikan informasi yang relevan dengan perangkat tentang akselerasi dan rotasi. Data akselerasi akan berisi tiga sumbu: x, y dan z (secara skematis ditunjukkan pada gambar di bawah ini, sumbu x menembus layar ponsel atau keyboard laptop secara horizontal, sumbu y menjalankan layar ponsel atau keyboard laptop secara vertikal, dan sumbu z tegakal ke layar ponsel atau keyboard laptop). Karena beberapa perangkat mungkin tidak memiliki perangkat keras untuk mengecualikan dampak gravitasi, peristiwa ini mengembalikan dua sifat, akselerasi termasuk gravitasi dan akselerasi, yang mengecualikan dampak gravitasi.

Gunakan HTML5 untuk mewujudkan fungsi mengguncang ponsel Anda

Mari monitor peristiwa penginderaan gerak dulu.

[JavaScript]

if (window.devicemotionevent) {

window.addeventlistener ('devicemotion', devicemotionhandler, false);

}

[/javascript]

Kemudian dapatkan akselerasi yang mengandung gravitasi.

[JavaScript]

fungsi devicemotionHandler (eventData) {

var acceleration = eventData.accelerationincludegravity;

}

[/javascript] </p> <p>

Berikut ini adalah tentang bagaimana kami menghitung prinsip pengguna mengguncang ponsel mereka. Poin -poin penting yang perlu dipertimbangkan adalah sebagai berikut:

1. Sebagian besar pengguna mengguncang ponsel mereka dalam satu arah untuk dikocok;

2. Data percepatan dalam tiga arah pasti akan berubah saat gemetar;

3. Kita tidak dapat salah menilai perilaku gerakan normal ponsel. Pikirkan tentang hal ini, jika ponsel Anda ditempatkan di saku Anda, itu juga akan mengalami perubahan data akselerasi saat berjalan.

Singkatnya, kita harus menghitung akselerasi dalam tiga arah, mengukurnya pada interval, memeriksa laju perubahan mereka selama periode waktu tetap, dan perlu menentukan ambang batas untuk memicu tindakan.

Kita perlu mendefinisikan beberapa variabel untuk merekam data sumbu historis x, y, dan z dan waktu pemicu terakhir. Kode implementasi metode inti adalah sebagai berikut:

var shake_threshold = xxx;

var last_update = 0;

var x, y, z, last_x, last_y, last_z;

fungsi devicemotionHandler (eventData) {

var acceleration = eventData.accelerationincludegravity;

var curTime = newDate (). getTime ();

if ((CurTime - LastUpdate) & gt; 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;

if (speed & gt; shake_threshold) {

waspada ("Shaked!");

}

last_x = x;

last_y = y;

last_z = z;

}

}

Dari sini, kami telah menyelesaikan fungsi mengguncang telepon. Bukankah itu sangat sederhana?