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 相关文章推荐
Exjs 入门篇
Apr 07 Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
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高级编程实例:编写守护进程
2014/09/02 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
Ext 表单布局实例代码
2009/04/30 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
小程序实现录音功能
2020/09/22 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
Python中is与==判断的区别
2017/03/28 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
德国团购网站:Groupon德国
2018/03/13 全球购物
办公室综合文员岗位职责范本
2014/02/13 职场文书
根叔历年演讲稿
2014/05/20 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
少年犯观后感
2015/06/11 职场文书
部门主管竞聘书
2015/09/15 职场文书
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
5道关于python基础 while循环练习题
2021/11/27 Python
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers
mysql幻读详解实例以及解决办法
2022/06/16 MySQL