js学习总结----动画之在指定时间内实现单方向匀速运动

最新推荐文章于 2022-07-01 10:43:15 发布

weixin_30706507

最新推荐文章于 2022-07-01 10:43:15 发布

阅读量130

点赞数

原文链接：http://www.cnblogs.com/diasa-fly/p/7158245.html

版权

具体代码如下

<!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>

转载于:https://www.cnblogs.com/diasa-fly/p/7158245.html

weixin_30706507

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js学习总结----动画之在指定时间内实现单方向匀速运动

具体代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin...
复制链接

扫一扫