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


Posted in Javascript onMay 31, 2018

首先展示一下效果,狠狠点击 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 ? -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'
  };
 }
 }
},

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

最后:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个符号插入器 中用到的js代码
Sep 04 Javascript
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
对node.js中render和send的用法详解
May 14 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 #Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 #jQuery
Vue2.0 实现移动端图片上传功能
May 30 #Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 #jQuery
Javascript获取某个月的天数
May 30 #Javascript
JS实现键值对遍历json数组功能示例
May 30 #Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 #Javascript
You might like
用php和MySql来与ODBC数据连接
2006/10/09 PHP
怎样去阅读一份php源代码
2009/08/21 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
python数据结构树和二叉树简介
2014/04/29 Python
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
Python中turtle作图示例
2017/11/15 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
Python测试人员需要掌握的知识
2018/02/08 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
百度软件工程师职位
2013/02/14 面试题
商务英语毕业生自荐信范文
2013/11/08 职场文书
物流司机岗位职责
2013/12/28 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
事业单位考察材料范文
2014/12/25 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
python glom模块的使用简介
2021/04/13 Python