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

ouyecw

已于 2023-04-14 09:31:14 修改

阅读量165

点赞数

分类专栏： cooltree 文章标签：前端动画 javascript

于 2023-04-07 10:15:39 首次发布

本文链接：https://blog.csdn.net/ouyecw/article/details/129990852

版权

本文详细介绍了Web前端CooTree框架的动画功能，包括如何创建和加载精灵图，解析精灵图，以及使用MovieClip动画类进行播放和控制，如nextFrame、play、stop等方法，并提及了框架的DOM和Canvas两种渲染模式。

摘要由CSDN通过智能技术生成

cooltree框架详解

1 动画创建精灵图

精灵图工具下载，使用说明如下
在这里插入图片描述

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 动画一次播放完成

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.