最新公告
  • 欢迎您光临立业阁,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 基于HTML5陀螺仪实现移动动画效果_html5教程


    这次给大家带来基于HTML5陀螺仪实现移动动画效果,基于HTML5陀螺仪实现移动动画效果的注意事项有哪些,下面就是实战案例,一起来看一下。

    最近用ofo小黄车App的时候,发现以前下方扫一扫变成了一个眼睛动的小黄人,觉得蛮有意思的,这里用HTML5仿一下效果。

    ofo眼睛效果

    效果分析

    从效果中不难看出,是使用陀螺仪事件实现的。

    这里先来看一下HTML5中陀螺仪事件的一些概念。

    陀螺仪事件为deviceorientation,这里主要获取事件中的alpha,beta,gamma

    aplha

    行动装置水平放置时,绕 Z 轴旋转的角度,数值为 0 度到 360 度。

    beta

    行动装置水平放置时,绕 X 轴旋转的角度,数值为 -180 度到 180 度。

    gamma

    行动装置水平放置时,绕 Z 轴旋转的角度,数值为 -90 度到 90 度。

    这里,只需要用到beta和gamma。

    将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>
    'use strict';
    /*
    * 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('#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>

    最终效果

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    H5拖放API进行拖放排序

    IE8不兼容rgba()如何处理

    以上就是基于HTML5陀螺仪实现移动动画效果的详细内容,

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    • 969会员总数(位)
    • 111831资源总数(个)
    • 3本周发布(个)
    • 0 今日发布(个)
    • 202稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    冀ICP备19022365号-1 百度地图

    侵权联系邮箱[email protected]

    立业阁(www.liyege.cn)免费提供wordpress主题模板、dedecms模板、帝国cms模板、小说网站源码、电影网站源码以及网络技术分享,建站源码,小说模板,电影模板,网赚教程,VPS推荐