最近在网上看到一个关于错位动画的文章，感觉非常有趣，便自己练习了一下，文章连接：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编写，代码如下：

　　

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <style>
  5.         body{
  6.             margin: 0;
  7.         }
  8.             .body{
  9.                 position: relative;
  10.                 margin: 10px;
  11.             }
  12.             .mainBox{
  13.                 /*border: 1px #999 solid;*/
  14.                 background: #eee;
  15.                 float: left;
  16.             }
  17.             .mainBox2{
  18.                 margin-left: 100px;
  19.             }
  20.             .childBox{
  21.                 position: absolute;
  22.                 background: #f00;
  23.                 margin: 5px;
  24.                 /*float: left;*/
  25.             }
  26.         </style>
  27.     </head>
  28.     <body>
  29.         <button>开启动画</button>
  30.         <div class="body">
  31.  
  32.         </div>
  33.         <script>
  34.             window.onload = function() {
  35.                 var isRun = false;
  36.                 var isStop = 0;
  37.                 var modeNumber = 1;
  38.  
  39.                 function getBody() {
  40.                     var body = document.getElementsByClassName("body");
  41.                     return body[0];
  42.                 }
  43.                 // 主要的两个div
  44.                 function createMainDiv(className) {
  45.                     var mainDiv = document.createElement("div");
  46.                     mainDiv.className = className;
  47.                     mainDiv.style.height = "200px";
  48.                     mainDiv.style.width = "200px";
  49.                     getBody().appendChild(mainDiv);
  50.                 }
  51.  
  52.                 // 动画小方块
  53.                 function createChildDiv(className, row, col) {
  54.                     var childDiv = document.createElement("div");
  55.                     childDiv.className = className;
  56.                     childDiv.style.height = "40px";
  57.                     childDiv.style.width = "40px";
  58.                     childDiv.style.left = col * 50 + "px";
  59.                     childDiv.style.top = row * 50 + "px";
  60.                     getBody().appendChild(childDiv);
  61.                 }
  62.                 // 4*4的方块方阵
  63.                 function createChildTable() {
  64.                     for (var i = 0, l = 4; i < l; i++) {
  65.                         for (var col_index = 0, col_l = 4; col_index < col_l; col_index++) {
  66.                             var childClass = "childBox ";
  67.                             var row = "row" + i;
  68.                             var col = "col" + col_index;
  69.                             var boxId = "box" + (i*4 + col_index);
  70.                             createChildDiv(childClass + row + " " + col + " " + boxId, i, col_index);
  71.                         }
  72.                     }
  73.                 }
  74.  
  75.                 // 行动画
  76.                 function animationRow(row, col) {
  77.                     var a_row = row;
  78.                     var a_col = col;
  79.                     if (modeNumber > 0) {
  80.                         a_row = Math.abs(row - (3 * modeNumber));
  81.                         a_col = Math.abs(col - (3 * modeNumber));
  82.                     }
  83.                     var  stopBoxsValue = stopBoxs();
  84.  
  85.                     setTimeout(function() {
  86.                         animationColumn(row, col);
  87.                     }, 100  * Math.abs(a_row + a_col - stopBoxsValue) );
  88.                 }
  89.                 // 已经结束的方块数
  90.                 function stopBoxs() {
  91.                     var stopBoxsValue = 0;
  92.                     for (var i = 0, l = 4; i < l; i++) {
  93.                         for (var col_index = 3, col_l = 0; col_index >= col_l; col_index--) {
  94.                             var boxId = "box" + (i*4 + col_index);
  95.                             var boxs = document.getElementsByClassName(boxId);
  96.                             var box = boxs[0];
  97.                             var left = col_index * 50 + 200 + 100;
  98.                             var boxLeft = parseInt(box.style.left + 0);
  99.                             if (modeNumber > 0 && boxLeft > left - 5) {
  100.                                 stopBoxsValue ++;
  101.                             } else if (modeNumber < 0 && boxLeft < col_index * 50 + 5) {
  102.                                 stopBoxsValue ++;
  103.                             }
  104.                         }
  105.                     }
  106.                     return stopBoxsValue;
  107.                 }
  108.                 // 列动画
  109.                 function animationColumn(r, col_index) {
  110.                     var isOK = true;
  111.                     // var row = "row" + r;
  112.                     var boxId = "box" + (r*4 + col_index);
  113.                     var boxs = document.getElementsByClassName(boxId);
  114.                     var left = col_index * 50 + 200 + 100;
  115.                     var box = boxs[0];
  116.  
  117.                     var boxLeft = parseInt(box.style.left + 0);
  118.  
  119.                     if (modeNumber > 0 && boxLeft > left - 5) {
  120.                         box.style.left = left + "px";
  121.                     } else if (modeNumber < 0 && boxLeft < col_index * 50 + 5) {
  122.                         box.style.left = col_index * 50 + "px";
  123.                     } else {
  124.                         box.style.left = boxLeft + (modeNumber * 5) + "px";
  125.                         isOK = false;
  126.                     }
  127.  
  128.                     // 如果动画结束或者 停止 ，则中断setTimeOut
  129.                     if (isOK || isStop) {
  130.                         isStop>0 && isStop--;
  131.                         return;
  132.                     }
  133.  
  134.                     setTimeout(function() {
  135.                         animationColumn(r, col_index);
  136.                     }, 500 / 60 * Math.sin(boxLeft / left * modeNumber));
  137.                 }
  138.                 // 动画
  139.                 function animation() {
  140.                     for (var i = 0, l = 4; i < l; i++) {
  141.                         for (var col_index = 3, col_l = 0; col_index >= col_l; col_index--) {
  142.                             animationRow(i, col_index);
  143.                         }
  144.                     }
  145.                 }
  146.  
  147.                 var button = document.getElementsByTagName("button");
  148.                 button[0].onclick = function() {
  149.                     if(this.isRun){
  150.                         var  runingBoxsValue =  16 - stopBoxs();
  151.                         this.isStop = runingBoxsValue;
  152.                         modeNumber = -modeNumber;
  153.                     }
  154.                     this.isRun = true;
  155.                     animation();
  156.                 };
  157.                 createMainDiv("mainBox");
  158.                 createMainDiv("mainBox mainBox2");
  159.                 createChildTable();
  160.             }
  161.         </script>
  162.     </body>
  163. </html>

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

