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 快捷键设置实现代码
Mar 13 Javascript
javascript offsetX与layerX区别
Mar 12 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
jquery拖动改变div大小
Jul 04 jQuery
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
vue路由切换时取消之前的所有请求操作
Sep 01 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
VOLVO车载收音机
2021/03/02 无线电
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
anaconda如何查看并管理python环境
2019/07/05 Python
Python实现扫码工具的示例代码
2020/10/09 Python
Python eval函数介绍及用法
2020/11/09 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
Java多态性的定义以及类型
2014/09/16 面试题
精伦电子Java笔试题
2013/01/16 面试题
运动会表扬稿大全
2014/01/16 职场文书
偷看我的初中毕业鉴定
2014/01/29 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers