Baru -baru ini, ketika saya menggunakan aplikasi mobil kuning kecil, saya menemukan bahwa penyapuan sebelumnya menjadi pria kuning kecil dengan mata, dan rasanya cukup menarik.
efek mata Analisis efekTidak sulit untuk melihat dari efek bahwa peristiwa giroskop tercapai.
Mari kita lihat beberapa konsep acara giroskop di HTML5.
Acara giroskop adalah deviceorientation , yang terutama memperoleh alpha , beta , gamma dalam acara tersebut.
Ketika perangkat seluler ditempatkan secara horizontal, sudut rotasi di sekitar sumbu Z adalah 0 derajat hingga 360 derajat.
betaKetika perangkat seluler ditempatkan secara horizontal, sudut rotasi di sekitar sumbu x, nilainya -180 derajat hingga 180 derajat.
gammaKetika operasi ditempatkan secara horizontal, sudut rotasi di sekitar sumbu z adalah nilai -90 derajat hingga 90 derajat.
Di sini, Anda hanya perlu menggunakan beta dan gamma.
Unzip apk dan dapatkan bahan mata:
Implementasi Kode <! = No> <Title> Dokumen </itement> <tyle> #box {Positif: Terkait: 300px; Cover; TOP: Kiri; Glass {latar belakang: URL (gambar/gelas.png); = Box> <div id = face> </div> <div id = eyeleft> </div> <div id = eyeright> </div> <div id = glass> </div> <div id = log> < /Div> </div> <script> 'gunakan ketat';/** penulis: wang leping* tanggal: 2017.7.17*/var eyeleftposition = {start: [70, 78], end: [100, 110]} ; : (Eyeleftposition.end [1] -emeleftposition [1]) / 2 + eyeleftposition [1]}; [0], Y: (Eyerightposition.end [1] -eyerightposition.start [1]) / 2 + eyerightposition.start [1]}; ); style.left = eyeleftcenterposition.x + gamma / 90 * r + 'px'; / 180 * r + 'px'; Document.QuerySelector ('Body').Efek akhir
Di atas adalah semua isi artikel ini.