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 相关文章推荐
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
C#实现将一个字符转换为整数
Dec 12 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 5.0创建图形的巧妙方法
2010/10/12 PHP
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
PHP新手入门学习方法
2011/05/08 PHP
PHP小技巧之函数重载
2014/06/02 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
详解javascript函数的参数
2015/11/10 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
Python常用的json标准库
2019/02/19 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
给民警的表扬信
2014/01/08 职场文书
三个儿子教学反思
2014/02/03 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
四风问题查摆剖析材料
2014/10/11 职场文书
体育教师个人总结
2015/02/09 职场文书
农村党员干部承诺书
2015/05/04 职场文书
工作态度怎么写
2015/06/25 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技