描述:像弹簧一样左右弹动,最后缓慢停下来

一、加减速运动

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]弹性运动的更多相关文章

  1. css3使用transform属性制作js弹性运动

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  2. js 运动函数篇(二) (加速度运动、弹性运动、重力场运动(多方向+碰撞检测+重力加速度+能量损失运动)拖拽运动)层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写加速度运动.弹性运动.重力场运 ...

  3. JS运动基础(三) 弹性运动

    加减速运动速度不断增加或减少速度减小到负值,会向反方向运动 弹性运动在目标点左边,加速:在目标点右边,减速根据距离,计算加速度 带摩擦力的弹性运动弹性运动+摩擦力 弹性:速度 += (目标点 - 当前 ...

  4. JS学习之路,之弹性运动框架

    弹性运动:顾名思义,就如同物理中的加速减速运动,当开始时速度过大,到达终点时,速度不会立刻停下,而是再前进一段距离,而后再向相反方向运动,如此往复. var timer=null; var speed ...

  5. javascript运动系列第五篇——缓冲运动和弹性运动

    × 目录 [1]缓冲运动 [2]弹性运动 [3]距离分析[4]步长分析[5]弹性过界[6]弹性菜单[7]弹性拖拽 前面的话 缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点.而弹性运动同样是 ...

  6. jQuery插件之-----弹性运动

    <!doctype html><html><head><meta charset="utf-8"><title>弹性运动 ...

  7. canvas链式弹性运动

    上一课我学习了相对于鼠标为目标点的弹性运动,这次就学习了如何以上一个球为目标点的弹性运动,这次的函数比较复杂,首先分成了如下几个函数,首先定义了一个球的model,之后添加了4个球,在加载中调用了动画 ...

  8. 新买了ipad,在ipad上面看见的一个效果,pc上应该也见过,但是还是ipad上面有印象,如果是弹性运动就最好了

    新买了ipad,在ipad上面看见的一个效果,pc上应该也见过,但是还是ipad上面有印象,如果是弹性运动就最好了 <!DOCTYPE html> <html> <hea ...

  9. Js弹性漂浮广告代码

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

随机推荐

  1. Xcode好用的插件

    注释:每当Xcode升级之后,都会导致原有的Xcode插件不能使用,这是因为每个插件的Info.plist中记录了该插件兼容Xcode版本的DVTPlugInCompatibilityUUID,而每个 ...

  2. java获取客户访问IP

    原文:http://blog.csdn.net/mydwr/article/details/9357187 /** * 获取访问者IP * * 在一般情况下使用Request.getRemoteAdd ...

  3. 修改jsp文件tomcat发布失败(Could not delete May be locked by another process)

    突然项目修改jsp文件后,tomcat不能发布, Publishing failed with multiple errors   Could not delete D:/Tomcat 6.0/web ...

  4. [Selenium] 使用Javascript选中Input框里的内容,然后清空

    当我们需要清空Input框里的内容,直接使用el.clear()方法又行不通时,可以使用Javascript先去选中内容,然后再使用el.clear()方法:

  5. LTIB常用命令2

    LTIB 编译配置选项 根据说明文档,ltib 可以通过以下的命令配置: * <verbatim># ./ltib</verbatim>          安装后第一次运行,采 ...

  6. opencl gauss filter优化(三)

    1.根据前两次的最终结果: 使用普通buffer,Horizontal 5ms, Vertical 17 ms 使用image buffer:Horizontal 9.4ms, Vertical 6. ...

  7. Openvpn 安装简述

    1.固定本地IP地址 vim /etc/sysconfig/network-scripts/ifcfg-eth0 2.同步时间.安装ntpd yum  install ntpddate netupda ...

  8. R语言实战

    教材目录 第一部分 入门 第一章 R语言介绍 第二章 创建数据集 第三章 图形初阶 第四章 基本数据管理 第五章 高级数据管理 第二部分 基本方法 第六章 基本图形 第七章 基本统计方法 第三部分 中 ...

  9. spring boot学习

    window10的环境下 使用apache-maven-3.3.9 到https://github.com/spring-projects/spring-boot 下载源码包,解压到c:\spring ...

  10. 【bzoj1029】道路抢修

    [bzoj1029]建筑抢修 传送门 http://www.lydsy.com/JudgeOnline/problem.php?id=1029 分析 http://blog.csdn.net/popo ...