你的位置:首页 > Java教程

[Java教程]关于错位动画的练习,原生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>

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