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获取url中指定参数值的示例代码
Dec 14 Javascript
js 通用订单代码
Dec 23 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
总结javascript三元运算符知识点
Sep 28 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
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 preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
JavaScript的类型简单说明
2010/09/03 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
django+mysql的使用示例
2018/11/23 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
英文求职信结束语大全
2013/10/26 职场文书
委托书的格式
2014/08/01 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
学校开学标语
2014/10/06 职场文书
幼师自荐信范文
2015/03/06 职场文书
高二英语教学反思
2016/03/03 职场文书
2019个人半年工作总结
2019/06/21 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers