Cara menggunakan Vue untuk melaksanakan kesan goncang seperti WeChat

Cara menggunakan Vue untuk melaksanakan kesan goncangan seperti WeChat

Shake ialah kesan interaktif dalam WeChat, yang menghasilkan kesan rawak dengan menggoncang telefon. Dalam artikel ini, kami akan menggunakan rangka kerja Vue untuk melaksanakan kesan khas seperti goncang WeChat dan memberikan contoh kod khusus.

1. Penyediaan projek
Pertama, kita perlu membuat projek Vue. Anda boleh menggunakan Vue CLI untuk membina projek dengan cepat Buka terminal dan laksanakan arahan berikut untuk memasang Vue CLI:

npm install -g @vue/cli

Selepas pemasangan selesai, laksanakan arahan berikut untuk mencipta projek Vue baharu:

vue create shake-effect

Masukkan projek. direktori dan mulakan pelayan pembangunan:

cd shake-effect
npm run serve

Kedua, tulis kod

1. Tambah elemen halaman (App.vue)
   Dalam fail App.vue dalam direktori src, tambah kod berikut:

<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. Tambah kesan goncang (main.js)
   Dalam fail main.js di bawah direktori src, perkenalkan kod berikut:

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. Uji kesan
Jalankan arahan berikut dalam terminal untuk memulakan pelayan pembangunan, dan lawati localhost: 8080 dalam penyemak imbas untuk menyemak kesan:

npm run serve

Buka halaman dalam penyemak imbas mudah alih dan klik butang "Klik untuk goncang" Apabila telefon digoncang, kesan gegaran akan dicetuskan, dan "Goncang!" dalam tetingkap pop timbul.

4. Ringkasan
Melalui langkah di atas, kami berjaya menggunakan rangka kerja Vue untuk mencapai kesan khas meniru WeChat shake. Dalam kod tersebut, kami menggunakan fungsi pengikatan data dan pengikatan peristiwa Vue untuk mencapai kesan interaktif halaman, dan pada masa yang sama mencapai kesan gegaran dengan memantau perubahan pecutan telefon mudah alih.

Saya harap artikel ini dapat membantu anda Jika anda mempunyai sebarang pertanyaan atau masalah, sila hubungi dan berbincang.

Atas ialah kandungan terperinci Cara menggunakan Vue untuk melaksanakan kesan goncang seperti WeChat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!