JavaScript 移动动画

■知识点

移动动画主要通过动态修改元素的坐标来实现。技术要点如下。

    考虑元素的初始坐标、终点坐标以及移动坐标等定位要素。

    移动速度、频率等问题。可以借助定时器来实现，但效果的模拟涉及算法问题，不同的算法，可能会设计出不同的移动效果，如匀速运动、加速和减速运动。

■实例设计

    下面的示例演示了如何设计一个简单的元素滑动效果。通过指向元素、移动的位置以及移动的步数，可以设计按一定的速度把元素从当前位置移动指定的位置。本示例引用前面介绍的getB()方法，该方法能够获取当前元素的绝对定位坐标值。

//简单的移动函数

//参数：e表示元素，x和y表示要移动的终点坐标，t表示元素移动的步数 

function slide(e, x, y, t){

    var t = t || 100                  //初始化步数，步数越大，速度越慢，移动越逼真

    var o = getB(e);                  //当前元素的绝对定位坐标值

    var x0 = o.x; 

    var yO = o.y;

    var stepx = Math.round((x - x0) / t);

    //计算x轴每次移动的步长，由于像素点不可用小数，所以会存在一定的误差

    var stepy = Nath.round((y - y0) / t)；         //计算y轴每次移动的步长

    var out = setlnterval(function (){                 //设计定时器

        var o = getB (e);                                       //获取每次移动后的绝对定位坐标值

        var xO = o.x; 

        var yO = o.y;                

        e.style["left"] = (xO + stepx) + px';           //定位每次移动的位置

        e.style [,ftopn] = (yO + stepy) + px';        //定位每次移动的位置

        //如果距离终点距离小于步长，则停止循环，并校正最终坐标位置

        if (Math.abs(x - xO) <= Math.abs(stepx) ||  Math.abs(y - yO) <= Math.abs(stepy)){

            e.style["left"] = x + 'px';

            e.style["top"] = y + 'px1;

            clearTimeout(out);

        };

    }, 2)

};

    使用时应该定义元素绝对定位或相对定位显示状态，否则移动无效。在网页动画设计中，一般都使用这种定位移动的方式来实现。

<style type="text/css">

.block {width:20px; height:20px; position:absolute; left:200px; 

top:200px; background-color:red; }

</style>

<div class="block" id="blockl"></div>

<script>

tempi = document.getElementByld('blockl');

slide(tempi, 400, 400,60);

</script>