JS学习之路,之弹性运动框架
弹性运动:顾名思义,就如同物理中的加速减速运动,当开始时速度过大,到达终点时,速度不会立刻停下,而是再前进一段距离,而后再向相反方向运动,如此往复。
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学习之路,之弹性运动框架的更多相关文章
- 【温故知新】——BABYLON.js学习之路·前辈经验(二)
前言:在上一篇随笔BABYLON.js学习之路·前辈经验(一)中回顾了组内同事们长时间在Babylon开发实践中的总结出的学习之路和经验,这一篇主要对开发中常见的一些功能点做一个梳理,这里只作为温故知 ...
- JS学习之路,菜鸟总结的注意事项及错误更正
JavaScript 是一种面向对象的动态语言,它的语法来源于 Java 和 C,所以这两种语言的许多语法特性同样适 用于 JavaScript.需要注意的一个主要区别是 JavaScript 不支持 ...
- [js高手之路]面向对象版本匀速运动框架
这篇文章的效果,需要看过以下3篇文章: [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件 [js高手之路]匀速运动与实例实战(侧边栏,淡入淡出) [js高手之路]打造通用的匀速运动框架 ...
- JS学习之路
前言 接触js也有四五年的时间了,对js的认识也逐渐加深,想把自己这几年学习js的经历记录一下. 总则-都是对象,都是引用 在接触js前用的比较多的是java,在刚开始接触js的时候,老实讲,我是有点 ...
- node.js学习之路
(非原创) 目录 Nodejs的介绍 15个Nodejs应用场景 Nodejs学习路线图 1. Nodejs的介绍 Node.js的是建立在Chrome的JavaScript的运行时,可方便地构建快速 ...
- react.js学习之路一
今天新老大来了,我们要学习他使用的框架react.js,现在是两眼一抹黑,对于我这个前端菜鸟来说,是真正的重新开始,好了,不说那么多了,开始随便记录我的学习,之后再整理内容. (1)对于react来说 ...
- 【温故知新】——BABYLON.js学习之路·前辈经验(一)
前言:公司用BABYLON作为主要的前端引擎,同事们在长时间的项目实践中摸索到有关BABYLON的学习路径和问题解决方法,这里只作为温故知新. 一.快速学习BABYLON 1. 阅读Babylon[基 ...
- JS学习之路(这个觉得写的很好,放在这里是方便查看)
总则-都是对象,都是引用 在接触js前用的比较多的是java,在刚开始接触js的时候,老实讲,我是有点崩溃的,相信许多像我一样从后端语言向js转的童鞋们肯定有一样的感受,这玩意儿太灵活了,好像怎么样都 ...
- react.js学习之路二
看react.js对我来说真的不是难不难的问题,问题是我的思路太难转变了,真是坑死我了,react里面的坑也很多.算了,这些抱怨没啥用,记录一下今天学习的内容. 今天看了to-do-list经典示例 ...
随机推荐
- 2016-2017 CT S03E02: Codeforces Trainings Season 3 Episode 2
A HHPaint B Square Root C Interesting Places D Road to Home E Ant and apples F Square G Pair H The F ...
- AndroidStudio0.5.2 BUG 导致 menu 菜单键崩溃
郁闷了半天,今天发现一点击手机 menu 键应用就崩溃了,记得之前都是好好的,调试了半天代码还是搞不定,于是网上google了一番,发现仅国外有一两篇文章有提到类似问题,据说是 0.5.2 版本的 B ...
- react 学习与使用记录
相关技术:webpack+react+react-router+redux+immutable 郭永峰react学习指南 1.git bash--windows命令行工具 --教程 下载地址 2. i ...
- Qt 学习笔记
继承自QObject 的Qt类都具有支持信号和槽的能力,并且在子类的实现代码中直接使用connect()函数 pwdLineEdit->setEchoMode(QLineEdit::Passwo ...
- [SOJ] DAG?
Description 输入一个有向图,判断该图是否是有向无环图(Directed Acyclic Graph). Input 输入的第一行包含两个整数n和m,n是图的顶点数,m是边数.1<=n ...
- [河南省ACM省赛-第三届] AMAZING AUCTION (nyoj 251)
题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=251 规则: 1.若某竞标价唯一,则胜出 2.若不存在唯一竞标价,则投标次数最少竞标价中标 ...
- ef code first 您没有所需权限
在进行数据库更新操作时,update-database -force,反复提示没有改表或者没有所需权限,昨晚折腾了4个小时没有搞定,太晚了,今天Google了一下,这方面的错误,提到的都很少,在一篇文 ...
- 线性规划?数学?差分约束?Good Bye 2016 C
http://codeforces.com/contest/750/problem/C 反正我不会这道题...为什么那么多人做出来了...我好菜.jpg 题目大意:cf每个人都有分数,每次都会在div ...
- /home 和 /root
/root Linux超级权限用户root的家目录./home 如果我们建立一个用户,用户名是"xx",那么在/home目录下就有一个对应的/home/xx路径,用来存放用 ...
- 一个初学者的辛酸路程-socket编程-8
前言: 你会发现会网络是多么幸福的事情 主要内容: socket 概念: socket本质上就是2台网络互通的电脑之间,架设一个通道,两台电脑通过这个通道来实现数据的互相传递.我们知道网络通信都是基于 ...