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 相关文章推荐
让FireFox支持innerText的实现代码
Dec 01 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
JS实现两个大数(整数)相乘
Apr 28 Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
基于jquery编写分页插件
Mar 07 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
JS实现移动端在线签协议功能
Aug 22 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
浅析51个PHP处理字符串的函数
2013/08/02 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
jquery 插件开发方法小结
2009/10/23 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
Python 学习笔记
2008/12/27 Python
python检测lvs real server状态
2014/01/22 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
Django中处理出错页面的方法
2015/07/15 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
Python补齐字符串长度的实例
2018/11/15 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
Python实现自动装机功能案例分析
2020/10/22 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
什么是反射
2012/03/17 面试题
奥运会口号
2014/06/13 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
工资收入证明
2014/10/07 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
辩护意见书
2015/06/04 职场文书
生死抉择观后感
2015/06/09 职场文书
Python基础之进程详解
2021/05/21 Python