前面的话

  在运动系列中,前面分别介绍了匀速运动变速运动曲线运动。下面介绍一种特殊的运动形式——抖动

原理介绍

  抖动其实是往复运动的一种特殊形式,只不过往复运动是一种无摩擦力的无限运动,且以速度为参照依据;而抖动以位置作为参照依据,最终停在起始点

  在网页中最常见的一种抖动效果应该是窗口抖动提示了

  抖动元素从起始点开始,先向右移动最大距离len,然后移动到对称的左边位置;然后再向右移动稍微小一点的距离,再移动到对称的左边位置;以此循环,最终元素停止在起始点

代码实现

  抖动在代码实现上,无非就是通过定时器,每隔一段时间让left或top值进行变化

  在运动实现中,有两种距离变化的思路

思路一

div.style.left = div.offsetLeft + value;

  每次都获取元素的当前样式,再与变化的value值进行运算

思路二

left = div.offsetLeft;
......
div.style.left = left + value;

  在定时器开启之前,获取元素的初始样式,再与变化的value值进行运算

  从抖动实现上来说,使用第二种方法,把距离变化完全交给value值变化来实现较为简单

  所以,代码实现的关键就是了解value是如何变化的

  假设最远距离为目标target,同方向的距离间隔为步长step。如果用数字更直观的表示,value的值类似于4、-4、2、-2、0。所以还需要一个变量dir来控制起始抖动方向,定时器每运动一次都要对dir进行更改

//定时器开启前的变量声明
dir = 1;
step = 0;
left = div.offsetLeft
//定时器里面的代码
value = dir*(target - step);
if(step >= target){
step = target
}
div.style.left = left + value + 'px';
if(dir === -1){
step++;
}
dir = -dir;

  将抖动效果封装为shakeMove.js

function getCSS(obj,style){
if(window.getComputedStyle){
return getComputedStyle(obj)[style];
}
return obj.currentStyle[style];
}
function shakeMove(json){
//声明要进行抖动的元素
var obj = json.obj;
//声明元素抖动的最远距离
var target = json.target;
//默认值为20
target = Number(target) || 20;
//声明元素的变化样式
var attr = json.attr;
//默认为'left'
attr = attr || 'left';
//声明元素的起始抖动方向
var dir = json.dir;
//默认为'1',表示开始先向右抖动
dir = Number(dir) || '1';
//声明元素每次抖动的变化幅度
var stepValue = json.stepValue;
stepValue = Number(stepValue) || 2;
//声明回调函数
var fn = json.fn;
//声明步长step
var step = 0;
//保存样式初始值
var attrValue = parseFloat(getCSS(obj,attr));
//声明参照值value
var value;
//清除定时器
if(obj.timer){return;}
//开启定时器
obj.timer = setInterval(function(){
//抖动核心代码
value = dir*(target - step);
//当步长值大于等于最大距离值target时
if(step >= target){
step = target
}
//更新样式值
obj.style[attr] = attrValue + value + 'px';
//当元素到达起始点时,停止定时器
if(step == target){
clearInterval(obj.timer);
obj.timer = 0;
//设置回调函数
fn && fn.call(obj);
}
//如果此时为反向运动,则步长值变化
if(dir === -1){
step = step + stepValue;
}
//改变方向
dir = -dir; },50);
}

实例应用

  下面利用封装的shakeMove来实现一些简单的抖动应用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.test{
height: 50px;
width: 50px;
position: absolute;
top: 50px;
}
</style>
</head>
<body>
<div id="box">
<div class="test" style="left:10px;background:lightblue"></div>
<div class="test" style="left:70px;background:lightgreen"></div>
<div class="test" style="left:130px;background:pink"></div>
<div class="test" style="left:190px;background:lightcoral"></div>
<div class="test" style="left:250px;background:orange"></div>
</div>
<script src="http://files.cnblogs.com/files/xiaohuochai/shakeMove.js"></script>
<script>
var aDiv = box.getElementsByTagName('div');
for(var i = 0; i < aDiv.length; i++){
aDiv[i].onmouseover = function(){
shakeMove({obj:this,attr:'top'});
}
}
</script>
</body>
</html>

