Недавно, когда я использовал приложение Ofo Little Yellow Car, я обнаружил, что предыдущий подметание внизу стала маленьким желтым человеком с глазами, и это было довольно интересно.
эффект глаз Анализ эффектаНе сложно увидеть из того, что событие гироскопа достигается.
Давайте посмотрим на некоторые концепции события гироскопа в HTML5.
Событие гироскопа представляет собой deviceorientation , которая в основном получает alpha , beta , gamma в мероприятии.
Когда мобильное устройство расположено горизонтально, угол вращения вокруг оси Z составляет от 0 градусов до 360 градусов.
бетаКогда мобильное устройство расположено горизонтально, угол вращения вокруг оси X, значение составляет -180 градусов до 180 градусов.
гаммаКогда операция размещена горизонтально, угол вращения вокруг оси Z составляет значение от -90 градусов до 90 градусов.
Здесь вам нужно только использовать бета и гамма.
Разанизируйте APK и получите материал для глаз:
Реализация кода <! = No> <Title> документ </title> <style> #box {положительный: связанный: 300px; Обложка; TOP: 90PX; Glass {Faine-Iments: URL (Images/Glass.png); = Box> <div id = face> </div> <div id = eyeleft> </div> <div id = eAright> </div> <div id = Glass> </div> <div id = log> < /div> </div> <script> 'Использовать строгое';/** Автор: Wang Leping* Дата: 2017.7.17*/var eyeleftposition = {start: [70, 78], end: [100, 110]} ; : (Eyeleftposition.end [1] -emeleftposition [1]) / 2 + eyeleftposition [1]}; [0], y: (EneerightPosition.end [1] -eerightposition.Start [1]) / 2 + EyerightPosition.Start [1]}; ); style.left = eyeleftcenterposition.x + гамма / 90 * r + 'px'; / 180 * r + 'px'; Document.queryselector ('Body').Окончательный эффект
Выше всего содержимое этой статьи.