最近、Ofo Little Yellow Carアプリを使用したとき、以下のスイープが目のある小さな黄色い男になり、ここではHTML5を使用して効果を模倣しました。
ofo Eye Effect効果分析ジャイロスコープイベントが達成されていることを効果から見ることは難しくありません。
HTML5のジャイロスコープイベントのいくつかの概念を見てみましょう。
ジャイロスコープイベントは、主にイベントでalpha 、 beta 、 gammaを取得するdeviceorientationです。
モバイルデバイスを水平に配置すると、Z軸の周りの回転角は0度から360度です。
ベータモバイルデバイスがX軸の周りの回転角である水平に配置されると、値は-180度から180度です。
ガンマ動作が水平に配置されると、Z軸の周りの回転角は-90度から90度の値です。
ここでは、ベータとガンマを使用するだけです。
APKを解凍して目の素材を取得します。
コード実装<！doctype html> <html lang = en> <head> <meta charset = utf-8> <viewport content = device-width、hirting-scale = 1.0、最大スケール= 1.0、ユーザースケーラブル= no> <title> document </title> <style> #box {related：300px;}＃face {background-image：url（emages/face.p ng）;カバー：300px;トップ：左：eyeright（each.png） Glass {URL（Glass.png） = box> <div id = face> </div> <div id = eyeleft> </div> <div id = eyeright> </div> <div id = glass> </div> <div id = log> < /div> </div> <script> 'sprict';/**著者：wang leping*日付：2017.7.17*/var eteleftposition = {start：[70、78]、end：[100、110]} ; var eyightposition = {start：[150、78]、[190、110]}; ：（eyeleftposition.end [1] -emeleftposition [1]） / 2 + eyeleftposition [1]}; [0]、y：（eacyerightposition.end [1] -eyerightposition.start [1]） / 2 + eyerightposition [1]}; ）; var eyeright. document.queeryselector（ '#eyeright'）; left = eyeleftcenterposition.x + 90 * r + 'px'; / 180 * r + 'px'; eyeright.style.transform = eyeleft.transform = eyelele = eyelele ft.style.webkittransform = 'rotate（' + beta + 'deg）';}、false）;} document.queryselector（ 'body'）。究極の効果
上記は、この記事のすべての内容です。