最近在网上看到一个关于错位动画的文章，感觉非常有趣，便自己练习了一下，文章连接：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>
写完以后感觉自己对数学的掌握真是忘光了，老实说经常练习这些对逻辑是很有帮助的，请大家指教咯，哈哈