Comment utiliser Vue pour implémenter des effets de tremblement de type WeChat

Comment utiliser Vue pour implémenter un effet de tremblement de type WeChat

Shake est un effet interactif dans WeChat, qui produit des effets aléatoires en secouant le téléphone. Dans cet article, nous utiliserons le framework Vue pour implémenter des effets spéciaux de type shake WeChat et donnerons des exemples de code spécifiques.

1. Préparation du projet
Tout d'abord, nous devons créer un projet Vue. Vous pouvez utiliser Vue CLI pour créer rapidement le projet. Ouvrez le terminal et exécutez la commande suivante pour installer Vue CLI :

npm install -g @vue/cli

Une fois l'installation terminée, exécutez la commande suivante pour créer un nouveau projet Vue :

vue create shake-effect

Entrez dans le projet. et démarrez le serveur de développement :

cd shake-effect
npm run serve

Deuxièmement, écrivez le code

1. Ajoutez un élément de page (App.vue)
   Dans le fichier App.vue du répertoire src, ajoutez le code suivant :

<template>
  <div class="container">
    <div class="phone" :class="{ shaking: shaking }">
      <div class="shake-text" v-if="shaking">
        摇一摇中...
      </div>
      <div class="shake-text" v-else>
        手机摇一摇，领红包
      </div>
      <div class="shake-btn" @click="handleShake">
        点击摇一摇
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shaking: false,
    };
  },
  methods: {
    handleShake() {
      this.shaking = true;
      setTimeout(() => {
        this.shaking = false;
        // 在此处添加摇一摇后的逻辑处理
      }, 1000);
    },
  },
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.phone {
  width: 200px;
  height: 300px;
  background-color: #ddd;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.shake-text {
  font-size: 16px;
  margin-top: 20px;
}

.shake-btn {
  margin-top: 30px;
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
}

.shaking {
  animation: shake 1s infinite;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}
</style>

2. Ajoutez un effet de shake (main.js)
   Dans Dans le fichier main.js sous le répertoire src, introduisez le code suivant :

Vue.config.productionTip = false;

if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler, false);
}

let SHAKE_THRESHOLD = 1000;
let last_update = 0;
let x, y, z, last_x, last_y, last_z;

function deviceMotionHandler(eventData) {
  let acceleration = eventData.accelerationIncludingGravity;
  let curTime = new Date().getTime();

  if (curTime - last_update > 100) {
    let diffTime = curTime - last_update;
    last_update = curTime;

    x = acceleration.x;
    y = acceleration.y;
    z = acceleration.z;

    let speed =
      (Math.abs(x + y + z - last_x - last_y - last_z) / diffTime) * 10000;

    if (speed > SHAKE_THRESHOLD) {
      // 在此处添加摇一摇后的逻辑处理
      alert('摇一摇！');
    }

    last_x = x;
    last_y = y;
    last_z = z;
  }
}

new Vue({
  render: (h) => h(App),
}).$mount('#app');

3. Testez l'effet
Exécutez la commande suivante dans le terminal pour démarrer le serveur de développement et visitez localhost : 8080 dans le navigateur pour vérifier l'effet :

npm run serve

Ouvrez la page dans le navigateur mobile et cliquez sur le bouton "Cliquez pour secouer". Lorsque le téléphone est secoué, l'effet de secousse sera déclenché et "Secouer !" dans la fenêtre contextuelle.

4. Résumé
Grâce aux étapes ci-dessus, nous avons utilisé avec succès le framework Vue pour obtenir les effets spéciaux d'imitation du shake WeChat. Dans le code, nous utilisons les fonctions de liaison de données et de liaison d'événements de Vue pour obtenir l'effet interactif de la page, tout en obtenant l'effet de tremblement en surveillant les changements d'accélération du téléphone mobile.

J'espère que cet article pourra vous aider. Si vous avez des questions ou des problèmes, n'hésitez pas à communiquer et à discuter.

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!