首页 > 编程笔记 > JavaScript笔记 > JS操作CSS样式

JS实现动画效果(利用定时器)

JavaScript 动画主要利用定时器(setTimeout 和 setInterval)来实现。设计思路:通过循环改变元素的某个 CSS 样式属性,从而达到动态效果,如移动位置、缩放大小、渐隐渐现等。

移动动画

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

示例

下面示例演示了如何设计一个简单的元素移动效果。通过指向元素、移动的位置,以及移动的步数,可以设计按一定的速度把元素从当前位置移动到指定的位置。本示例引用前面介绍的 getB() 方法,该方法能够获取当前元素的绝对定位坐标值。
//简单的移动参数
//参数:e表示元素,x和y表示要移动的终点坐标,t表示元素移动的步数
function slide (e, x, y, t) {
    var t = t || 100;  //初始化步数,步数越大,速度越慢,移动越逼真
    var o = getB(e);  //当前元素的绝对定位坐标值
    var x0 = o.x;
    var y0 = o.y;
    var stepx = Math.round((x - x0) / t);
    //计算x轴每次移动的步长,由于像素点不可用小数,所以会存在一定的误差
    var stepy = Math.round((y - y0) / t);  //计算y轴每次移动的步长
    var out = setInterval (function () {  //设计定时器
        var o = getB(e);  //获取每次移动后的绝对定位坐标值
        var x0 = o.x;
        var y0 = o.y;
        e.style["left"] = (x0 + stepx) + 'px';
        e.style["top"] = (y0 + stepy) + 'px';
        //如果距离终点距离小于步长,则停止循环并校正最终坐标位置
        if (Math.abs(x - x0) <= Math.abs(stepx) || Math.abs(y - y0) <= Math.abs(stepy)) {
            e.style["left"] = x + 'px';  //定位每次移动的位置
            e.style["top"] = y + 'px';  //定位每次移动的位置
            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="block1"></div>
<script>
    temp1 = document.getElementById('block1');
    slide (temp1, 400, 400, 60);
</script>

渐隐渐显

渐隐渐显效果主要通过动态修改元素的透明度来实现。

示例

下面示例实现一个简单的渐隐渐显动画效果。
//渐隐渐显动画显示函数
//参数:e表示元素,t表示速度,值越大速度越慢
//io表示显示方式,true表示渐显,false表示渐隐
function fade (e, t, io) {
    var t = t || 100;  //初始化渐隐渐显速度
    if (io) { var i = 0; }  //初始化渐隐渐显方式
    else { var i = 100; }
    var out = setInterval (function () {  //设计定时器
        setOpacity (e, i);  //调用setOpacity()函数
        if (io) {  //根据渐隐或渐显方式决定执行效果
            i ++;
            if (i >= 100) clearTimeout(out);
        } else {
            i --;
            if (i <= 0) clearTimeout(out);
        }
    }, t);
}
下面调用该函数:
<style type="text/css">
    .block { width:200px; height:200px; background-color:red; }
</style>
<div class="block" id="block1"></div>
<script>
    e = document.getElementById('block1');
    fade(e, 50, true);  //应用渐隐渐显动画效果
</script>

所有教程

优秀文章