Implémentation d'effets d'animation en mouvement basés sur le gyroscope HTML5-Tutoriel H5-php.cn

Implémentation d'effets d'animation en mouvement basés sur le gyroscope HTML5

php中世界最好的语言

Libérer： 2018-03-26 17:37:41

original

8493 Les gens l'ont consulté

Cette fois, je vais vous présenter la mise en œuvre d'effets d'animation en mouvement basés sur le gyroscope HTML5. Quelles sont les précautions pour la mise en œuvre d'effets d'animation en mouvement basés sur le gyroscope HTML5. Ce qui suit est un cas pratique, prenons. un regard.

Lorsque j'utilisais l'application ofo minion récemment, j'ai découvert que lorsque je faisais glisser le balayage ci-dessous, il se transformait en un serviteur avec des yeux mobiles. J'ai trouvé que c'était assez intéressant. Ici, j'utilise HTML5 pour imiter l'effet. .

effet yeux ofo

Analyse de l'effet

Il n'est pas difficile de voir à l'effet que cela est obtenu à l'aide d'événements gyroscopiques.

Ici, nous examinons d'abord quelques concepts d'événements gyroscopiques en HTML5.

L'événement gyroscope est deviceorientation Ici, nous obtenons principalement les alpha, beta, gamma dans l'événement.

aplha

L'angle de rotation autour de l'axe Z lorsque l'appareil mobile est placé horizontalement, allant de 0 à 360 degrés.

bêta

L'angle de rotation autour de l'axe X lorsque l'appareil mobile est placé horizontalement, allant de -180 degrés à 180 degrés.

gamma

L'angle de rotation autour de l'axe Z lorsque l'appareil mobile est placé horizontalement, allant de -90 degrés à 90 degrés.

Ici, seuls les bêta et gamma doivent être utilisés.

Décompressez l'apk et obtenez le matériel pour les yeux :

Implémentation du code

<!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>

Copier après la connexion

Effet final

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

API glisser-déposer H5 pour le tri par glisser-déposer

Comment gérer l'incompatibilité d'IE8 avec rgba()

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!