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 Ajax.ashx 高效分页实现代码
Oct 20 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
vuex进阶知识点巩固
May 20 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 Javascript
浅析JavaScript中的变量提升
Jun 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
用PHP产生动态的影像图
2006/10/09 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
清空上传控件input file的值
2010/07/03 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
python实现bucket排序算法实例分析
2015/05/04 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
python爬虫之百度API调用方法
2017/06/11 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
什么时候需要进行强制类型转换
2016/09/03 面试题
中专生自我鉴定书范文
2013/12/28 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
洗发露广告词
2014/03/14 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
安全目标管理责任书
2014/07/25 职场文书
初中学校对照检查材料
2014/08/19 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
Nginx速查手册及常见问题
2022/04/07 Servers
Python实现对齐打印 format函数的用法
2022/04/28 Python
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技