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 相关文章推荐
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
jQuery EasyUI API 中文文档 - Form表单
Oct 06 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
常用的javascript设计模式
Jan 11 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
vue实现下拉菜单树
Oct 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
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
JS与框架页的操作代码
2010/01/17 Javascript
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
django使用xlwt导出excel文件实例代码
2018/02/06 Python
在Django中实现添加user到group并查看
2019/11/18 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
三个python爬虫项目实例代码
2019/12/28 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
vue项目实现分页效果
2021/03/24 Vue.js
企划经理的岗位职责
2013/11/17 职场文书
教师个人自我评价范文
2014/04/13 职场文书
留学顾问岗位职责
2014/04/14 职场文书
好媳妇事迹材料
2014/12/24 职场文书
客房领班岗位职责
2015/02/11 职场文书
认真学习保证书
2015/02/26 职场文书
学校教学工作总结2015
2015/05/19 职场文书
爱国主题班会教案
2015/08/14 职场文书
分享Python获取本机IP地址的几种方法
2022/03/17 Python
Elasticsearch 索引操作和增删改查
2022/04/19 Python