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 flash激活
Oct 19 Javascript
js 调整select 位置的函数
Feb 21 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
node内置调试方法总结
Feb 22 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 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 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
javascript URL编码和解码使用说明
2010/04/12 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
django ORM之values和annotate使用详解
2020/05/19 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
外语学院毕业生的自我鉴定
2013/11/28 职场文书
给同学的道歉信
2014/01/16 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
党员批评与自我批评
2014/10/15 职场文书
离婚案件上诉状
2015/05/23 职场文书