최근에 Little Yellow Car App을 사용했을 때, 아래의 이전 청소는 눈을 가진 작은 노란색 사람이되었으며, 여기에서 HTML5를 사용하여 효과를 모방했습니다.
OFO 눈 효과 효과 분석자이로 스코프 사건이 달성 된 효과에서보기는 어렵지 않습니다.
HTML5에서 자이로 스코프 이벤트의 개념을 살펴 보겠습니다.
자이로 스코프 이벤트는 deviceorientation 에서 주로 alpha , beta , gamma 얻는 장치입니다.
모바일 장치가 수평으로 배치되면 z 축 주변의 회전 각도는 0도에서 360도입니다.
베타모바일 장치가 수평으로 배치되면 x 축 주위의 회전 각도는 -180도에서 180도입니다.
감마작업이 수평으로 배치되면 z 축 주변의 회전 각도는 -90도에서 90 도의 값입니다.
여기서 베타와 감마 만 사용하면됩니다.
APK를 압축하고 눈 재료를 얻으십시오.
코드 구현 <! doctype html> <html lang = en> <head> <meta charset = utf-8> <meta name = viewport content = width = device-width, 초기 스케일 = 1.0, 최대 스케일 = 1.0, 사용자 스케일 가능 = no> <title> 문서 </title> <style> #box {relate : 300px; 너비; 300px; 상단 : 왼쪽; 유리 {배경 이미지 : 배경 크기 : 300px; = box> <div id = face> </div> <div id = eyeleft> </div> <div id = eyeright> </div> <div id = Glass> </div> <div id = log> < /div> </div> <cript> 'Strict';/** 저자 : Wang Leping* 날짜 : 2017.7.17*/var eyeleftposition = {start : [70, 78], 끝 : [100, 110]} var eyeRightPosition = {시작 : [150, 78], [190, 110]}; : (eyeleftPosition.end [1] -EmeleftPosition [1]) / 2 + ineeleftPosition [1]}; [0], Y : (EyerightPosition.end [1] -eyerightPosition.Start [1]) / 2 + eyerightPosition.Start [1]}; ); var eyeright = docum style.left = eyeleftCenterPosition.x + gamma / 90 * r + 'px'; / 180 * r + 'px'; eyeright.style.transform = eyeleft.transform = eyeright.webkittransform = eyelele ft.style.webkittransform = 'rotate (' + beta + 'deg)';} else} document.querySelector ( 'body'). 'browser는 deviceorientationEvent를 지원하지 않습니다'</script> </body> </html>궁극적 인 효과
위는이 기사의 모든 내용입니다.