首先展示一下效果，狠狠点击
先说一下用法：
思路：
1.抖动就是摆动，现实中的钟摆可以很形象。
2.当摆动到临界点后，就会向相反的方向摆动。
3.在没有动力时，摆动会慢慢停止。
初始化抖动：
获取需要操作的的项 和 每次需要摆动的量
const { position,shiftNumber } = this.getPositionAndShiftNumber();
this.position = position;
this.shiftNumber = shiftNumber;
// 初始 move 起始点是0
this.move = { x: 0,z: 0 };
// 初始时 是顺时针
this.isClockwise = true;
// 执行动画
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,从而修改子级透视效果
0) {
const parentEl = this.$el.parentNode;
Object.keys(this.perspectiveStyle).forEach((key) => {
parentEl.style[key] = this.perspectiveStyle[key];
});
}
},
最后看看可以传的属性：
{ 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'
};
}
}
},
