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 相关文章推荐
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
JS中字符串trim()使用示例
May 26 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
javascript实现动态标签云
Oct 16 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 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
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
jquery 新浪网易的评论块制作
2010/07/01 Javascript
js 模拟气泡屏保效果代码
2010/07/10 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
Python 如何访问外围作用域中的变量
2016/09/11 Python
详解python之简单主机批量管理工具
2017/01/27 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
写好自荐信要注意的问题
2013/11/10 职场文书
教师应聘个人求职信
2013/12/10 职场文书
历史系自荐信范文
2013/12/24 职场文书
大学生职业生涯设计书
2014/01/02 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
关于安全演讲稿
2014/05/09 职场文书
学校花圃的标语
2014/06/18 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书