cari

Rumah >hujung hadapan web >tutorial js >js动画之在指定时间内实现单方向匀速运动

js动画之在指定时间内实现单方向匀速运动

巴扎黑
巴扎黑asal
2017-07-20 14:16:181080semak imbas

具体代码如下

<!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=&#39;box&#39;></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 durationreturn 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>

 

Atas ialah kandungan terperinci js动画之在指定时间内实现单方向匀速运动. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript几点基础讲解Artikel seterusnya：javascript常见问题之黑白卡片

Artikel berkaitan

Lihat lagi