对于javascript运动的理解

运动原理：

对于javascript的运动简单的来说就是利用定时器让物体运动起来，并不断的改变物体的样式。在运动中我们一般改变的是物体的定位而不是margin值，因为改变margin值有时会影响其他元素容易造成页面的混乱。也许有的朋友会说难道不能使用for循环吗？其实是可以的不过for循环太快了，通常你一打开网页运动就完成了，所以我们一般使用定时器来管理运动。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function(){
            var oT=document.getElementsByTagName('textarea')[0];
            var oBtn=document.getElementsByTagName('input')[0];
            var oTime=new Date().getTime();//开定时器前先获取一个时间戳
            var timer=setInterval(function(){
            var oTime2=new Date().getTime();//根据定时器的间隔时间再获取一个时间戳
                     oT.innerHTML+=oTime2-oTime+'\n';//在文本区域内显示时间差值
                     oTime=oTime2;//对初始时间戳重新赋值

            },1)
            oBtn.onclick=function(){   //暂停键
                clearInterval(timer);
            };
        };
    </script>
</head>
<body>   
    <textarea rows="" cols="" id="t1"></textarea>
    <input type="button" name="" value="btn">
</body>
</html>

希望各位小伙伴可以在编辑器试一下该段代码。
在该段代码中显示出一个问题，就是定时器的时间间隔并不是太稳定

Paste_Image.png

（ps：你们也看到了飘得很是厉害。。。。）
  在javascript的定时器中选取间隔数字是有讲究的，一般选择的运动时间间隔为20-40ms之间,我们平均一下选取30ms。一来人类视觉感受可以接受，时间间隔长会产生钝感，时间间隔太短的话会对性能的消耗也很大（碰到个辣眼睛的图片会晃瞎哈哈哈）。我们选取30ms如下图：

Paste_Image.png

小伙伴们看到了吧，很稳定吧。
  对于定时器在javascript中的运行顺序也需要提一下，计算机在执行代码时会先执行定时器下边的代码，到了时间才会执行定时器里边的。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        var n=1;
        setInterval(function(){
            n=2;
        },1);
        alert(n);
    </script>
</head>
<body>
    
</body>
</html>

该代码显示的结果为1。
  定时器还有一个问题就是当你在浏览器中打开另外一个页面时浏览器会默认的将你的原来有定时器的那个页面的时间间隔降为1s以优化性能。
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        var n=0;
        setInterval(function(){
            n++;
            document.title=n;
        },1);
    </script>
</head>
<body>
</body>
</html>

接下来我们可以试一下物体的运动了。
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{margin: 0;
    padding: 0;
    list-style: none;}
    div{width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    left: 0;}
    </style>
    <script>
        window.onload=function(){
            var oDiv=document.getElementsByTagName('div')[0];
            var time=1000;//总时间;
            var start=0;//开始
            var end=300;//结束
            var dis=end-start;//总位置
            var count=Math.ceil(time/30);//次数
            var n=0;//统计步数；
            var timer=null;
            timer=setInterval(function(){
                n++;
                oDiv.style.left=n*dis/count+'px';//n*一步距离；
                oDiv.style.top=n*dis/count+'px';//n*一步距离；
                if(n==count){
                    clearInterval(timer);
                }
            },30);

        }
    </script>
</head>
<body>
    <div></div>
</body>
</html>

在以上代码我们首先要设定好的就是总时间、开始位置、目标位置、总路程、多长时间走一步（其实就是定时器设置的时间）、一共走多少步count（总时间除以设置时间： time/设置时间。其中取整有几种方式：parseInt\Math.floor()\Math.ceil()\Math.round() ）、一步走多远：dis/count。
  在完成以上目标后我们可以继续加一些别的东西，比如将以上的代码进行封装。
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
     <style>
    *{margin: 0;
    padding: 0;
    list-style: none;}
    div{width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    left: 100px;
    top: 0;}
    </style>
    <script>
    function move(obj,end){
         var time=1000;//总时间;
            var start=obj.offsetLeft;//开始(在这里初试位置为left：100px)
            //注销var end=300;//结束
            var dis=end-start;//总位置
            var count=Math.ceil(time/30);//次数
            var n=0;//统计步数；
            var timer=null;

            timer=setInterval(function(){
                n++;
                obj.style.left=start+n*dis/count+'px';//n*一步距离；
                if(n==count){
                    clearInterval(timer);
                }
            },30);
    }
        window.onload=function(){
            var oDiv=document.getElementsByTagName('div')[0];

            move(oDiv,300);
        }
    </script>
</head>
<body>
    <div></div>
