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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
layui弹出层效果实现代码
May 19 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 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批量检测并去除文件BOM头代码实例
2014/05/08 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
python实现将内容分行输出
2015/11/05 Python
python flask实现分页效果
2017/06/27 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
Python延时操作实现方法示例
2018/08/14 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
Python坐标线性插值应用实现
2019/11/13 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
工作睡觉检讨书
2014/02/25 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
大学运动会通讯稿
2015/07/18 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python