HTML5陀螺儀實(shí)現(xiàn)移動(dòng)動(dòng)畫效果的方法

這篇文章主要介紹HTML5陀螺儀實(shí)現(xiàn)移動(dòng)動(dòng)畫效果的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)憑借專業(yè)的設(shè)計(jì)團(tuán)隊(duì)扎實(shí)的技術(shù)支持、優(yōu)質(zhì)高效的服務(wù)意識(shí)和豐厚的資源優(yōu)勢(shì)，提供專業(yè)的網(wǎng)站策劃、網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)站優(yōu)化、軟件開(kāi)發(fā)、網(wǎng)站改版等服務(wù)，在成都十載的網(wǎng)站建設(shè)設(shè)計(jì)經(jīng)驗(yàn)，為成都近千家中小型企業(yè)策劃設(shè)計(jì)了網(wǎng)站。

ofo眼睛效果

HTML5陀螺儀實(shí)現(xiàn)移動(dòng)動(dòng)畫效果的方法

效果分析

從效果中不難看出，是使用陀螺儀事件實(shí)現(xiàn)的。

這里先來(lái)看一下HTML5中陀螺儀事件的一些概念。

陀螺儀事件為deviceorientation，這里主要獲取事件中的alpha,beta,gamma。

aplha

行動(dòng)裝置水平放置時(shí)，繞 Z 軸旋轉(zhuǎn)的角度，數(shù)值為 0 度到 360 度。

HTML5陀螺儀實(shí)現(xiàn)移動(dòng)動(dòng)畫效果的方法

beta

行動(dòng)裝置水平放置時(shí)，繞 X 軸旋轉(zhuǎn)的角度，數(shù)值為 -180 度到 180 度。

HTML5陀螺儀實(shí)現(xiàn)移動(dòng)動(dòng)畫效果的方法

gamma

行動(dòng)裝置水平放置時(shí)，繞 Z 軸旋轉(zhuǎn)的角度，數(shù)值為 -90 度到 90 度。

HTML5陀螺儀實(shí)現(xiàn)移動(dòng)動(dòng)畫效果的方法

這里，只需要用到beta和gamma。

將apk解壓，得到眼睛素材：

HTML5陀螺儀實(shí)現(xiàn)移動(dòng)動(dòng)畫效果的方法

代碼實(shí)現(xiàn)

<!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>
'use strict';
/*
* author: 王樂(lè)平
* 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('#eyeLeft');
var eyeRight = document.querySelector('#eyeRight');
if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', function (event) {
    let {alpha, beta, gamma} = event;
    eyeLeft.style.left = eyeLeftCenterPosition.x + gamma / 90 * r + 'px';
    eyeRight.style.left = eyeRightCenterPosition.x + gamma / 90 * r + 'px';
    eyeLeft.style.top = eyeRight.style.top 
                      = eyeLeftCenterPosition.y + beta / 180 * r + 'px';
    eyeRight.style.transform = eyeLeft.style.transform 
                         = eyeRight.style.WebkitTransform 
                         = eyeLeft.style.WebkitTransform 
                         = 'rotate(' + beta + 'deg)';
  }, false);
} else {
  document.querySelector('body').innerHTML = '瀏覽器不支持DeviceOrientationEvent';
}
</script>
</body>
</html>

最終效果

HTML5陀螺儀實(shí)現(xiàn)移動(dòng)動(dòng)畫效果的方法

以上是HTML5陀螺儀實(shí)現(xiàn)移動(dòng)動(dòng)畫效果的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：HTML5陀螺儀實(shí)現(xiàn)移動(dòng)動(dòng)畫效果的方法
分享地址：http://bm7419.com/article24/goejje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、微信公眾號(hào)、用戶體驗(yàn)、關(guān)鍵詞優(yōu)化、網(wǎng)站制作、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)