Vue 让元素抖动/摆动起来的实现代码

网络编程 2024/11/13 佚名

3 2 1

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

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

先说一下用法：

<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 "htmlcode">

/**
 * 修改元素位置
 * @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'
  };
 }
 }
},



上面是可以传的属性，大家可以按照情况修改
最后：
这里我只写了简单的动画，也可以根据不同情况进行修改，从而达到想要的效果。这里已经满足输入框错误抖动的效果了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。