JS运动基础(三) 弹性运动
加减速运动
速度不断增加或减少
速度减小到负值，会向反方向运动
弹性运动
在目标点左边，加速；在目标点右边，减速
根据距离，计算加速度
带摩擦力的弹性运动
弹性运动+摩擦力
弹性:
速度 += (目标点 - 当前值)/系数; //6 , 7 , 8
速度 *= 摩擦系数; // 0.7 0.75
终止条件
距离足够近 并且 速度足够小
缓冲:
var 速度 = (目标点 - 当前值)/系数;
速度取整
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; left:0;}
#bg{ width:1px; height:500px; background:black; position:absolute; left:500px; top:0;}
</style>
<script> //摩擦力 : F = fM window.onload = function(){
var oInput = document.getElementById('input1');
var oDiv = document.getElementById('div1'); var timer = null;
var iSpeed = 0; oInput.onclick = function(){
startMove();
}; function startMove(){
clearInterval(timer);
timer = setInterval(function(){ /*if( oDiv.offsetLeft < 500 ){
iSpeed += (500 - oDiv.offsetLeft)/50;
}
else{
iSpeed -= (oDiv.offsetLeft - 500)/50;
}*/ iSpeed += (500 - oDiv.offsetLeft)/6;
iSpeed *= 0.75; if( Math.abs(iSpeed)<=1 && Math.abs(500 - oDiv.offsetLeft)<=1 ){/*距离足够近 并且 速度足够小*/
clearInterval(timer);
oDiv.style.left = '500px';
iSpeed = 0;
}
else{
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
} document.title = oDiv.style.left + ',' + iSpeed; },30);
} };
</script>
</head> <body>
<input type="button" value="开始运动" id="input1">
<div id="div1"></div>
<div id="bg"></div>
</body>
</html>
JS运动基础(三) 弹性运动的更多相关文章
- js基础之弹性运动（四）
一.滑动菜单.图片 var iSpeed=0;var left=0;function startMove(obj,iTarg){ clearInterval(obj.timer);//记得先关定时器 ...
- js运动基础2（运动的封装）
简单运动的封装 先从最简单的封装开始,慢慢的使其更丰富,更实用. 还是上一篇博文的代码,在此不作细说. 需求:点击按钮,让元素匀速运动. <!DOCTYPE html> <html ...
- JS运动---运动基础（缓冲运动）
(1)手风琴效果 分析: (2)基础缓冲运动 接下来取整 原因: px为计算机识别的最小单位,1px无法再往下拆分.所以css如果取值200.5px,解析时计算机会自动将其改为200px注意:这里的数 ...
- JS运动基础(四) 碰撞运动
碰撞运动撞到目标点,速度反转无重力的漂浮Div速度反转滚动条闪烁的问题过界后直接拉回来 加入重力反转速度的同时,减小速度纵向碰撞,横向速度也减小横向速度小数问题(负数) <!DOCTYPE HT ...
- JS运动基础(二) 摩擦运动、缓冲运动
摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...
- [Js]弹性运动
描述:像弹簧一样左右弹动,最后缓慢停下来 一.加减速运动 1.加速运动 var iSpeed=0;iSpeed++; 速度越来越快,最后冲出去 2.减速运动 var iSpeed=20;iSpeed- ...
- Javascript 运动基础 01
JS运动基础 运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动 速度不变 <s ...
- js 运动函数篇(二) （加速度运动、弹性运动、重力场运动（多方向+碰撞检测+重力加速度+能量损失运动）拖拽运动）层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写加速度运动.弹性运动.重力场运 ...
- 第八节 JS运动基础
运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
随机推荐
- dojox.grid.DataGrid
创建表格 <table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid" style=&q ...
- 微信小程序文件结构
在小程序的跟目录有三个文件 app.js 小程序逻辑 必须有app.json 小程序公共设置 必须有app.wxss 小程序公共样式表 非必须有 小程序的每个页面是一个文件夹 里面包含4种 ...
- PHP中的闭包和匿名函数
闭包的概念是指在创建闭包时,闭包会封装周围的状态的函数.即便闭包所在环境不在了.但闭包中封装的状态依然存在. 匿名函数就是没有名称的函数. 它们看似很函数一样,实际上它们属于Closure类的实例 P ...
- 【matlab】查看程序运行时间
程序开头 profile on 结尾 profile viewer 然后就会很贴心滴出现下面的界面,可以从中展开,查看每段运行的时间
- C# lock
一. 为什么要lock,lock了什么? 当我们使用线程的时候,效率最高的方式当然是异步,即各个线程同时运行,其间不相互依赖和等待.但当不同的线程都需要访问某个资源的时候,就需要同步机制了,也就是说当 ...
- linux 安装 apache2.2.31
Linux下安装和配置Apache 概要:本文介绍在CentOS5.4 Linux中安装和配置Apache2.2.14,并且实现Apache和Tomcat6的整合.文章分为三部分,分别是删除系统自带的 ...
- Chinese culture
文房四宝 笔墨纸砚是中国古代文人书房中必备的宝贝,被称为“文房四宝”.用笔墨书写绘画在 中国可追溯到五千年前.秦(前221---前206)时已用不同硬度的毛和竹管制笔:汉代(前206—公元220) ...
- 【转】关于 Web GIS
以下部分选自2015-03-01出版的<Web GIS从基础到开发实践(基于ArcGIS API for JavaScript)>一书中的前言部分: Web GIS 概念于1994 年首次 ...
- 内嵌页js与ios和安卓的交互
ios: 一个iframe,改变url会发送一个请求,把url设置成就是bridge://xxxxx客户端就可以拦截请求,并在全局变量xxxxx中取出一个字符串.例如{event:'click'},可 ...
- 错误信息：System.Resources.MissingManifestResourceException: 未能找到任何适合于指定的区域或非特定区域性的资源。请确保在编译时已将“****.****.Resource.resources”正确嵌入或链接到程序集"****"，或者确保所有需要的附属程序集都可加载并已进行了完全签名
在网上搜索了N久都没看到几篇解决的文章,最后在不懈的努力下终于解决了,所以决定写下解决方法方便以后遇到同样问题的朋友: 其实这个错误的主要问题就是没有找到需要的资源文件(该文件为Resources.r ...