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难多了。。。。

 

测试了，有意思。晚上回去看看代码学习下

只需要一个div一张图片，把图片做为背景。然后用js不断修改样式中的background-position即可。
下面假设背景是1200px*200px（即每个小图片是200px*200px）

<div id="targetDiv" style="width:200px;height:200px;background:transparent url('bgimage.gif') no-repeat 0 0;"/>

var nowPositionX=0,$div=document.getElementById('targetDiv');
setTimeout(function(){
   nowPositionX+=200;
   if(nowPositionX>1000)
      nowPositionX=0;
   $div.style.backgroundPosition=(nowPositionX+'px 0');
},1000);

嗯 我是提供了两种方法，第二种就是通过改变background-position实现的。

如果想要移除一只鸟呢？
我看第二种里面就是将margin-left变成 -clientWidth实现循环飞
function 里面套function确实很有想法~ 但是这样真的就把方法闭到没办法操作了

可以操作的，闭包里面的变量都是外变量，就是说是在外部定义的，所以可以注册监听事件，通过改变闭包外环境变量（或者全局变量）的方式，从而改变闭包的执行....