js动画--缓冲动画

前面讲述的动画速度都是匀速的，现实生活中的运动速度的变化不一定是恒定的，存在一定的缓冲，就像火车进站一样，速度会越来越慢。

对于改变速度措施，其实只要将动画第一课的程序稍微的改变一下就可以了，我们来看一下代码如何实现的

html

<!DOCTYPE html>
<html>
<head>
<title>js动画事件</title>
<link href="move.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="move.js"></script>
</head>
<body>
<div id="div1">
<span id="sp1">分享</span>
</div>
</body>
</html>

css

*{
    margin:0px;
    padding:0px;
}
#div1{
    width:200px;
    height:200px;
    position:absolute;
    left:-200px;
    background:red;
    border:1px solid #eeddcc;
}
#sp1{
    display:block;
    width:20px;
    height:80px;
    position:absolute;
    left:200px;
    top:60px;
    border:1px solid red;
    color:#036;
    line-height:40px;
}

js

var timer;
window.onload=function(){
    var div1=document.getElementById("div1");
    div1.onmouseover=function(){
        RunPlay(0);
    }
    div1.onmouseout=function(){
        RunPlay(-200);
    }
}

function RunPlay(target){
    var div1=document.getElementById("div1");
    clearInterval(timer);
    var speed=10;
    timer=setInterval(function(){
        if(target>div1.offsetLeft){
            speed=Math.ceil((target-div1.offsetLeft)/10);//缓冲的效果就是在这里实现的，我们将速度的大小与当前位置与终点之间的距离成正比，那么距离越小，速度也越小，此外一定要注意，这里我们要对速度进行向上，或者向下取整，而且对于正数我们要向上取整，对于负速度，我们要向下取整。
        }else{
            speed=Math.floor((target-div1.offsetLeft)/10);
        }
        if(div1.offsetLeft==target){
            alert(speed);
            clearInterval(timer);
        }else{
            div1.style.left=div1.offsetLeft+speed+"px";
        }
        
    },50)
    
}

 

posted @ 2016-01-08 20:28  秋天的故事  阅读(757)  评论(0)  编辑  收藏  举报