快捷導(dǎo)航

Vue 讓元素抖動(dòng)/擺動(dòng)起來的實(shí)現(xiàn)代碼

更新時(shí)間：2018年05月31日 08:28:34 作者：zhanglearning

這篇文章主要介紹了Vue 讓元素抖動(dòng)/擺動(dòng)起來的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

首先展示一下效果，狠狠點(diǎn)擊 https://zhangkunusergit.github.io/vue-component/dist/jitter.html

代碼github : https://github.com/zhangKunUserGit/vue-component

先說一下用法：

<jitter :start.sync="抖動(dòng)控制器" :range="{ 包含x,y, z }" :shift-percent="0.1">
 這里是你要抖動(dòng)的元素
</jitter>

思路：

1.抖動(dòng)就是擺動(dòng)，現(xiàn)實(shí)中的鐘擺可以很形象。

2.當(dāng)擺動(dòng)到臨界點(diǎn)后，就會(huì)向相反的方向擺動(dòng)。

3.在沒有動(dòng)力時(shí)，擺動(dòng)會(huì)慢慢停止。

初始化抖動(dòng)：

/**
 * 初始化抖動(dòng)
 */
initJitter() {
 // 把start變成false， 方便下次點(diǎn)擊
 this.$emit('update:start', false);
 // 清除上次動(dòng)畫
 this.clearAnimate();
 // 設(shè)置currentRange, 填充this.range 中沒有的項(xiàng)
 this.currentRange = Object.assign({}, { x: 0, y: 0, z: 0 }, this.range);
 // 獲取需要操作的的項(xiàng) 和 每次需要擺動(dòng)的量
 const { position, shiftNumber } = this.getPositionAndShiftNumber();
 this.position = position;
 this.shiftNumber = shiftNumber;
 // 初始 move 起始點(diǎn)是0
 this.move = { x: 0, y: 0, z: 0 };
 // 初始時(shí) 是順時(shí)針
 this.isClockwise = true;
 // 執(zhí)行動(dòng)畫
 this.timer = window.requestAnimationFrame(this.continueJitter);
},

這里準(zhǔn)備動(dòng)畫開始前的工作。

執(zhí)行動(dòng)畫：

// 持續(xù)抖動(dòng)
continueJitter() {
 this.refreshMove(this.isClockwise ? -1 : 1);
 // 絕對(duì)值
 const absMove = this.getAbsMove();
 const currentRange = this.currentRange;
 let changeDirection = false;
 for (let i = 0, l = this.position.length, p; i < l; i += 1) {
 p = this.position[i];
 // 判斷是否到達(dá)臨界值，到達(dá)后 應(yīng)該反方向執(zhí)行動(dòng)畫
 if (currentRange[p] <= absMove[p]) {
  // 等比例縮減
  this.currentRange[p] -= this.shiftNumber[p];
  // 判斷如果已經(jīng)無力再擺動(dòng)，就讓擺動(dòng)停止, 只要有一個(gè)值達(dá)到了0，所有都會(huì)達(dá)到
  if (this.currentRange[p] <= 0) {
  // 停止在起始點(diǎn)上
  this.jitterView({ x: 0, y: 0, z: 0 });
  // 清除動(dòng)畫
  this.clearAnimate();
  return;
  }
  // 更新move為臨界點(diǎn)
  this.move[p] = this.isClockwise ? -this.currentRange[p] : this.currentRange[p];
  // 改變擺動(dòng)方向
  changeDirection = true;
 }
 }
 if (changeDirection) {
 // 擺動(dòng)方向取反
 this.isClockwise = !this.isClockwise;
 }
 // 更新元素位置
 this.jitterView(this.move);
 // 繼續(xù)執(zhí)行動(dòng)畫
 this.timer = window.requestAnimationFrame(this.continueJitter);
},

執(zhí)行動(dòng)畫，當(dāng)判斷已經(jīng)無力擺動(dòng)后，讓元素回歸到原來的位置，并清除動(dòng)畫。

修改元素位置：

/**
 * 修改元素位置
 * @param x
 * @param y
 * @param z
 */
jitterView({ x = 0, y = 0, z = 0 }) {
 this.$el.style.transform = `translate3d(${x}px, ${y}px, ${z}px)`;
},

這里需要判斷需要 Z 軸擺動(dòng)嗎？當(dāng)需要時(shí)，必須給當(dāng)前元素的父級(jí)添加 perspective, 從而修改子級(jí)透視效果

mounted() {
 // 如果要執(zhí)行 z 軸動(dòng)畫需要設(shè)置父級(jí)，從而修改子級(jí)透視效果，否則 Z 軸沒有效果
 if (this.range.z > 0) {
 const parentEl = this.$el.parentNode;
 Object.keys(this.perspectiveStyle).forEach((key) => {
  parentEl.style[key] = this.perspectiveStyle[key];
 });
 }
},

最后看看可以傳的屬性：

props: {
 // 抖動(dòng)范圍，單位是px, 例如：{x: 4, y: 2, z: 10}
 range: {
 type: Object,
 default: () => { return { z: 8 }; },
 },
 start: {
 type: Boolean,
 required: true,
 },
 shiftPercent: {
 type: Number,
 default: 0.1, // 移動(dòng)range中初始值的百分比
 },
 perspectiveStyle: {
 type: Object,
 default: () => {
  return {
  perspective: '300px',
  perspectiveOrigin: 'center center'
  };
 }
 }
},

上面是可以傳的屬性，大家可以按照情況修改

最后：

這里我只寫了簡(jiǎn)單的動(dòng)畫，也可以根據(jù)不同情況進(jìn)行修改，從而達(dá)到想要的效果。這里已經(jīng)滿足輸入框錯(cuò)誤抖動(dòng)的效果了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: