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);
时间: 2024-08-11 09:12:57

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

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

JavaScript 是一种面向对象的动态语言,它的语法来源于 Java 和 C,所以这两种语言的许多语法特性同样适 用于 JavaScript.需要注意的一个主要区别是 JavaScript 不支持类,类这一概念在 JavaScript 通过对象原型 (object prototype)得到延续(有关 ES6 类的内容参考这里Classes).另一个主要区别是 JavaScript 中的 函数也是对象,JavaScript 允许函数在包含可执行代码的同时,能像其他对象一样被传递.1,scrip

react.js学习之路一

今天新老大来了,我们要学习他使用的框架react.js,现在是两眼一抹黑,对于我这个前端菜鸟来说,是真正的重新开始,好了,不说那么多了,开始随便记录我的学习,之后再整理内容. (1)对于react来说,任何UI的变化都是通过整体刷新来完成的,也就是说,每做一点界面的更新,都可以认为是刷新了整个页面(怎么感觉跟canvas有点像),至于如何进行局部更新以保证性能,则是React框架要完成的事情.对于react来说,我不用关心每次内容dom的添加到dom树上,我只需要关心数据整体,两次数据之间UI如

react.js学习之路二

看react.js对我来说真的不是难不难的问题,问题是我的思路太难转变了,真是坑死我了,react里面的坑也很多.算了,这些抱怨没啥用,记录一下今天学习的内容. 今天看了to-do-list经典示例 总结起来可以概括为 1.首先划分组件:父组件--子组件 2.显示数据:创建初始数据,并将数据显示到页面上 3.创建函数:①:添加函数,输入框中输入数据,显示到页面上 ②:删除函数,点击删除按钮,将该条数据删除 代码有很多,一会给一个链接,自己看就行,没必要我重新复制 其中踩过的坑: 1. 首先就是版

node.js学习之路(1)

node.js 属于后台语言,后台语言还有php,java等. 优势:1.性能好   node.js VS php   86倍 2.跟前台JS配合方便 3.node.js便于前端学习 https://nodejs.org Node.js 命令 1.切换盘符 e: 2.改变目录 cd 目录名 3.执行程序 node 文件名.js Js能用的Node.js 都能用 node.js(自带许多模块可以参考node.js api) node.js---服务器 http -- 协议 request   请求

js学习之路--2

<span style="font-family: song, Verdana; font-size: 14px; line-height: 22.4px; background-color: rgb(240, 243, 250);">保留两位小数:</span> Function round(num){ return Math.round(num*100)/100; } 生成随机数 Function rand(num){ Return Math.floor(M

react.js学习之路六

学习react中,我一直认为,总组件里面才有构造函数,但是我才发现我的观点是错误的,构造函数是可以出现在子组件里面的. 今天有一个错误是点击增加/减少input框里面 的数值 我一直在寻找input框里面的数值,也就是value值,我发现我的思维错误的很彻底.react只是view,是不能操作数据的,只能渲染原始数据的变化,换句话说就是我要改变数值,只能改变原始数据里面的值,然后重新渲染到input框里面. 我的原始数据,给了 value:1; 当点击时候,构造函数 add(e){ var nu

&lt;input type=&quot;text&quot;/&gt;未输入时属性value的默认值--js学习之路

在百度ife刷题是自己的一个错误引发了我对<input type="text"/>的学习. 先贴代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>example</title> </head> <body> <label for="weather_input"

react.js学习之路五

最近没时间写博客,但是我一直在学习react,我发现react是一个巨大的坑,而且永远填不完的坑 关于字符串的拼接: 在react中,字符串的拼接不允许出现双引号"" ,只能使用单引号' ',例如这样就是可以的,这经常用在使用变量,变换路径的情况下. <img src={'img/sort_goods_0'+(index+1)+'x.png'} />

Three.js 学习之路(三)

天空盒子的使用 1.THREE.js下使用天空盒子的最简单方法是使用cubetxture来设置scene的background属性. 和其他游戏引擎一样,天空盒子需要六张拼合好的图片. 2.在THREE.js里cubetxture是一个6个长度的图片数组,贴图顺序依次是:左右上下前后. 3.示列代码: var skyboxs = ["Left.png","Right.png","Up.png", "Down.png",&quo