hanyeah-AnimateCC实现文档类

11

2016
04

AnimateCC实现文档类

前边通过AnimateCC中的导入自定义模板，实现了库链接（AnimateCC实现库链接），再来试一下，实现文档类。

模板代码如下：

<!--
	NOTES:
	1. All tokens are represented by '$' sign in the template.
	2. You can write your code only wherever mentioned.
	3. "DO NOT" alter the tokens in the template html as they are required during publishing.
-->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>$TITLE</title>
<!-- write your code here -->
<style>
	*{margin: 0;padding: 0;}
	body{background-color: #ffffff;}
</style>
<script type="text/javascript">
	function aa(){
		console.log("aaa");
	}
</script>

$CREATEJS_SCRIPTS
<!--自定义类-->


$SCRIPT_START
var canvas, stage, exportRoot;
function init() {
	// --- write your JS code here ---
	$CJS_INIT


}
$PLAYSOUND
$SCRIPT_END



<!-- write your code here -->

</head>
<body onload="init();">
	<canvas id="$CANVAS_ID" width="$WT" height="$HT" style="background-color:$BG"></canvas>
</body>
</html>

引入了Main.js，在init方法的最后，执行Main()方法，Main方法我们需要在Main.js中去实现。

Main.js代码：

function Main(){
	console.log(ss)
	console.log(stage)
	console.log(exportRoot)
	stage.addEventListener("tick",mainTick);
}


function mainTick(e){
	exportRoot.circle.x+=10;
	if(exportRoot.circle.x>550){
		exportRoot.circle.x-=550;
	}
}

在Main.js中，我们让stage侦听“tick”事件（相当于as中的“enterFrame”），然后改变舞台上的元件坐标，实现了动画效果。

可以仔细看一下Main方法中的3个console.log的输出结果，这3个变量ss,stage,exportRoot是在主html中引擎为我们定义的。ss就是一个普通的object，应该是用于传递变量的;stage是舞台对象，就是createjs中Stage对象的实例，熟悉as的同学，看到stage,应该很亲切了；exportRoot是引擎定义的文档类的实例，是stage的子显示对象，这个很重要，因为我们在舞台上放的所有的元件都可以通过这个对象来获取。

从mainTick方法中我们可以看到，获取舞台上的元件circle，可以直接使用exportRoot.circle，但是不能使用exportRoot.getChildByName("circle"),除非我们自己定义exportRoot.circle.name="circle"。舞台上的元件、库中的元件是怎么定义的，可以自己打开“文档类.js”看看。

还有一点需要注意的，如果舞台上存在重名的元件（位于同一帧或者不同的帧）并且属于不同的库元件的实例，系统会自动为后面的元件添加"_1"、“_2”等序号，例如：如果舞台上有两个元件都在属性面板中命名为“circle”，那么在系统生成的js中的定义会是“this.circle”和“this.circle_1”。

源码打包下载