Учебник по использованию HTML5, чтобы реализовать функцию встряхивания вашего телефона

Комментарий: Функция Shake на мобильном телефоне хороша. Как его реализовать

На конференции разработчиков Baidu я представил еще одну важную особенность HTML5, которая представляет собой DeviceOrientation, которая инкапсулирует датчик основного направления и датчик движения в упаковке высокого уровня и обеспечивает поддержку событий DOM. Эта функция включает в себя два события:

1. Deviceoratation: событие инкапсулирует данные датчика направления и может получить данные направления в стационарном состоянии мобильного телефона, такие как угол, ориентация, ориентация и т. Д. Мобильного телефона.

2. Devicemotion: события инкапсулируют данные датчика движения и могут получить такие данные, как ускорение движения в состоянии движения мобильного телефона.

Используя его, мы можем легко достичь интересных функций, таких как гравитационное зондирование и компас, которые будут очень полезны для мобильных телефонов. Например, пример гравитационного чувствительного шарика в пробной версии Opera H5 достигается путем мониторинга события DeviceOrientation API DeviceOrientation.

На самом деле, это также может помочь нам реализовать очень распространенную и модную функцию в мобильном приложении на веб -странице: встряхните мобильный телефон.

Впервые я увидел эту функцию в Photoshake, а затем многие приложения, включая WeChat, добавили эту функцию.

Если вы когда -либо делали разработку Android или iOS, вы можете быть очень знакомы с такими функциями. Но ниже мы впервые будем реализовать эту функциональность в Интернете.

Давай начнем быстро!

DeviceMotionEvent возвращает соответствующую информацию устройства о ускорении и ротации. Данные ускорения будут содержать три оси: x, y и z (схематически показано на рисунке ниже, ось X проникает на экран мобильного телефона или клавиатуру ноутбука горизонтально, ось Y запускает экран мобильного телефона или клавиатуру ноутбука, а ось z является перпендикулярной для экрана мобильного телефона или на лаптике). Поскольку некоторые устройства могут не иметь оборудования для исключения воздействия гравитации, событие возвращает два свойства, Acceleration Include Gravity и ускорение, что исключает влияние тяжести.

Используйте HTML5, чтобы реализовать функцию встряхивания вашего телефона

Давайте сначала отслежим события определения движения.

[JavaScript]

if (window.devicemotionevent) {

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

}

[/javascript]

Затем получите ускорение, содержащее тяжесть.

[JavaScript]

функция DeviceMotionHandler (EventData) {

var acceleration = eventData.ccelerationIncludeGravity;

}

[/javascript] </p> <p>

Ниже приведено то, как мы рассчитываем принцип пользователей, трясуясь своими телефонами. Ключевые моменты, которые следует учитывать, заключаются в следующем:

1. Большинство пользователей встряхивают свои телефоны в одном направлении, чтобы встряхнуть;

2. Данные ускорения в трех направлениях определенно изменятся при встряхивании;

3. Мы не можем ошибиться в нормальном движении поведения мобильных телефонов. Подумайте об этом, если ваш мобильный телефон будет помещен в ваш карман, он также будет иметь изменения данных ускорения при ходьбе.

Таким образом, мы должны рассчитать ускорения в трех направлениях, измерять их с интервалами, изучить их скорость изменения в течение фиксированного периода времени и необходимо определить порог, чтобы он мог вызвать действие.

Нам нужно определить несколько переменных для записи данных исторических оси x, y и z и времени последнего триггера. Код реализации основного метода заключается в следующем:

var shake_threshold = xxx;

var last_update = 0;

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

функция DeviceMotionHandler (EventData) {

var acceleration = eventData.ccelerationIncludeGravity;

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) {

блюд ("Shaked!");

}

last_x = x;

last_y = y;

last_z = z;

}

}

Из этого мы завершили функцию встряхивания телефона. Разве это не очень просто?