关于错位动画的练习，原生js编写

　　最近在网上看到一个关于错位动画的文章，感觉非常有趣，便自己练习了一下，文章连接：http://www.w3cplus.com/animation/staggering-animations.html

　　练习出来的效果地址：http://godzbin.github.io/%E5%8A%A8%E7%94%BB%E6%B5%8B%E8%AF%95.html

　　

 

　　基本由原生js编写，代码如下：

　　

<html>
    <head>
        <meta charset="utf-8">
        <style>
        body{
            margin: 0;
        }
            .body{
                position: relative;
                margin: 10px;    
            }
            .mainBox{
                /*border: 1px #999 solid;*/
                background: #eee;
                float: left;
            }
            .mainBox2{
                margin-left: 100px;
            }
            .childBox{
                position: absolute;
                background: #f00;
                margin: 5px;
                /*float: left;*/
            }
        </style>
    </head>    
    <body>
        <button>开启动画</button>
        <div class="body">
            
        </div>
        <script>
            window.onload = function() {
                var isRun = false;
                var isStop = 0;
                var modeNumber = 1;

                function getBody() {
                    var body = document.getElementsByClassName("body");
                    return body[0];
                }
                // 主要的两个div
                function createMainDiv(className) {
                    var mainDiv = document.createElement("div");
                    mainDiv.className = className;
                    mainDiv.style.height = "200px";
                    mainDiv.style.width = "200px";
                    getBody().appendChild(mainDiv);
                }


                // 动画小方块
                function createChildDiv(className, row, col) {
                    var childDiv = document.createElement("div");
                    childDiv.className = className;
                    childDiv.style.height = "40px";
                    childDiv.style.width = "40px";
                    childDiv.style.left = col * 50 + "px";
                    childDiv.style.top = row * 50 + "px";
                    getBody().appendChild(childDiv);
                }
                // 4*4的方块方阵
                function createChildTable() {
                    for (var i = 0, l = 4; i < l; i++) {
                        for (var col_index = 0, col_l = 4; col_index < col_l; col_index++) {
                            var childClass = "childBox ";
                            var row = "row" + i;
                            var col = "col" + col_index;
                            var boxId = "box" + (i*4 + col_index);
                            createChildDiv(childClass + row + " " + col + " " + boxId, i, col_index);
                        }
                    }
                }

                // 行动画
                function animationRow(row, col) {
                    var a_row = row;
                    var a_col = col;
                    if (modeNumber > 0) {
                        a_row = Math.abs(row - (3 * modeNumber));
                        a_col = Math.abs(col - (3 * modeNumber));
                    }
                    var  stopBoxsValue = stopBoxs();

                    setTimeout(function() {
                        animationColumn(row, col);
                    }, 100  * Math.abs(a_row + a_col - stopBoxsValue) );
                }
                // 已经结束的方块数
                function stopBoxs() {
                    var stopBoxsValue = 0;
                    for (var i = 0, l = 4; i < l; i++) {
                        for (var col_index = 3, col_l = 0; col_index >= col_l; col_index--) {
                            var boxId = "box" + (i*4 + col_index);
                            var boxs = document.getElementsByClassName(boxId);
                            var box = boxs[0];
                            var left = col_index * 50 + 200 + 100;
                            var boxLeft = parseInt(box.style.left + 0);
                            if (modeNumber > 0 && boxLeft > left - 5) {
                                stopBoxsValue ++;
                            } else if (modeNumber < 0 && boxLeft < col_index * 50 + 5) {
                                stopBoxsValue ++;
                            }
                        }
                    }
                    return stopBoxsValue;
                }
                // 列动画
                function animationColumn(r, col_index) {
                    var isOK = true;
                    // var row = "row" + r;
                    var boxId = "box" + (r*4 + col_index);
                    var boxs = document.getElementsByClassName(boxId);
                    var left = col_index * 50 + 200 + 100;
                    var box = boxs[0];

                    var boxLeft = parseInt(box.style.left + 0);


                    if (modeNumber > 0 && boxLeft > left - 5) {
                        box.style.left = left + "px";
                    } else if (modeNumber < 0 && boxLeft < col_index * 50 + 5) {
                        box.style.left = col_index * 50 + "px";
                    } else {
                        box.style.left = boxLeft + (modeNumber * 5) + "px";
                        isOK = false;
                    }

                    // 如果动画结束或者 停止 ，则中断setTimeOut
                    if (isOK || isStop) {
                        isStop>0 && isStop--;
                        return;
                    }

                    setTimeout(function() {
                        animationColumn(r, col_index);
                    }, 500 / 60 * Math.sin(boxLeft / left * modeNumber));
                }
                // 动画
                function animation() {
                    for (var i = 0, l = 4; i < l; i++) {
                        for (var col_index = 3, col_l = 0; col_index >= col_l; col_index--) {
                            animationRow(i, col_index);
                        }
                    }
                }

                var button = document.getElementsByTagName("button");
                button[0].onclick = function() {
                    if(this.isRun){
                        var  runingBoxsValue =  16 - stopBoxs();
                        this.isStop = runingBoxsValue;
                        modeNumber = -modeNumber;
                    }
                    this.isRun = true;
                    animation();
                };
                createMainDiv("mainBox");
                createMainDiv("mainBox mainBox2");
                createChildTable();
            }
        </script>
    </body>
</html>

写完以后感觉自己对数学的掌握真是忘光了，老实说经常练习这些对逻辑是很有帮助的，请大家指教咯，哈哈

posted @ 2016-09-18 17:35  godz  阅读(650)  评论(0)    收藏  举报