关于错位动画的练习，原生js编写的更多相关文章

  1. 原生js编写的安全色拾色器

    <html > <head> <meta http-equiv="Content-Type" content="text/html; cha ...

  2. 原生JS编写getByClass、addClass、removeClass、hasClass

    前言: 年后换了工作,在现在的公司写交互主要使用JS原生:刚刚入门前端的时候写交互一直用的原生JS,虽然用的不怎么样.后来去之前的公司之后,leader主张把jQuery用好,JS原生自然就熟练了:一 ...

  3. 使用原生JS编写ajax操作XMLHttpRequst对象

    ajax其本质就是XMLHttpRequest,现在jquery调用异步的方法很方便,但是也不能忘记原生的JS去编写ajax; 需要注意的是,很多人在写的时候喜欢只用XMLHttpRequest对象r ...

  4. 原生JS编写的照片墙效果实例演示特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js万年历，麻雀虽小五脏俱全，由原生js编写

    对于前端来说,我们可能见到最多的就是各种各样的框架,各种各样的插件了,有各种各样的功能,比如轮播啊,日历啊,给我们提供了很大的方便,但是呢?我们在用别人这些写好的插件,框架的时候,有没有试着问一问自己 ...

  6. 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)

    项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...

  7. 轮播插件、原生js编写，弄懂这个，基本上各种轮播都可以自己写了

    直接上代码了: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  8. 原生js编写设为首页兼容ie、火狐和谷歌

    // JavaScript Document // 加入收藏 <a onclick="AddFavorite(window.location,document.title)" ...

  9. 日历组件 原生js

    自己基于原生js编写的日历组件 git地址: https://github.com/lihefen/calendar.git demo : https://lihefen.github.io/cale ...

随机推荐

  1. google proto buffer安装和简单示例

    1.安装 下载google proto buff. 解压下载的包,并且阅读README.txt,根据里面的指引进行安装. $ ./configure $ make $ make check $ mak ...

  2. Java设计模式系列之迭代器模式

    迭代器模式定义 迭代器模式(Iterator),提供一种方法顺序访问一个聚合对象中的各种元素,而又不暴露该对象的内部表示. 迭代器模式的角色构成 (1)迭代器角色(Iterator):定义遍历元素所需 ...

  3. jpa仓库接口

    可以使用的仓库接口有: Repository: 是 Spring Data的一个核心接口,它不提供任何方法,开发者需要在自己定义的接口中声明需要的方法. CrudRepository: 继承Repos ...

  4. Webstorm2016激活码[ 转]

    转至:http://blog.csdn.net/tingwode2014_/article/details/51063657 43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QT ...

  5. C++常用容器

    vector 顺序容器,和数组类似,可从尾部快速的插入和删除,可随机访问. vector的常用成员函数: #include<vector> std::vector<type> ...

  6. MVC神韵---你想在哪解脱！（十）

    增加追加数据的方法和视图 现在我们将要在数据库中追加并保存一些数据.我们将要创建一个表单以及一些表单输入控件,用来输入数据信息.当用户提交表单时将把这些用户输入的信息保存在数据库中.我们可以通过在浏览 ...

  7. lua入门

    print("hello lua") lua官网 在线运行代码 数据类型 数据类型 描述 number 数字,可当作double,5/2 == 2.5 string 字符串 nil ...

  8. 【android-cocos2d-X 环境配置】在Mac下搭建Cocos2d-X-android开发环境！

    转自:http://blog.csdn.net/dingkun520wy/article/details/17097593 (1)下载 首先要下载好要用到的东西: 1.android-SDK 地址是  ...

  9. 更新插件时提示“正在更新缓存”“正在等待jockey-backend退出”

    Ubuntu 11 更新语言插件, 更新时 提示正在更新缓存”“正在等待jockey-backend退出”,然后就不动了. 解决方案: 在终端中键入ps -e | grep jockey 系统会显示一 ...

  10. 查看数量linux下查看cpu物理个数和逻辑个数

    首先声明,我是一个菜鸟.一下文章中出现技术误导情况盖不负责 hadoop@chw-desktop3:~$ cat /proc/cpuinfo processor : 0 vendor_id : Gen ...