先说一下用法:
<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'
- };
- }
- }
- },
上面是可以传的属性, 大家可以按照情况修改
最后:
这里我只写了简单的动画, 也可以根据不同情况进行修改, 从而达到想要的效果. 这里已经满足输入框错误抖动的效果了.
来源: https://www.cnblogs.com/zhangkunweb/p/vue_jitter.html