</body>
</html>

以上的代码除了封装以外，还改变的物体运动的初始位置，各位小伙伴可以敲敲感受一下。此外我们还可以加上透明度。
代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        div {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 100px;
            top: 0;
        }
    </style>
    <script>
        function getStyle(obj,sName){
            return (obj.currentStyle||getComputedStyle(obj,false))[sName]
        }
        function move(obj, sName,end) {
            var time = 1000; //总时间;
            var star = parseFloat(getStyle(obj,sName)); //这里用parseFloat取整
            //注销var end=300;//结束
            var dis = end - star; //总位置
            var count = Math.ceil(time / 30); //次数
            var n = 0; //统计步数；
            var timer = null;
            timer = setInterval(function () {
                n++;
                if(sName=='opacity'){
                obj.style[sName] = star + n * dis / count ;   
                                
                }else{

                obj.style[sName] = star + n * dis / count + 'px'; //n*一步距离；
                }
                if (n == count) {
                    clearInterval(timer);
                }
            }, 30);
        }
        window.onload = function () {
            var oDiv = document.getElementsByTagName('div')[0];
            move(oDiv,'opacity', 0);
        }
    </script>
</head>

<body>
    <div></div>
</body>

</html>

此为单物体运动，如果多物体还这样的话就会出现错误。在定时器中还有一个问题就是*一定要保证一个物体上有只一个定时器（定时器加载到物体身上以达到互相独立）。
代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
         li{width: 100px;
        height: 50px;
        background:#6cf;
        margin-bottom: 10px;
        }
    </style>
    <script>
        
        function getStyle(obj,sName){
            return (obj.currentStyle||getComputedStyle(obj,false))[sName]
        }
        function move(obj, sName,end) {
            var time = 1000; //总时间;
            var start = parseFloat(getStyle(obj,sName)); //这里用parseFloat取整
            //注销var end=300;//结束
            var dis = end - start; //总位置
            var count = Math.ceil(time / 30); //次数
            var n = 0; //统计步数；
             clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                n++;
                if(sName=='opacity'){
                obj.style[sName] = start + n * dis / count ;   
                                
                }else{

                obj.style[sName] = start + n * dis / count + 'px'; //n*一步距离；
                }
                if (n == count) {
                    clearInterval(obj.timer);
                }
            }, 30);
        }
        window.onload = function () {
            var aLi = document.getElementsByTagName('li');
            for(var i=0;i<aLi.length;i++){
                  aLi[i].onmouseover=function(){
                move(this,'width',400);
            }
            aLi[i].onmouseout=function(){
                move(this,'width',100);
            }
            }
          
            
        }
    </script>
</head>

<body>
   <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>

千万记住要清定时器。。否则他会一直动哈哈。而且事件之间也会起冲突。
  大家肯定对于上边那个关于透明度的问题有疑问，我除了设定透明度还要设置宽度怎么办呢，原来的数据被透明度给占据了。这里就由json出场了。将相对应的需要获取的键值加入for in循环
代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        div {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 100px;
            top: 0;
        }
    </style>
    <script>
        function getStyle(obj, sName) {
            return (obj.currentStyle || getComputedStyle(obj, false))[sName]
        }
        //function move(obj, sName,end) {原来的替换为下边这个
        function move(obj, json) {
            var time = 1000; //总时间;
            var start = {} //{width:0;height:0;}开始位置｛left：0，top：0｝
            var dis = {} //{width:300;height:300;}总距离｛left：300，top：300｝
            for (var name in json) {
                start[name] = parseFloat(getStyle(obj, name)); //
                dis[name] = json[name] - start[name];
                console.log(start);
                 console.log(dis)        
            }
            var count = Math.ceil(time / 30); //次数
            var n = 0; //统计步数；
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                n++;
                for (var name in json) {
                    if (name == 'opacity') {
                        obj.style[name] = start[name] + n * dis[name] / count;
                    } else {
                        obj.style[name] = start[name] + n * dis[name] / count + 'px'; //n*一步距离；
                    }
                }
                    if (n == count) {
                        clearInterval(obj.timer);
                    }

            }, 30);
        }
        window.onload = function () {
            var oDiv = document.getElementsByTagName('div')[0];
            document.onclick = function () {
                
                move(oDiv, {
                    'width': 300,
                    'height': 300,
                    'opacity': 0
                });
            };

        }
    </script>
</head>
<body>
    <div></div>
</body>
</html>

