JS弹性运动实现方法分析


Posted in Javascript onDecember 15, 2016

本文实例分析了JS弹性运动实现方法。分享给大家供大家参考,具体如下:

描述:像弹簧一样左右弹动,最后缓慢停下来

一、加减速运动

1.加速运动

var iSpeed=0;
iSpeed++;

速度越来越快,最后冲出去

2.减速运动

var iSpeed=20;
iSpeed--;

速度越来越慢,降到0后开始变负值往反方向运动

二、弹性运动

1.在目标点左边,加速;目标点右边,减速,如

if(div1.offsetLeft<300){
 iSpeed=iSpeed+1;  //等同iSpeed++;
}
else{
 iSpeed=iSpeed-1;
}

这是最简单的弹性运动,缺陷:加速度恒定(应该根据松紧带而变)

if(div1.offsetLeft<300){
 iSpeed=iSpeed+(300-div1.offsetLeft)/50; 
}
else{
 iSpeed=iSpeed-(div1.offsetLeft-300)/50;
}
iSpeed=iSpeed+(300-div1.offsetLeft)/50; ==>iSpeed=iSpeed+300/50-div1.offsetLeft/50;
iSpeed=iSpeed-(div1.offsetLeft-300)/50; ==>iSpeed=iSpeed-div1.offsetLeft/50+300/50;

这两个完全一样 所以不需要if/else

iSpeed+=(300-div1.offsetLeft)/50; 
div1.style.left=div1.offsetLeft+iSpeed+'px';

缺陷2:不会停下来(缺少摩擦力)

iSpeed+=(300-div1.offsetLeft)/50; 
iSpeed*=0.95; //乘一个小数,越来越小
div1.style.left=div1.offsetLeft+iSpeed+'px';

三、带摩擦力的弹性运动

比较好的组合

iSpeed+=(300-div1.offsetLeft)/5; 
iSpeed*=0.7;

注:var iSpeed=0;要放在定时器外面,不然每次都从0开始,加啊乘啊就没用了

四、整合好的弹性运动框架

var iSpeed=0;
var left=0;
function startMove(obj,iTarget){
 clearInterval(obj.timer);
 obj.timer=setInterval(function(){
  iSpeed+=(iTarget-obj.offsetLeft)/5;
  iSpeed*=0.7;  //计算出来的速度是一个小数,如果给它取整,会一直左右移动
  left+=iSpeed;  //把速度存在变量里,变量是可以有小数的
  if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){ //因为iSpeed和left都是小数,所以永远达不到0和目标点,只能无限接近
   clearInterval(obj.timer);  //虽然速度最后接近于0,看似运动停止了,但定时器还一直开着,所以当速度=0并且到达目标点,关掉(只是速度=0关掉,运动到最右边准备回来那一刹那,速度=0,同理只是到达目标点关掉,一开始往右运动经过中间时会达到目标点,所以必须两者同时满足)
   obj.style.left=iTarget+'px'; //小数无法完全贴合,所以最后直接让他等于目标点,一般人肉眼看不出来
  }
  else{
   obj.style.left=left+'px';  //style.left只能是一个整数,所以每次会把小数抹掉,误差是累计的,最终累加起来就会有1-2像素,用obj.offsetLeft+iSpeed就会无法完全贴合
  }
 },30);
};

五、弹性运动不适用的地方

样式会过界的

比如高度,先变大后变小,如果物体本身高度很小,可能会变成负值,就不对了

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
预加载css或javascript的js代码
Apr 23 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
JS实现网页端猜数字小游戏
Mar 06 Javascript
JS经典正则表达式笔试题汇总
Dec 15 #Javascript
javascript中闭包概念与用法深入理解
Dec 15 #Javascript
javascript读取文本节点方法小结
Dec 15 #Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 #Javascript
jQuery validate插件功能与用法详解
Dec 15 #Javascript
EditPlus 正则表达式 实战(3)
Dec 15 #Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 #Javascript
You might like
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
php桌面中心(四) 数据显示
2007/03/11 PHP
php 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
node.js require() 源码解读
2015/12/13 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
浅析Ajax语法
2016/12/05 Javascript
Vue实现购物车功能
2017/04/27 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
对于Python装饰器使用的一些建议
2015/06/03 Python
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
Python内置异常类型全面汇总
2020/05/28 Python
如何编写python的daemon程序
2021/01/07 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
元旦联欢会感言
2014/03/04 职场文书
七一讲话心得体会
2014/09/05 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
小学生暑假安全公约
2015/07/14 职场文书
python3实现常见的排序算法(示例代码)
2021/07/04 Python