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


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

代码github : http://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, 从而修改子级透视效果





mounted() {

 // 如果要执行 z 轴动画需要设置父级，从而修改子级透视效果，否则 Z 轴没有效果

 if (this.range.z > 0) {

 const parentEl = this.$el.parentNode;

 Object.keys(this.perspectiveStyle).forEach((key) => {

  parentEl.style[key] = this.perspectiveStyle[key];

 });

 }

},





最后看看可以传的属性：





props: {

 // 抖动范围，单位是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, // 移动range中初始值的百分比

 },

 perspectiveStyle: {

 type: Object,

 default: () => {

  return {

  perspective: '300px',

  perspectiveOrigin: 'center center'

  };

 }

 }

},





上面是可以传的属性，大家可以按照情况修改

最后：

这里我只写了简单的动画，也可以根据不同情况进行修改，从而达到想要的效果。这里已经满足输入框错误抖动的效果了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。