使用JavaScript制作简单的动画 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Animate</title>
</head>
<body>
    <script type="text/javascript">
        function shake(e, distance, time) {
            if (typeof e === "string")
                e = document.getElementById(e);
            if (!time) {
                time = 500;
            }
            if (!distance) {
                distance = 10;
            }
            var originalStyle = e.style.cssText;
            e.style.position = "relative";
            var start = (new Date()).getTime();
            animate();
            function animate() {
                var now = (new Date()).getTime();
                var elapsed = now - start;
                var fraction = elapsed / time;
                if (fraction < 1) {
                    var x = distance * Math.sin(fraction * 4 * Math.PI);
                    e.style.left = x + "px";
                    setTimeout(animate, Math.min(25, time - elapsed));
                } else {
                    e.style.cssText = originalStyle;
                }
            }
        }
        function fadeIn(e, time) {
            if (typeof e === "string")
                e = document.getElementById(e);
            if (!time) {
                time = 2000;
            }

            var ease = Math.sqrt;

            var start = (new Date()).getTime();
            animate();
            function animate() {
                var now = (new Date()).getTime();
                var elapsed = now - start;
                var fraction = elapsed / time;
                if (fraction < 1) {
                    var opacity = 1 - ease(fraction);

                    e.style.opacity = String(opacity);

                    setTimeout(animate, Math.min(25, time - elapsed));
                }
            }
        }
        function fadeOut(e, time) {
            if (typeof e === "string")
                e = document.getElementById(e);
            if (!time) {
                time = 2000;
            }

            var originalStyle = e.style.cssText;
            var ease = Math.sqrt;

            var start = (new Date()).getTime();
            
            animate();
            function animate() {
                
                var now = (new Date()).getTime();
                var elapsed = now - start;
                var fraction = elapsed / time;
                if (fraction < 1) {
                    var opacity = ease(fraction);
                    e.style.opacity = String(opacity);
                    setTimeout(animate, Math.min(25, time - elapsed));
                }
            }
        }
    </script>
    <button onclick="shake(this)">点击我吧</button>
    <button onclick="fadeIn('fade')">消失</button>
    <button onclick="fadeOut('fade')">出现</button>
    <p id="fade">function fadeOut(e,time){ if(typeof e==="string")
        e=document.getElementById(e); if(!time){ time=500; } var
        originalStyle=e.style.cssText; var ease=Math.sqrt; var start=(new
        Date()).getTime(); animate(); function animate(){ var now=(new
        Date()).getTime(); var elapsed=now-start; var fraction=elapsed/time;
        if(fraction<1){ var opacity=1-ease(fraction);

        e.style.opacity=String(opacity); setTimeout(animate,
        Math.min(25,time-elapsed)); } else{ e.style.cssText=originalStyle; } }
        }</p>
</body>
</html>

 

动画是如何实现的

posted @ 2014-04-26 20:31  强子~Developer  阅读(508)  评论(0)    收藏  举报