Javascript原生动画效果的实现

概述

JS框架越来越多，也越来越好用，如果了解了原生的JS动画的实现方式，能更好的有助于理解JS框架。

这里介绍一种计时器。

    setInterval(code, ms)
        周期性的执行一段代码，前一个参数是周期执行的代码，后一个是循环的周期，单位毫秒。
    clearInterval()
        清除计时器。

原理

利用计时器的循环，对元素的样式进行操作，最后清除计时器。

动画一：显示和隐藏图片

<img id="imgAd" src="images/ad.jpg" alt="无法显示">

var timer;
var cleartime;
var len = 0;

window.onload = function() {
    timer = setInterval(showAd, 1);
}

function showAd() {
    var adImg = document.getElementById("imgAd");
    len++;
    if (len >= 800) {
        clearInterval(timer);
        cleartime = setInterval(hideAd, 1);
    }
    adImg.style.width = len*1.25+"px";
    adImg.style.height = len+"px";
}

function hideAd() {
    var adImg = document.getElementById("imgAd");
    len--;
    if (len == 0) {
        clearInterval(cleartime);
    }
    adImg.style.width = len+"px";
    adImg.style.height = len+"px";
}