已经为大家加入了console.log大家可以看一下start与end的json的键值对。
在此基础上我们可以进一步升级，加入控制时间选项。
代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        div {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 100px;
            top: 0;
        }
    </style>
    <script>
        function getStyle(obj, sName) {
            return (obj.currentStyle || getComputedStyle(obj, false))[sName]
        }
        //function move(obj, sName,end) {
        function move(obj, json,duration,complete) {
           var time=duration||1000;//前者条件满足就不往后走了，或的条件
            var start = {} //{width:0;height:0;}开始位置｛left：0，top：0｝
            var dis = {} //{width:300;height:300;}总距离｛left：300，top：300｝
            for (var name in json) {
                start[name] = parseFloat(getStyle(obj, name)); //
                dis[name] = json[name] - start[name];
                // console.log(start);
                // console.log(dis)        
            }
            var count = Math.ceil(time / 30); //次数
            var n = 0; //统计步数；
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                n++;
                for (var name in json) {
                    if (name == 'opacity') {
                        obj.style[name] = start[name] + n * dis[name] / count;
                    } else {
                        obj.style[name] = start[name] + n * dis[name] / count + 'px'; //n*一步距离；
                    }   
                }
                if (n == count) {
                    clearInterval(obj.timer);
                    complete && complete();//如果有就执行如果没有就不执行，防止了无函数出现undefine。
                }
            }, 30);
        }
        window.onload = function () {
            var oDiv = document.getElementsByTagName('div')[0];
            document.onclick = function () {
                move(oDiv, {
                    'width': 300,
                    'height': 300,
                    'opacity': 0
                },3000,function(){
                     alert(1);
                });
            };
        }
    </script>
</head>
<body>
    <div></div>
</body>
</html>

我们将控制时间与完成时执行事件封装。
示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        div {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 100px;
            top: 0;
        }
    </style>
    <script>
        function getStyle(obj, sName) {
            return (obj.currentStyle || getComputedStyle(obj, false))[sName]
        }
        //function move(obj, sName,end) {
        function move(obj, json,options) {
           //var time = 1000; //总时间;
           var options=options||{};
           var time=options.duration||1000;//前者条件满足就不往后走了，或的条件
            var start = {} //{width:0;height:0;}开始位置｛left：0，top：0｝
            var dis = {} //{width:300;height:300;}总距离｛left：300，top：300｝
            for (var name in json) {
                start[name] = parseFloat(getStyle(obj, name)); //
                dis[name] = json[name] - start[name];
                // console.log(start);
                // console.log(dis)        
            }
            var count = Math.ceil(time / 30); //次数
            var n = 0; //统计步数；
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                n++;
                for (var name in json) {
                    if (name == 'opacity') {
                        obj.style[name] = start[name] + n * dis[name] / count;
                    } else {
                        obj.style[name] = start[name] + n * dis[name] / count + 'px'; //n*一步距离；
                    }          
                }
                if (n == count) {
                    clearInterval(obj.timer);
                    options.complete && options.complete();//如果有就执行如果没有就不执行，防止了无函数出现undefine。
                }

            }, 30);
        }
        window.onload = function () {
            var oDiv = document.getElementsByTagName('div')[0];
            document.onclick = function () {
                move(oDiv, {
                    "width": 300,
                    "height": 300,
                    "opacity": 0
                },{"duration":3000,"complete":function(){
                    alert(1);
                }});
            };

        }
    </script>
</head>
<body>
    <div></div>
</body>
</html>

到这里对于运动方面就告一段落了，在工作中我们都会使用已经封装好的框架来用，以上内容就是为了更好的理解javascript运动的逻辑问题。

本人前端小白，希望在自己努力的同时可以认识更多志同道合的朋友，也希望大神和老师傅们能够提携一二带我上车，本人不胜感激。哈哈，希望小伙伴们能够给出意见，让我能够加以改正，谢谢！

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,547评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,399评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,428评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,599评论 1赞 274
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,612评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,577评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,941评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,603评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,852评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,375评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,955评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2赞 342

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,401评论 25赞 707
  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4赞 62
  • iOS WebSocket长链接（Swift）
    WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一种新的协议。它实...
    香橙柚子阅读 23,687评论 8赞 183
  • 《漂亮朋友》——莫泊桑
    19世纪法国生活的最好写照 之前并未接触过太多莫泊桑的小说，只知他善于讽刺和批判，读完长篇小说漂亮朋友后，对其写作...
    会子阅读 1,579评论 9赞 10
  • 无端听雨窗台陷
    早上七点半去了趟厕所，回来接着躺在床上，冥想。今天刚好周六，有理由赖床。 正当渐入佳境时，窗台外噼里啪啦的开始下起...
    灵君阅读 190评论 0赞 0