How to use Vue to implement WeChat-like shake effects

How to use Vue to implement WeChat-like shake effects

Shake is an interactive effect in WeChat, which produces random effects by shaking the phone. In this article, we will use the Vue framework to implement WeChat shake-like special effects and give specific code examples.

1. Project preparation
First, we need to create a Vue project. You can use Vue CLI to quickly build the project. Open the terminal and execute the following command to install Vue CLI:

npm install -g @vue/cli

After the installation is complete, execute the following command to create a new Vue project:

vue create shake-effect

Enter Project directory and start the development server:

cd shake-effect
npm run serve

2. Write code

1. Add page element (App.vue)
   In the App.vue file in the src directory, add The following code:

<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. Add a shake effect (main.js)
   In the main.js file in the src directory, introduce the following code:

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. Test effect
Execute the following command in the terminal to start the development server, and visit localhost:8080 in the browser to check the effect:

npm run serve

Open the page in the mobile browser, Click the "Click to shake" button, and the shake effect will be triggered when the phone is shaken, and "Shake!" will be displayed in the pop-up window.

4. Summary
Through the above steps, we successfully used the Vue framework to achieve the special effects of imitating WeChat shake. In the code, we use Vue's data binding and event binding functions to achieve the interactive effect of the page, and at the same time achieve the shake effect by monitoring the acceleration changes of the mobile phone.

I hope this article can help you. If you have any questions or problems, please feel free to communicate and discuss.

The above is the detailed content of How to use Vue to implement WeChat-like shake effects. For more information, please follow other related articles on the PHP Chinese website!