Web前端cooltree框架详解2：动画播放

cooltree框架详解

框架地址如下
https://github.com/ouyecw/cooltree

1 动画创建精灵图

支持由TexturePackerGUI创建的plist文件，序列帧动画以及资源解析。
精灵图工具下载，使用说明如下

2 精灵图加载及解析

精灵图加载

	//新建一个加载器
	const loader=new Loader();
	//加载文件路径，请保持精灵图png与json命名一致
	loader.load(["assets/img/anim.png","assets/img/anim.json"]);

精灵图解析及获取

function loadComplete(e)
{
	//将加载完成的文件数据导入资源管理器
	AssetManager.addFiles(e.params);
	
	//根据动画标签与id，从动画管理器获取动画实例（MovieClip）
	mc=MovieManager.getInstance("anim_ladderwalk","Zombie_ladder");
}

3 动画播放及控制

MovieClip动画类，相关动画控制方法如下：
nextFrame() 跳转下一帧
play() 播放
stop() 停止
gotoAndStop(n) 跳转n帧并停止播放
gotoAndPlay(n) 跳转n帧并开始播放

MovieClip相关动画属性如下：
currentFrame 当前帧
totalFrame 总帧数
reverse false正序播放 true反序播放
rate 动画播放频率，越大播放速度越慢
swing true来回反复播放

MovieClip相关动画事件如下：
Event.PLAY_OVER 动画一次播放完成

4 Spine动画支持

cooltree框架的两种渲染模式

DOM渲染模式
Global.useCanvas=false;

Canvas渲染模式
Global.useCanvas=true;

查看演示结果
演示地址已失效

const {InputText,Event,QuickUI,TweenLite,Button,Effect,Source,Global,Stage,LoadingClip,Loader,AssetManager,Factory,StageEvent,ObjectUtil,MovieManager,MathUtil} = ct

let mc,input,speed,frame,count,time;

window.onload = function()
{
	/**
	 * 显示模式 true为canvas显示 false为DOM显示（默认为true）
	 */
	Global.useCanvas=false;
	
	/**
	 * 初始化场景
	 */
	const stage=new Stage();
	
	/**
	 * 设置父级容器（默认自动添加到body里面新的节点）
	 */
	stage.div=document.getElementById("stage");
	
	/**
	 * 初始化场景的宽度和高度
	 */
	stage.initCanvas(800,450);
	
	
	/**
	 * 初始化工作已经完成
	 */
	
	//新建一个加载组件
	const clip=new LoadingClip("assets/img/buffer.png");
	
	//移动到舞台中间位置
	clip.moveTo(stage.stageWidth*0.5,stage.stageHeight*0.5);
	
	//添加到舞台上
	stage.addChild(clip);
	
	//新建一个加载器
	const loader=new Loader();
	
	//添加事件侦听器
	loader.addEventListener(Loader.LOAD_COMPLETE,loadComplete);
	
	//加载文件路径
	loader.load(["assets/img/anim.png","assets/img/anim.json"]);
}

function loadComplete(e)
{
	//清除事件侦听器
	e.target.removeEventListener(Loader.LOAD_COMPLETE);
	
	//清空舞台 （Stage.current为获取当前舞台的静态属性）
	Stage.current.removeAllChildren(true);
	
	//将加载完成的文件数据导入资源管理器
	AssetManager.addFiles(e.params);
	
	mc=MovieManager.getInstance("anim_ladderwalk","Zombie_ladder");
	
	//添加到舞台
	Stage.current.addChild(mc);
	
	mc.scale=2;
	
	mc.moveTo(Stage.current.stageWidth*0.5,20);

  mc.addEventListener(Event.PLAY_OVER,playOver);

  count=0;
	
	/**
	 * 显示按钮
	 */
	getBtn("STOP",20).name="b1";
	getBtn("REVERSE",60).name="b2";
	getBtn("SPEED UP",100).name="b3";
	getBtn("SPEED DOWN",140).name="b4";
	getBtn("SWING OPEN",180).name="b5";
	
	const bottom=Factory.c("bs");
	bottom.setup("#FFFFFF",120,50,8,2,"#888888");
	
	bottom.moveTo(110,220);
	Stage.current.addChild(bottom);
	
	const tf=Factory.c("tf",{text:"Frame:",width:100,size:22});
	Stage.current.addChild(tf);
	tf.moveTo(30,232);
	
	input=new InputText(true,false,1);
	input.width=110;
	input.text="1";
	input.size=22;
	input.moveTo(115,230);
	Stage.current.addChild(input);
	input.addEventListener(InputText.CHANGE,textChange);
	
	getBtn("GOTO AND STOP",300).name="b6";
	getBtn("GOTO AND PLAY",340).name="b7";
	getBtn("NEXT FRIME",380).name="b8";
	
	speed=Factory.c("tf",{text:"Speed:1",width:150,size:22});
	Stage.current.addChild(speed);
	speed.moveTo(610,32);
	
	frame=Factory.c("tf",{text:"Frame:1",width:150,size:22});
	Stage.current.addChild(frame);
	frame.moveTo(610,72);

  time=Factory.c("tf",{text:"Time:0",width:150,size:22});
	Stage.current.addChild(time);
	time.moveTo(610,112);
	
	Stage.current.addEventListener(StageEvent.ENTER_FRAME,enterFrame);
}

function playOver(e)
{
  count++;
  time.text="Time:"+count;
}

function enterFrame(e)
{
	frame.text="Frame:"+mc.currentFrame;
}

function getBtn(text,posY)
{
	let width=text.length*16+30;
	let btn=QuickUI.getButton(6,width,32,"#999999","#3f3f3f");
	Stage.current.addChild(btn);
	btn.moveTo(30+width*0.5,posY);
	btn.setLabel({text:text,size:20,x:-text.length*6,y:-10,color:"#FFFFFF",width:width});
	btn.addEventListener(StageEvent.MOUSE_CLICK,click_handler);
	return btn;
}

function textChange(e)
{
	let str=e.params;
	str=(str.trim());
	if(isNaN(parseInt(str))) return e.target.text="1";
	const frame=parseInt(str);
	if(frame<1) e.target.text="1";
	else if(frame>mc.totalFrame) e.target.text=""+mc.totalFrame;
}

function click_handler(e)
{
	switch(e.target.name)
	{
		case "b1":
			if(mc._paused){
				mc.play();
				e.target.tf.text="STOP";
			}else{
				mc.stop();
				e.target.tf.text="PLAY";
			}
			break;
		
		case "b2":	
			mc.reverse=!mc.reverse;
			break;
			
		case "b3":
			if(mc.rate>1) mc.rate-=1;
			speed.text="Speed:"+(mc.rate==1 ? "" : "1/")+mc.rate;
			break;
			
		case "b4":
			if(mc.rate<5) mc.rate+=1;
			speed.text="Speed:1/"+mc.rate;
			break;
			
		case "b5":
			if(mc.swing){
				e.target.tf.text="SWING OPEN";
				mc.swing=false;
			}else{
				e.target.tf.text="SWING CLOSE";
				mc.swing=true;
			}
			break;
			
		case "b6":
			mc.gotoAndStop(parseInt(input.text.trim()));
			break;
			
		case "b7":
			mc.gotoAndPlay(parseInt(input.text.trim()));
			break;
			
		case "b8":
			mc.nextFrame();
			break;
	}
}

Web前端cooltree框架详解1：遮罩使用
Web前端cooltree框架详解3：文本应用