hanyeah-pixijs入门-动画

02

2016
08

pixijs入门-动画

上一节了解了一下事件，这次来了解一下动画，不是改变坐标形成的动画，而是序列帧组成的动画。

pixi.js中用的是MovieClip，和as一样。

老规矩，先来看一下效果。

代码如下：

<html>
	<head>
		<title>pixi.js-动画</title>
		<script type="text/javascript" src="/js/pixi.min.js"></script>
		<script type="text/javascript">

		var frameRate=10;
		var renderer;
		var stage;
		var tf;
		var fps=0;
		var ticker;
		window.onload = function() {
			renderer = new PIXI.WebGLRenderer(600, 400);
			document.body.appendChild(renderer.view);
			stage = new PIXI.Container();

			var texture = PIXI.Texture.fromImage('mc.png');

			var textureArray = [];
			var arr=[[0,0,101,101],[101,0,101,101],[0,101,101,101],[101,101,101,101]];
			for (var i = 0; i < 4; i++) {
				var texture = new PIXI.Texture(texture, new PIXI.Rectangle(arr[i][0], arr[i][1], arr[i][2], arr[i][3]));
				textureArray.push(texture);
			};
			var mc = new PIXI.extras.MovieClip(textureArray);
			stage.addChild(mc);
			mc.play();
			mc.x=200;
			mc.y=200;

			tf = new PIXI.Text("fps:0", {
				font: '24px Arial',
				fill: 0xff1010,
				align: 'left'
			});
			stage.addChild(tf);

			refresh();

			setInterval(showFps, 1000);
		}
		function showFps(){
			tf.text="fps:"+fps;
			fps=0;
		}
		function refresh(){ 
			fps++;
			var t=new Date().getTime();
			renderer.render(stage);
			t=new Date().getTime()-t;
			var delay=1000/frameRate;
			if(t>=delay){ 
				refresh();
			}
			else{ 
				setTimeout(refresh,delay-t);
			}
		}

		</script>
	</head>
	<body>
	</body>
</html>

用到了Texture类和MovieClip类。

Texture用来管理图片资源，MovieClip用来实现动画，这两个类还是很重要的。

其实很简单，就是在MovieClip初始化的时候，传入一个Texture对象组成的数组，Texture初始化的时候，可以使用一个已存在的Texture和一个矩形区域（其实有3个矩形区域参数，其他两个参数作用不清楚）。

MovieClip是继承自Sprite的，和as一样。MovieClip初始化之后，需要手动调用play来播放，默认是不播放的。

播放速度有问题，和刷新速度不同步，因为我们是自己写的setTimeout实现的刷新。不知道是不是做法不对，或者自己控制MovieClip刷新。