vue图片动画上下跳动_Vue 让元素抖动/摆动起来的实现代码

先说一下用法：

这里是你要抖动的元素

思路：

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);