[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);
};
五、弹性运动不适用的地方
样式会过界的
比如高度,先变大后变小,如果物体本身高度很小,可能会变成负值,就不对了
[Js]弹性运动的更多相关文章
- css3使用transform属性制作js弹性运动
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- js 运动函数篇(二) (加速度运动、弹性运动、重力场运动(多方向+碰撞检测+重力加速度+能量损失运动)拖拽运动)层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写加速度运动.弹性运动.重力场运 ...
- JS运动基础(三) 弹性运动
加减速运动速度不断增加或减少速度减小到负值,会向反方向运动 弹性运动在目标点左边,加速:在目标点右边,减速根据距离,计算加速度 带摩擦力的弹性运动弹性运动+摩擦力 弹性:速度 += (目标点 - 当前 ...
- JS学习之路,之弹性运动框架
弹性运动:顾名思义,就如同物理中的加速减速运动,当开始时速度过大,到达终点时,速度不会立刻停下,而是再前进一段距离,而后再向相反方向运动,如此往复. var timer=null; var speed ...
- javascript运动系列第五篇——缓冲运动和弹性运动
× 目录 [1]缓冲运动 [2]弹性运动 [3]距离分析[4]步长分析[5]弹性过界[6]弹性菜单[7]弹性拖拽 前面的话 缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点.而弹性运动同样是 ...
- jQuery插件之-----弹性运动
<!doctype html><html><head><meta charset="utf-8"><title>弹性运动 ...
- canvas链式弹性运动
上一课我学习了相对于鼠标为目标点的弹性运动,这次就学习了如何以上一个球为目标点的弹性运动,这次的函数比较复杂,首先分成了如下几个函数,首先定义了一个球的model,之后添加了4个球,在加载中调用了动画 ...
- 新买了ipad,在ipad上面看见的一个效果,pc上应该也见过,但是还是ipad上面有印象,如果是弹性运动就最好了
新买了ipad,在ipad上面看见的一个效果,pc上应该也见过,但是还是ipad上面有印象,如果是弹性运动就最好了 <!DOCTYPE html> <html> <hea ...
- Js弹性漂浮广告代码
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
随机推荐
- Nginx基础知识之————什么是 Nginx?
本课时主要给大家讲解什么是 Nginx 和 Nginx 的功能,Nginx 与其他服务器的性能比较和 Nginx 的优点总结的知识,并结合实例让学员深入理解 Nginx 和 Nginx 的功能以及 N ...
- SQL中char、varchar、nvarchar的区别(zhuan)
char char是定长的,也就是当你输入的字符小于你指定的数目时,char(8),你输入的字符小于8时,它会再后面补空值.当你输入的字符大于指定的数时,它会截取超出的字符. nvarcha ...
- Mysql ERROR 1418 (HY000): This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA
ERROR 1418 (HY000): This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declar ...
- Vnc viewer与windows之间的复制粘贴
用VNC连接到Linux之后,最纠结的问题就是无法复制粘贴.其实很简单,在Linux里面,打开一个终端,然后输入命令: vncconfig 之后,会弹出一个窗口 不要关闭那个小窗口 之后,就可以愉快的 ...
- 十种JAVA排序算法实例
一.冒泡(Bubble)排序 复制代码 代码如下: void BubbleSortArray() { for(int i=1;i<n;i++) { for ...
- vitamio框架
import io.vov.vitamio.LibsChecker; import io.vov.vitamio.MediaPlayer; import io.vov.vitamio.MediaPla ...
- C++——友元、异常和其他
一.友元 类并非只能拥有友元函数,也可以将类作为友元.在这种情况下,友元类的所有方法都可以访问原始类的私有成员和保护成员.另外,也可以做更严格的限制,只将特定的成员函数指定为另一个类的友元.哪些函数. ...
- hdu5785(极角排序求所有锐角钝角个数)
做法很显然,求出所有的锐角和钝角就能求出有多少个锐角三角形了. 我用了愚钝的方法,写了两三个小时... 看了下别人简单的代码.学习了下做法. sort(temp+,temp+cnt+);//排序 Fo ...
- python类、对象、方法、属性之类与对象笔记
python中一切皆为对象,所谓对象:我自己就是一个对象,我玩的电脑就是对象,坐着的椅子就是对象,家里养的小狗也是一个对象...... 我们通过描述属性(特征)和行为来描述一个对象的.比如家里的小狗, ...
- JSON和JSONP区别和联系
由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯 ...