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 相关文章推荐
jquery api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
JS实现碰撞检测的方法分析
Jan 19 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 Javascript
如何开发一个渐进式Web应用程序PWA
May 10 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
PHP CURL获取cookies模拟登录的方法
2013/11/04 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
php绘制一条直线的方法
2015/01/24 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
Python Cookie 读取和保存方法
2018/12/28 Python
Python request使用方法及问题总结
2020/04/26 Python
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
文明青少年标兵事迹材料
2014/01/28 职场文书
预备党员表决心书
2014/03/11 职场文书
新党章的学习心得体会
2014/11/07 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
先进教师事迹材料
2014/12/16 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android