vue 动画 抖动效果_如果在vue中实现一个输入框的抖动效果？

1. 先来理下思路？

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

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

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

2.用法：

:start.sync 里面是抖动器名字(不同name), :range ={包含x,y, z}

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

},

4.执行动画：

// 持续抖动

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

},

5.修改元素位置：

jitterView({ x = 0, y = 0, z = 0 }) {

this.$el.style.transform = translate3d(${x}px, ${y}px, ${z}px);

},

6.需要时，必须给当前元素的父级添加 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];

});

}

},

7.传入的属性

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'

};

}

}

},