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经典示例 ...
随机推荐
- 【3】JavaScript编程全解笔记(三)
减少重复劳动,抓住核心. 第 4 部分 HTML5 1. HTML 技术分类 与 API 2. ApplicationCache 缓存 第 15 章 与桌面应用的协作 第 17 章 WebSocket ...
- Java 并发 线程的生命周期
Java 并发 线程的生命周期 @author ixenos 线程的生命周期 线程状态: a) New 新建 b) Runnable 可运行 c) Running 运行 (调用 ...
- ActiveMQ in Action(7) - Wildcards
关键字: activemq 2.6.7 Wildcards Wildcards用来支持联合的名字分层体系(federated name hierarchies).它不是JMS规范的一部分,而是A ...
- iOS消息推送相关
远程推送 iOS开发之实现App消息推送:http://blog.csdn.net/shenjie12345678/article/details/41120637 国内90%以上的iOS开发者,对A ...
- 修改LibreOffice Draw中定义的样式名称
目前我使用的是LibreOffice 4.2.4.2.经过以往的测试和使用经验,这是诸多版本中较为稳定和bug相对较少的.今天无意中发现该版本的LibreOffice Draw存在一个问题:样式名称修 ...
- 洛谷-乘积最大-NOIP2000提高组复赛
题目描述 Description 今年是国际数学联盟确定的“2000――世界数学年”,又恰逢我国著名数学家华罗庚先生诞辰90周年.在华罗庚先生的家乡江苏金坛,组织了一场别开生面的数学智力竞赛的活动,你 ...
- 【转载】__name__ == "__main__": 你认识我么?
<笨方法学Python>的习题50中,脚本ex50.py最后一行代码就是 if __name__ == "__main__": 那么,这句代码到底有什么用呢? 莫急莫急 ...
- Flash cc 添加目标Flash Player
原文出处:http://zengrong.net/post/1568.htm 第一步 首先下载最新的 playerglobal.swc(基于Flash Player11): http://www.ad ...
- C# 正则表达式 结合 委托
使用正则表达式匹配字符串的同时,使用委托事件,处理每一个匹配项 示例代码: string msg = "我的邮箱是zxh@itcast.cn的邮箱是yzk365@chezhihui.com减 ...
- Hive 行列转换
一.列转行 (对某列拆分,一列拆多行) 使用函数:lateral view explode(split(column, ',')) num eg: 如表:t_row_to_column_tmp 数据如 ...