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

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

关于错位动画的练习,原生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. 实现 Web 后端和客户端之间的分布式和认证通讯

    stack.io 是一个用于实现 Web 后端和客户端之间的分布式和认证通讯. 服务器端进程之间的通讯是非常高效的,因为没有中间的代理.而来自客户端的请求通过 socket.io 进入 Node.js ...

  2. Subversion 1.8.1编译安装(self)

    Subversion 1.8中http客户端基于neon已经被移除,改用self.如果要支持http方式需要在安装svn前安装serf,安装serf推荐用serf-1.2.1,安装是./configu ...

  3. c函数调用过程原理及函数栈帧分析

    转载自地址:http://blog.csdn.net/zsy2020314/article/details/9429707       今天突然想分析一下函数在相互调用过程中栈帧的变化,还是想尽量以比 ...

  4. BAT-使用BAT方法删除目录下0KB文件

    @Echo Off For /f "tokens=*" %%i in ('dir /a-d /b /s "*.*"') do ( If " (Del ...

  5. CodeForces 176B Word Cut (计数DP)

    Word Cut Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Submit St ...

  6. UVA 11354 Bond(MST + LCA)

    n<=50000, m<=100000的无向图,对于Q<=50000个询问,每次求q->p的瓶颈路. 其实求瓶颈路数组maxcost[u][v]有用邻接矩阵prim的方法.但是 ...

  7. SOS 调试扩展 (SOS.dll)

    http://blog.csdn.net/cslie/article/details/2158780 SOS 调试扩展 (SOS.dll) 提供公共语言运行时(CLR)内部环境的有关信息,帮助你在Wi ...

  8. MES系统的有用存储过程

    USE [ChiefmesNEW]GO/****** Object: StoredProcedure [dbo].[st_WMS_ImportStockInBill] Script Date: 10/ ...

  9. /boot/grub/menu.lst详解

    基本概念menu.lst有时候也叫grub.conf,但是/boot/grub/下会有一个名叫menu.lst的符号链接指向它.它是grub引导系统的配置文件.基本选项default 0timeout ...

  10. Hadoop平台配置总结

    hadoop的配置,个人感觉是非常容易出问题.一个原因是要配置的地方多,还有个原因就是集群配置要在几台机器上都配置正确,才能保证配置好hadoop,跑起任务. 经过昨晚加今天上午的折腾,总算成功配好了 ...