JS简单动画

77 阅读 0 评论 51 点赞

我是靠谱客的博主俭朴鞋子，最近开发中收集的这篇文章主要介绍JS简单动画，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

PS：本文是很简单的JS动画示例，如您不是JS菜鸟，没有看下去的必要。

当我们把连贯性的动作画到手册上，然后快速的翻页，这样就会在视觉上形成动画，至少从感官上觉得那是动画。对于动画，这的确是很形象的说明，一页一张图片，而一张图片代表一帧，这样所有的帧连续运行起来就形成了视觉上的动画。用JS来表现也是这个原理。之前Google为了纪念埃德沃德-麦布里奇182周年诞辰，在主页上放置了运动的马Doodle，我没看过源代码，但想必也是这样的原理。

首先来看这张网上荡下来的图片：

上面是鸟开始煽动翅膀加速到结束的几个连贯动作，按照上面的原理，很容易想到，只要按顺序把1-6的动作不断地覆盖循环，就可以形成鸟煽动翅膀的完整动作了。JS如何实现呢？

首先先定义一个能够承放一只鸟的容器：

<div id="one" class="secondWay"></div>
<div id="two" class="secondWay"></div>
<div id="three" class="secondWay"></div>
<div id="four" class="secondWay"></div>
<div id="five" class="secondWay"></div>

上面定义了五只鸟，CSS如下：

body{
overflow:hidden;
}
.secondWay{
width:112px;
height:95px;
background:transparent url(../images/bird.png) no-repeat top left;
}

bird.png即为上面的图片。body的overflow设置为hidden，目的是防止鸟飞出页面时产生滚屏。

接下来第二步就是让图片上的鸟的动作，不断（1-6,6-1不断循环）地在容器（DIV）上更替出现，从而形成煽动翅膀的动画：

var birdOption = {
divid: document.getElementById(divid),//承载鸟图片的div
birdsCount: 6,//图片中鸟的个数
moveWidth:112,//图片移动的宽度
speed: 10, //飞行速度
timeMils: 120, //变换动作时间 毫秒
marginLeft: -document.getElementById(divid).clientWidth*(i%2 == 1 ? i : 2),//div的初始位置，通过其改变鸟的顺序
birdIndex: 0 //图片中鸟的索引，从0开始，0代表第一只
};
/**
* 相当于启动一个线程，用于不断更换鸟飞的动作图片，模拟鸟飞的形态
*/
(function(){
if(birdOption.birdIndex == birdOption.birdsCount) birdOption.birdIndex = 0;
birdOption.divid.style.backgroundPosition = "-" + (birdOption.birdIndex * birdOption.moveWidth) + "px 0px";
window.setTimeout(arguments.callee, birdOption.timeMils);
birdOption.birdIndex++;
})();

上面用到了一个立即执行的闭包，并按照设定的时间间隔不停地自调用，从而实现鸟动作的更替。

最后一步是让鸟真正的飞起来，上面只是煽动翅膀而已，可以通过改变DIV的左边距来实现：

	/**
* 相当于启动一个线程，用于不断改变鸟的左边距，模拟鸟在向右飞行
*/
(function(){
if(birdOption.marginLeft > document.body.clientWidth) birdOption.marginLeft = -birdOption.divid.clientWidth;
birdOption.divid.style.marginLeft = birdOption.marginLeft;
window.setTimeout(arguments.callee,birdOption.timeMils);
birdOption.marginLeft = birdOption.marginLeft + birdOption.speed;
})()

也是通过闭包来实现，立即运行且不停地自调用，从而实现鸟在页面上从左向右的飞行。

这样就完成了整个过程。按照上面的原理，如果有更多连贯性的动作，那就完全可以模仿鸟在自然状态下的各种飞行状态，但前提是你能PS出这些图片，我觉得这个要比写Javascript难多了。。。。