Vue 让元素抖动/摆动起来的实现代码

首先展示一下效果，狠狠点击 https://zhangkunusergit.github.io/vue-component/dist/jitter.html

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

先说一下用法：

<jitter :start.sync="抖动控制器" :range="{ 包含x,y, z }" :shift-percent="0.1"> 这里是你要抖动的元素</jitter>

思路：

1.抖动就是摆动，现实中的钟摆可以很形象。

2.当摆动到临界点后，就会向相反的方向摆动。

3.在没有动力时，摆动会慢慢停止。

初始化抖动：

/** * 初始化抖动 */initJitter() { // 把start变成false， 方便下次点击 this.$emit('update:start', false); // 清除上次动画 this.clearAnimate(); // 设置currentRange, 填充this.range 中没有的项 this.currentRange = Object.assign({}, { x: 0, y: 0, z: 0 }, this.range); // 获取需要操作的的项 和 每次需要摆动的量 const { position, shiftNumber } = this.getPositionAndShiftNumber(); this.position = position; this.shiftNumber = shiftNumber; // 初始 move 起始点是0 this.move = { x: 0, y: 0, z: 0 }; // 初始时 是顺时针 this.isClockwise = true; // 执行动画 this.timer = window.requestAnimationFrame(this.continueJitter);},

这里准备动画开始前的工作。

执行动画：

// 持续抖动continueJitter() { this.refreshMove(this.isClockwise ? -1 : 1); // 绝对值 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]; // 判断是否到达临界值，到达后 应该反方向执行动画 if (currentRange[p] <= absMove[p]) {  // 等比例缩减  this.currentRange[p] -= this.shiftNumber[p];  // 判断如果已经无力再摆动，就让摆动停止, 只要有一个值达到了0，所有都会达到  if (this.currentRange[p] <= 0) {  // 停止在起始点上  this.jitterView({ x: 0, y: 0, z: 0 });  // 清除动画  this.clearAnimate();  return;  }  // 更新move为临界点  this.move[p] = this.isClockwise ? -this.currentRange[p] : this.currentRange[p];  // 改变摆动方向  changeDirection = true; } } if (changeDirection) { // 摆动方向取反 this.isClockwise = !this.isClockwise; } // 更新元素位置 this.jitterView(this.move); // 继续执行动画 this.timer = window.requestAnimationFrame(this.continueJitter);},

执行动画，当判断已经无力摆动后，让元素回归到原来的位置，并清除动画。

修改元素位置：

/** * 修改元素位置 * @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 轴摆动吗？ 当需要时，必须给当前元素的父级添加 perspective, 从而修改子级透视效果