javascript学习日记之运动(一)

1.匀速运动(速度不变)

运动的简单实现

运动: 顾名思义 就是让物体动起来!到达你想要的效果 或者说想要的位置。
我想让一个方块(DIV)动起来 并且到达一个指定的位置 。怎么让一个DIV 动起来 这时候就用到setInterval()函数 也就是定时器。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div {width:100px; height:100px; position:absolute; background:yellow; left:0; top:50px;}
    </style>
    <script>
        function startMove()
        {
            var Div=document.getElementById('div');
            setInterval(function (){
                Div.style.left=Div.offsetLeft+10+'px';
            }, 30);
        }
    </script>
</head>
<body>
<input type="button" value="开始运动" onclick="startMove()">
<div id="div"></div>
</body>
</html>

但是运行起来 你发现他并不会停 因为本来就没有让他停想要让div停 只要关掉定时器就行 但是前提是你要让div停在你想要的位置上比如说 当div运动到300px的时候在停下

var timer=null;
function startMove()
{
    var Div=document.getElementById('div');
    timer=setInterval(function (){
        if(Div.offsetLeft>=300)//判断运动是否到达终点
        {
            clearInterval(timer);//关掉定时器
        }
        Div.style.left=Div.offsetLeft+10+'px';
    }, 30);
}

这里我们div的offsetleft大于等于300而不是等于300 是因为 当速度不正好是你运动距离的整除数 还是不会停止 避免这类情况发生

好吧看似这个简单的div运动应该没问题了但是 当物体已经运动到终点时 再点击按钮开始运动 你会发现div还是会动一下在停止 这又是为什么呢

  Div.style.left=Div.offsetLeft+10+'px';

让我们来看看这段代码的意思让物体以10px的速度在运动 所以 这应该是物体没到达终点之前 应该做的事情吧

  clearInterval(timer);//关掉定时器

而关掉定时器是到达终点做的事情 好像有点自相矛盾了呢 这里我们得加个else 语句意思就是 如果到达终点 关掉定时器 没有
则继续运动。

var timer=null;
function startMove()
{
    var Div=document.getElementById('div');
    timer=setInterval(function (){
        if(Div.offsetLeft>=300)//判断运动是否到达终点
        {
            clearInterval(timer);//关掉定时器
        }else{
            Div.style.left=Div.offsetLeft+10+'px';
        }
    }, 30);
}

这总归没问题了吧 好吧手贱的我 物体(div)还没到达终点时 又多点了几下开始运动,惊奇的发现速度变快了 这是为什么呢
其实呢 还是定时器 的问题的 因为你还没到终点时没点一下 就会产生一个定时器 速度 自然而然快了 就好比做项目一个人做又累又慢 哎 公司又招了2个前端 工作量明显减少不少。
解决办法的就是在开启定时器之前关闭所有定时器

 clearInterval(timer);

总结一下 让物体运动动起来的问题

  1. 怎么停止(关闭定时器)
  2. 到达终点再次点击还会运动
  3. 没到达终点再次点击速度加快

实现分享到运动的例子

如图一样的效果:



其实好吧我在好多博客网站看到过。
如何实现呢 把复杂的东西先简单化 当鼠标移动到分享到按钮时div的offset运动到指定位置
鼠标移开div的offset又回到初始位置
起初我会这么写

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>分享到</title>
    <style>
        #div {width:100px; height:200px; background:#CCC; position:absolute; left:-100px;}
        #div span {width:20px; height:60px; line-height:20px; text-align:center; left:100px; top:70px; background:yellow; position:absolute;}
    </style>
    <script>
    window.onload=function ()
    {
        var Div=document.getElementById('div');
        Div.onmouseover=function ()
        {
            startMove();
        }
        Div.onmouseout=function ()
        {
            startMove2();
        }
    }
    var timer=null;
    function startMove()
    {
        var Div=document.getElementById('div');
        clearInterval(timer);
        timer=setInterval(function (){
            var iSpeed=10;
            if(Div.offsetLeft==0)
            {
                clearInterval(timer);
            }
            else
            {
                Div.style.left=Div.offsetLeft+iSpeed+'px';
            }
        }, 30);
    }
    function startMove2()
    {
        var Div=document.getElementById('div');
        clearInterval(timer);
        timer=setInterval(function (){
            var iSpeed=-10;

            if(Div.offsetLeft==-100)
            {
                clearInterval(timer);
            }
            else
            {
                Div.style.left=Div.offsetLeft+iSpeed+'px';
            }
        }, 30);
    }
</script>
</head>
<body>
<div id="div">
    <span>分享到</span>
</div>
</body>
</html>

好吧看起来没问题效果也实现但是代码有点过多 需要优化
如何解决这个问题
startMove()和startMove2()函数 根本上就是两个基本上一样的函数
不同的是终点值 所以需要合并一下 我们只要把终点值当参数传递
就可以了 javascript代码:

window.onload=function ()
{
    var Div=document.getElementById('div');
    Div.onmouseover=function ()
    {
        startMove(0);
    }
    Div.onmouseout=function ()
    {
        startMove(-100);
    }
}
var timer=null;
function startMove(iTarget)
{
    var Div=document.getElementById('div');
    clearInterval(timer);
    timer=setInterval(function (){
        var iSpeed=0;
        if(Div.offsetLeft<iTarget) //物体offsetleft值没到达终点值
        {
            iSpeed=10; //速度为正
        }else
        {
            iSpeed=-10; //否则速度为负
        }
        if(Div.offsetLeft==iTarget)
        {
            clearInterval(timer);
        }else
        {
            Div.style.left=Div.offsetLeft+iSpeed+'px';
        }
    }, 30);
}

2.缓冲运动


原理:速度有快到慢, 当到达目标点时 运动停止。也就是说速度是由距离决定的
物体与目标点距离越大,速度越大 物体与目标点距离越小,速度越小。
速度公式:(目标值-物体当前距离)/缩放系数
javascript代码

        var timer=null;
        function startMove(iTarget)
        {
            var oDiv=document.getElementById('div1');
            clearInterval(timer);
            timer=setInterval(function (){
            var iSpeed=(iTarget-oDiv.offsetLeft)/8;
            iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //速度取整 如果不是整数 到达目标点就会有误差
            if(oDiv.offsetLeft==iTarget)//是否到达终点
            {
                clearInterval(timer);   //到达终点
            }else
            { 
            oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';//到达之前
            }
            document.title=oDiv.offsetLeft+',speed='+iSpeed;
        }, 30);
    }

3.多物体同时体运动

多物体同时运动的问题是,需要在在每个物体的加个定时器 不然当一个物体运动还没有结束其他物体继续运动 就会卡在那 这是共用一个定时器的后果。因为是多个物体 所以我们得给运动函数 加个物体(obj)参数。

//多个DIV 变宽
window.onload=function ()
{
    var aDiv=document.getElementsByTagName('div');
    var i=0;
    for(i=0;i<aDiv.length;i++)
    {
        aDiv[i].timer=null;
        aDiv[i].onmouseover=function ()
        {
            startMove(this, 300 ); //当前鼠标移入的物体
        }
        
        aDiv[i].onmouseout=function ()
        {
            startMove(this, 100);
        }
    }
}
function startMove(obj, iTarget)
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var iSpeed=(iTarget-obj.offsetWidth)/8;
        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
        if(obj.offsetWidth==iTarget)
        {
            clearInterval(obj.timer);
        }
        else
        {
            obj.style.width=obj.offsetWidth+iSpeed+'px';
        }
    }, 30)
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容