js學習總結----動畫之在指定時間內實現單方向勻速運動

來源:互聯網
上載者:User

標籤:head   學習總結   time   rip   set   需要   相對   log   完成   

具體代碼如下

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        *{            margin:0;            padding:0;        }        #box{            position:absolute;            top:0;            left:0;            padding:0;            width:100px;            height:100px;            background:lightblue;        }    </style></head><body>    <div id=‘box‘></div>    <script>        //思想1:        var oBox = document.getElementById(‘box‘);        //實現一個勻速運動:在指定時間內完成動畫:計算出總距離/總時間,然後求出對應的步長(每10ms走一步的話需要走多遠)        var maxLeft = (document.documentElement.clientWidth || document.body.clientWidth) - oBox.offsetWidth;        var duration = 2000;        var step = (maxLeft/duration)*10;        var timer = window.setInterval(function(){            var curLeft = utils.css(oBox,"left");            curLeft+=step;            if(curLeft>=maxLeft){                window.clearInterval(timer);                return;            }            utils.css(oBox,"left",curLeft);        },10)        //思想2:        function Linear(t,b,c,d){//相對應的是time begin change duration            return c*t/d+b        }        var oBox = document.getElementById(‘box‘);        var target = (document.documentElement.clientWidth || document.body.clientWidth) - oBox.offsetWidth;        var begin = utils.css(oBox,‘left‘),change = target-begin;        var duration = 2000,time = null;        var timer = window.setInterval(function(){            time+=10;            if(time>=duration){                utils.css(oBox,"left",target);                window.clearInterval(timer);                return;            }            var curPos = Linear(time,begin,change,duration);            utils.css(oBox,"left",curPos)        },10)    </script></body></html>

 

js學習總結----動畫之在指定時間內實現單方向勻速運動

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.