Vue 让元素抖动/摆动起来

内容预览:
  • 首先展示一下效果,狠狠点击 https://zhangkunusergit.github.io/v...~
  • 执行动画: // 持续抖动continueJitter() { this.refreshMove(this.isCl...~
  • 修改元素位置: /** * 修改元素位置 * @param x * @param y * @param z ...~

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

代码github : https://github.com/zhangKunUserGit/vue-component

 转载请标注: https://www.cnblogs.com/zhangkunweb/p/vue_jitter.html

先说一下用法:

<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($px, $px, $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, 例如:
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'
};
}
}
},

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

最后:

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

 

以上就是:Vue 让元素抖动/摆动起来 的全部内容。

本站部分内容来源于互联网和用户投稿,如有侵权请联系我们删除,谢谢。
Email:[email protected]


0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论