javascript中的缓动效果实现程序

常见的动画有四种类型，介绍一下：
　　linear：线性动画，即匀速
　　easeIn：速度从小到大，即淡入
　　easeOut ：速度从大到小，即淡出
　　easeInOut：开始时速度从小到大，结束时速度从大到小，即淡入淡出

其实说到缓动，就不得不提Robert Penner，他发明了N多缓动公式，举个例子

我还是解释一下吧：

　　设当前变化量为X，则
　　t / d = X / c，所以X = c * t / d，然后X + b就可以获得当前属性值

再看一个稍复杂的：
 
这个有淡入效果，也就是说动画开始时，值的变化量从小到大。
可以发现两者唯一的区别就是 t / d 和 (t /= d) * t，刚才说了t / d是一个>=0 && <=1的比值，暂取名为a，而(t /= d) * t就相当于Math.pow(a, 2)。

为什么要平方呢？

1. 首先a >= Math.pow(a, 2)是肯定的
2. 每次调用函数时，t / d 这个比值也是匀速变大的，比如第1次调用时是0.1(平方0.01)，第2次调用时是0.2(平方0.04)等，那第10次调用时，肯定是1没错吧，这时候 c * 1 + b，动画就到此结束了
3. 第2点证明了比值越小，值的变化量就越小，比值越大，值的变化量就越大，如果不用平方而是三次方，那淡入效果就更明显了。

样式、结构及公共函数如下：

代码如下:
 <style>
        #container {width:500px;height:100px;border:1px #d1d1d1 solid;position:relative;}
        #drag {width:100px;height:100px;background:#369;position:absolute;left:0;top:0;}
    </style>
<div id="container">
<div id="drag"></div>
</div>

    <script type="text/javascript">
        function $(id) {
            return typeof id == 'string' ? document.getElementById(id) : id;
        }
        function getStyle(el,styleProp){
            return el.currentStyle ? el.currentStyle[styleProp] : document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
        }
    </script>

首先，从最简单的入手：设定开始位置和结束位置及步长，每次增加固定的值，直至终止条件
代码如下:
var timer = null;
        var begin = 0, end = 400, step = 5;
        var drag = $("drag");
        function run() {
            if((iLeft = parseInt(getStyle(drag,"left"))) < end){
                drag.style.left = iLeft + step + "px";