Через онлайн -информацию и свою собственную компиляцию я написал введение в функцию HTML Shake и использовал ее в качестве технической резервной копии.
Ключевые моменты знаний
1. DevicemotionEvent
Это событие гравитационного зондирования, поддерживаемое HTML5. Для документации, пожалуйста, см.
Введение события:
Deviceorientation предоставляет информацию о физическом направлении устройства, выраженной как угол поворота серии локальных систем координат.
DeviceMotion предоставляет информацию о ускорении для устройства, выраженной в виде координат Cardi, определенных в системе координат на устройстве. Он также обеспечивает скорость вращения устройства в системе координат. Если это возможно, событие должно предоставить информацию о ускорении в центре тяжести устройства.
CompassneedScalibration используется для уведомления веб -сайта для калибровки вышеуказанных событий с использованием информации Compass.
2. Введение в мероприятие
window.addeventListener ("deviceorientation", function (event) {// Процесс event.alpha, event.beta и event.gamma}, true);
{alpha: 90, бета: 0, гамма: 0};Это параметр, возвращаемый событием Deviceorientation. Чтобы получить указание компаса, вы можете просто использовать 360 градусов, чтобы минус альфа. Если это параллельно горизонтальной поверхности, его компас указывает на (360 - альфа). Если пользователь удерживает устройство, экран находится в вертикальной плоскости, а верхняя часть экрана указывает вверх. Значение бета составляет 90, альфа и гамма не связаны. Управляющее устройство пользователя обращается к углу альфа, экран находится на вертикальном экране, а верхняя часть экрана указывает вправо, а информация о его направлении заключается в следующем
{Альфа: 270- Альфа, бета: 0, гамма: 90};Зарегистрируйте приемник для Devicemotion мероприятие:
Копия кода выглядит следующим образом: window.addeventListener ("devicemotion", function (event) {// event.celeration, event.accelerationincludegravity, // event.rotationrate и event.interval}, true);
Поместите устройство на верхнюю часть автомобиля с экраном в вертикальную плоскость с верхней стороной вверх и обращенным к задней части автомобиля. Автомобиль путешествует со скоростью V и поворачивается вправо с радиусом r. Устройство записывает ситуацию, когда ускорение и ускорение, в течение всего, находятся в положении X, а устройство также записывает отрицательное значение rowationrate.gamma:
{ускорение: {x: v^2/r, y: 0, z: 0}, accelerationincludgravity: {x: v^2/r, y: 0, z: 9.81}, rowationrate: {alpha: 0, бета: 0, гамма: -v/r*180/pi};Функциональная реализация
if (window.devicemotionevent) {window.addeventListener ('devicemotion', yaoyiyao, false); } var speed = 30; // speed var x = y = z = lastx = lasty = lastz = 0; Функция yaoyiyao (eventData) {var acceleration = eventData.CelerationIncludEdgravity; x = acceleration.x; y = acceleration.y; z = acceleration.z; if (math.abs (x-lastx)> speed || math.abs (y-lasty)> speed || math.abs (z-lastz)> speed) {// простое оповещение кода триггера Shake Trigge (1); } lastX = x; lasty = y; Lastz = z; }Во -первых, определите, поддерживает ли браузер это событие.
Yaoyiyao используется для определения того, дрожит ли мобильный телефон. В частности, он должен получить мобильные данные мобильного телефона и сохранить их во внешней переменной. Когда событие встряхивания снова запускается в следующий раз, определите, находятся ли последняя координата встряхивания и текущая координата встряхивания в диапазоне частой мобилизации: math.abs (x-lastx)> скорость || math.abs (y-lasty)> speed || math.abs (z-lastz)> Скорость
По сути, если это условие выполнено, телефон находится в состоянии встряхивания и добавьте код встряхивания, который вы хотите выполнить в оператор IF.
Выше приведено идея реализации функции Shake HTML5, и я надеюсь, что это будет полезно для каждого обучения.