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 相关文章推荐
javascript 闭包
Sep 15 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
简单了解vue.js数组的常用操作
Jun 17 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 Javascript
vue 子组件和父组件传值的示例
Sep 11 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
世界上第一台立体声收音机
2021/03/01 无线电
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
javascript使用activex控件的代码
2011/01/27 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
盘点提高 Python 代码效率的方法
2014/07/03 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
python版本五子棋的实现代码
2018/12/11 Python
python实现飞机大战游戏
2020/10/26 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
Python with语句和过程抽取思想
2019/12/23 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
HTML5新增加的功能详解
2016/09/05 HTML / CSS
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
销售冠军获奖感言
2014/02/03 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL