눈 움직임 효과의 HTML5 예-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

눈 움직임 효과의 HTML5 예

巴扎黑

Aug 07, 2017 pm 02:21 PM

h5 html5 효과

이 글은 주로 HTML5 자이로스코프를 기반으로 ofo 홈페이지에 눈 움직임 효과를 구현한 예를 소개하고 있습니다. 관심 있는 친구들은 참고하시면 됩니다.

최근 Ofo Little Yellow Car 앱을 사용하다가 발견한 내용은 다음과 같습니다. 스캔하면 눈이 움직이는 미니언으로 변합니다. 여기서는 HTML5를 사용하여 효과를 흉내내는 것이 매우 흥미로울 것 같습니다.

ofo 눈 효과

효과 분석

자이로스코프 이벤트를 이용해서 얻는 효과를 보면 어렵지 않습니다.

먼저 HTML5의 자이로스코프 이벤트에 대한 몇 가지 개념을 살펴보겠습니다.

자이로 이벤트는 deviceorientation，这里主要获取事件中的alpha,beta,gamma입니다.

aplha

모바일 기기를 가로로 놓았을 때 Z축을 중심으로 한 회전 각도로, 값 범위는 0도부터 360도까지입니다.

beta

모바일 기기를 가로로 놓았을 때 X축을 기준으로 회전 각도 값은 -180도 ~ 180도입니다.

gamma

모바일 기기를 가로로 놓았을 때 Z축을 중심으로 회전하는 각도 값은 -90도 ~ 90도입니다.

여기에서는 베타와 감마만 사용해야 합니다.

apk의 압축을 풀고 눈 자료를 얻으세요:

코드 구현

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Document</title>
  <style>
    #box{
      position: relative;
      width: 300px;
      margin: 0 auto;
    }

    #face{
      background-image: url(images/face.png);
      background-size: cover;
      width: 300px;
      height: 300px;
      position: absolute;
    }

    #eyeLeft{
      background-image: url(images/eye.png);
      background-size: cover;
      width: 40px;
      height: 40px;
      position: absolute;
      top: 90px;
      left: 100px;
    }

    #eyeRight{
      background-image: url(images/eye.png);
      background-size: cover;
      width: 40px;
      height: 40px;
      position: absolute;
      top: 90px;
      left: 190px;
    }

    #glass{
      background-image: url(images/glass.png);
      background-size: cover;
      width: 300px;
      height: 300px;
      position: absolute;
    }
  </style>
</head>
<body>
  <p id="box">
    <p id="face"></p>
    <p id="eyeLeft"></p>
    <p id="eyeRight"></p>
    <p id="glass"></p>
    <p id="log"></p>
  </p>
<script>
&#39;use strict&#39;;

/*
* author: 王乐平
* date:2017.7.17
*/

var eyeLeftPosition = {
  start: [70, 78],
  end: [100, 110]
};

var eyeRightPosition = {
  start: [150, 78],
  end: [190, 110]
};

var eyeLeftCenterPosition = {
  x: (eyeLeftPosition.end[0] - eyeLeftPosition.start[0]) / 2 + eyeLeftPosition.start[0],
  y: (eyeLeftPosition.end[1] - eyeLeftPosition.start[1]) / 2 + eyeLeftPosition.start[1]
};

var eyeRightCenterPosition = {
  x: (eyeRightPosition.end[0] - eyeRightPosition.start[0]) / 2 + eyeRightPosition.start[0],
  y: (eyeRightPosition.end[1] - eyeRightPosition.start[1]) / 2 + eyeRightPosition.start[1]
};

var r = 20;

var eyeLeft = document.querySelector(&#39;#eyeLeft&#39;);
var eyeRight = document.querySelector(&#39;#eyeRight&#39;);

if (window.DeviceOrientationEvent) {

  window.addEventListener(&#39;deviceorientation&#39;, function (event) {

    let {alpha, beta, gamma} = event;

    eyeLeft.style.left = eyeLeftCenterPosition.x + gamma / 90 * r + &#39;px&#39;;
    eyeRight.style.left = eyeRightCenterPosition.x + gamma / 90 * r + &#39;px&#39;;
    eyeLeft.style.top = eyeRight.style.top 
                      = eyeLeftCenterPosition.y + beta / 180 * r + &#39;px&#39;;

    eyeRight.style.transform = eyeLeft.style.transform 
                         = eyeRight.style.WebkitTransform 
                         = eyeLeft.style.WebkitTransform 
                         = &#39;rotate(&#39; + beta + &#39;deg)&#39;;
  }, false);
} else {
  document.querySelector(&#39;body&#39;).innerHTML = &#39;浏览器不支持DeviceOrientationEvent&#39;;
}
</script>
</body>
</html>

로그인 후 복사

최종 효과