javascript运动系列第四篇——抖动的更多相关文章

  1. 深入理解javascript作用域系列第四篇——块作用域

    × 目录 [1]let [2]const [3]try 前面的话 尽管函数作用域是最常见的作用域单元,也是现行大多数javascript最普遍的设计方法,但其他类型的作用域单元也是存在的,并且通过使用 ...

  2. 深入理解javascript作用域系列第四篇

    前面的话 尽管函数作用域是最常见的作用域单元,也是现行大多数javascript最普遍的设计方法,但其他类型的作用域单元也是存在的,并且通过使用其他类型的作用域单元甚至可以实现维护起来更加优秀.简洁的 ...

  3. javascript运动系列第八篇——碰壁运动

    × 目录 [1]匀速碰壁 [2]自由落体 [3]投掷碰壁[4]拖拽碰壁 前面的话 碰撞运动可能是运动系列里面比较复杂的运动了.碰撞可以分为碰壁和互碰两种形式,而碰撞前后的运动形式也可以分为变速和匀速两 ...

  4. javascript运动系列第三篇——曲线运动

    × 目录 [1]圆周运动[2]三维圆周 [3]钟摆运动 [4]抛物线[5]流体运动 前面的话 上一篇介绍了变速运动,但只实现了直线运动.如果元素的left和top同时运动,并遵循不同的曲线公式,则会进 ...

  5. javascript面向对象系列第四篇——选项卡的实现

    前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡. ...

  6. javascript运动系列第六篇——轨迹和投掷

    × 目录 [1]运动轨迹 [2]拖拽轨迹 [3]投掷 前面的话 一般地,不同的运动形式会产生不同的轨迹.但仅凭肉眼去识别运动轨迹,其实并不是很直观.因此,在页面中显示运动轨迹,是一个重要的问题.物体初 ...

  7. javascript运动系列第五篇——缓冲运动和弹性运动

    × 目录 [1]缓冲运动 [2]弹性运动 [3]距离分析[4]步长分析[5]弹性过界[6]弹性菜单[7]弹性拖拽 前面的话 缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点.而弹性运动同样是 ...

  8. javascript动画系列第四篇——拖拽改变元素大小

    × 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...

  9. javascript运动系列第七篇——鼠标跟随运动

    × 目录 [1]眼球转动 [2]苹果菜单[3]方向跟随 前面的话 运动除了直线运动和曲线运动两种运动形式外,还有一种运动形式是鼠标跟随运动,而这种跟随运动需要用到三角函数的相关内容或者需要进行比例运算 ...

随机推荐

  1. Uboot+Linux启动时间优化

    动机 设备启动时间往往是项目立项时的一项重要技术指标.快速的启动时间意味着设备宕机时间的缩短,系统的快速恢复,也能改善用户使用时的体验感受,是一项重要的市场竞争力. 准备 优化启动时间之前,我们首先要 ...

  2. JS 中 Array.slice() 和 Array.splice()方法

    slice slice()就是对应String的substring()版本,它截取Array的部分元素,然后返回一个新的Array: var arr = ['A', 'B', 'C', 'D', 'E ...

  3. 在mvc里面有htmlhelper方法,在webform里面有什么?

    终于是找到原来在webform里面已经提供了htmlcontrol这样的控件,可以直接拿来用.以前一直在想mvc有htmlhelper,webform里面不能用,其实是webform里面已经有了. 例 ...

  4. 为什么我如此热爱这样一个比赛(转自vici)

    为什么我如此的热爱这样一个比赛呢?因为它总能带给我一个目标,让我去努力实现它.因为可以看到胜利的希望,于是不断的去追逐.虽然其中的过程可能是比较艰辛的.   对于天才选手,作为天生的冠军,大概凭借天赋 ...

  5. OpenGL Insights 阅读有感 - Tile Based架构下的性能调校 翻译

    Performance Tunning for Tile-Based Architecture Tile-Based架构下的性能调校 by Bruce Merry GameKnife译 译序 在大概1 ...

  6. 关于learntorank http://qiita.com/rockhopper/items/bb3d46f01df5f6499123

    一.数据转换 如何对于训练数据做pairwise的transform,比如你原始数据是要么点击要么不点击,如何对这些样本数据做pairwise的transform? 下面的方法主要是做组合的方法,就是 ...

  7. MAC显示文件夹路径

    MAC显示文件夹路径 终端命令 1.显示路径:defaults write com.apple.finder _FXShowPosixPathInTitle -bool TRUE;killall Fi ...

  8. Unity3D 模型导入Error

    在导入3d max模型的时候报错: 3ds Max could not be found.Make sure that 3ds Max is installed and the max file ha ...

  9. 一张图解释SQL Server集群、镜像、复制、日志传送

    一张图解释SQL Server集群.镜像.复制.日志传送 本文版权归作者所有,未经作者同意不得转载.

  10. Dropbox创造共享新思维——Datastore API

    7月9日,第一届Dropbox开发者大会上,Dropbox发布了Datastore API的beta版本,通过这个API,原始的结构化数据可以在多个设备间的Dropbox内同步.CEO Drew Ho ...