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

var timer=null;
var speed=0;
//速度必须放在外面,放在里面的话,每次速度都是从0开始而不是保持上次执行的结果
function move(){
timer=setInterval(function(){
/*if (oDiv.offsetLeft<300) {
speed+=(300-oDiv.offsetLeft)/50;
//除以50是因为速度太大
}else{
speed-=(oDiv.offsetLeft-300)/50;}
//此处if,else里的两句执行语句化简过后是相同的
//都是speed=speed+300/50-oDiv.offsetLeft/50
//所以if,else语句可以省略掉*/
speed=speed+300/50-oDiv.offsetLeft/50; oDiv.style.left=oDiv.offsetLeft+speed+'px';
},30);
}

弹性运动往往和摩擦运动结合使用,效果更佳,摩擦运动,即速度越来越小,经计算,比较人性化,合乎常规视觉的摩擦和弹性运动公式:

speed+=(target-obj.offsetLeft)/5;
speed*=0.7;

弹性运动会出现有如下几个问题:

1)无法到达指定位置-----小数误差问题
2)如何解决?速度无法取整,使用变态方法----将要改变的值设置成变量

弹性菜单;
1)弹性运动过界问题:原因是当元素值过小时,会过界,速度会出现负值,可将速度为负时,将速度再设置

为0,但也不能从根本上解决问题。所以要慎用弹性运动
15,在使用弹性运动时,有时会出现运动过节的问题,因此有时要尽量避免使用弹性运动而是用缓冲运动

    var left=0;
var speed=0;//速度必须放外面,否则就不是每次的执行结果了
  function move(obj,target){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
speed+=(target-obj.offsetLeft)/5;
    speed*=0.7;
/*obj.style.left=obj.offsetLeft+speed+'px';
//这种写法有误差,某一个li处会多或少一块,所以改成自定义变量left,如下面*/
left+=speed;
//为了提高效率,避免浪费资源,要关闭定时器
if (Math.abs(speed)<1 && Math.abs(left-target)<1) {
//判断条件就是距离足够近,速度足够小,利用绝对值
clearInterval(obj.timer);
obj.style.left=target+'px';
//以防万一,使定时器关闭时就卡在对应位置
}else{
obj.style.left=left+'px'; }
document.title=obj.offsetLeft+' | '+target+' | '+speed;  //用于测试
},30);

JS学习之路,之弹性运动框架的更多相关文章

  1. 【温故知新】——BABYLON.js学习之路·前辈经验(二)

    前言:在上一篇随笔BABYLON.js学习之路·前辈经验(一)中回顾了组内同事们长时间在Babylon开发实践中的总结出的学习之路和经验,这一篇主要对开发中常见的一些功能点做一个梳理,这里只作为温故知 ...

  2. JS学习之路,菜鸟总结的注意事项及错误更正

    JavaScript 是一种面向对象的动态语言,它的语法来源于 Java 和 C,所以这两种语言的许多语法特性同样适 用于 JavaScript.需要注意的一个主要区别是 JavaScript 不支持 ...

  3. [js高手之路]面向对象版本匀速运动框架

    这篇文章的效果,需要看过以下3篇文章: [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件 [js高手之路]匀速运动与实例实战(侧边栏,淡入淡出) [js高手之路]打造通用的匀速运动框架 ...

  4. JS学习之路

    前言 接触js也有四五年的时间了,对js的认识也逐渐加深,想把自己这几年学习js的经历记录一下. 总则-都是对象,都是引用 在接触js前用的比较多的是java,在刚开始接触js的时候,老实讲,我是有点 ...

  5. node.js学习之路

    (非原创) 目录 Nodejs的介绍 15个Nodejs应用场景 Nodejs学习路线图 1. Nodejs的介绍 Node.js的是建立在Chrome的JavaScript的运行时,可方便地构建快速 ...

  6. react.js学习之路一

    今天新老大来了,我们要学习他使用的框架react.js,现在是两眼一抹黑,对于我这个前端菜鸟来说,是真正的重新开始,好了,不说那么多了,开始随便记录我的学习,之后再整理内容. (1)对于react来说 ...

  7. 【温故知新】——BABYLON.js学习之路·前辈经验(一)

    前言:公司用BABYLON作为主要的前端引擎,同事们在长时间的项目实践中摸索到有关BABYLON的学习路径和问题解决方法,这里只作为温故知新. 一.快速学习BABYLON 1. 阅读Babylon[基 ...

  8. JS学习之路(这个觉得写的很好,放在这里是方便查看)

    总则-都是对象,都是引用 在接触js前用的比较多的是java,在刚开始接触js的时候,老实讲,我是有点崩溃的,相信许多像我一样从后端语言向js转的童鞋们肯定有一样的感受,这玩意儿太灵活了,好像怎么样都 ...

  9. react.js学习之路二

    看react.js对我来说真的不是难不难的问题,问题是我的思路太难转变了,真是坑死我了,react里面的坑也很多.算了,这些抱怨没啥用,记录一下今天学习的内容. 今天看了to-do-list经典示例 ...

随机推荐

  1. Unity灯光详解

    Lights will bring personality and flavor to your game. You use lights to illuminate the scenes and o ...

  2. 使用Gradle创建java web项目

    什么是Gradle? Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化建构工具. 它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置,抛弃了基于XML ...

  3. zabbix 布署实践【2 agent安装】

    客户端的安装相对较为简单,主要是更新它的repo源   以CentOS7为例 rpm -ivh http://repo.zabbix.com/zabbix/3.0/rhel/7/x86_64/zabb ...

  4. Postman怎么用?

    国庆期间的工作就是搞清楚postman怎么用?

  5. python 内嵌函数, 闭包, 函数装饰器

    一.  函数内嵌 闭包 在python中,函数可以作为返回值, 可以给变量赋值. 在python中, 内置函数必须被显示的调用, 否则不会执行. #!/usr/bin/env python #-*- ...

  6. 30分钟掌握ES6/ES2015核心内容

    30分钟掌握ES6/ES2015核心内容   ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript ...

  7. C# 从零开始 vol.1

    说好的java只能先坑了,毕竟计划赶不上变化,以下是 c# 基础部分. 1:变量,方法的命名方式 目的就是一眼看到实例名 方法名 就知道该变量是做什么的. 主流的命名方式有驼峰命名规则,pascal命 ...

  8. python Redis

    Redis非关系型数据库,可以做消息队列功能,可以实现订阅功能,类似于广播,只要订阅道这个频道,发消息的时候,别人可以收到消息,做监控的时候,所有的客户端往一个频道上发消息,server端只有一个监听 ...

  9. Weex-语法笔记 一

    p.p1 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px "PingFang SC Semibold"; color: #45454 ...

  10. jQuery(5)——动画

    jQuery中的动画 [show()方法和hide()方法] 在HTML文档中,为一个元素调用hide()方法,会将该元素的display样式改为“none”,show()方法将元素的display样 ...