在项目中引入 js 文件一般是如下这种模式：
懒加载：
当文件被需要时才被加载即 执行fn()时，多次执行fn()只会加载一次js文件
预加载：
文件会在浏览器空闲的时候提前加载，有兼容性问题需慎用
setFPS、getFPS是EaselJS中Ticker类用于设置和获取帧频的函数。
EaselJS中Ticker类动画机制：
1、 逐帧动画
逐帧动画，把动画（例如人物动作）进行分解，然后绘制出连续的、具有代表性的动作，连续播放形成动画，逐帧动画适用于复杂的不连续的动画。
实现逐帧动画主要需要两个东西，动作关键帧和动起来的机制。
“动画”机制： 使动画动起来的机制，这里使用EaselJS的一个类Ticker
createjs.Ticker.addEventListener("tick", tick)function tick(evt) {
//some code
}
Ticker的几个关键方法，setFPS、getFPS设置和获取帧频，setInterval、getInterval设置和获取时间间隔，setPaused、getPaused设置和获取暂停等，这些都是静态方法。
createJS上的逐帧动画示例：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta author="pingfan" content="creatJSGame">
<title>玩转createJS游戏</title>
<link rel="stylesheet" href="../css/game.css">
</head>
<body>
<canvas id='canvas' width="960" height="400">浏览器不支持canvas，请使用现代浏览器。</canvas>
<script src='http://code.createjs.com/createjs-2013.12.12.min.js'></script>
<script>
var stage=new createjs.Stage("canvas"),
container=new createjs.Container(),
// 定义SpriteSheet 参数
data={
"animations":{
"run": [0, 25, "jump"],
//start,end,next,speed开始帧，结束帧，下一个动作，运行速度
"jump": [26, 63, "run",1]
},
"images": ["http://createjs.com/Demos/EaselJS/assets/runningGrant.png"],
"frames":{
//单个帧的高度，宽度，就是png图片里面那么多个帧一个帧的大小
"height": 292.5,
"width":165.75,
//相对于原始偏移的位置
"regX": 0,
"regY": 0,
//帧数
"count": 64
}
}
//实例精灵动画集
var move = new createjs.SpriteSheet(data)
//SpriteSheet类设置帧和动画,里面的run为开始的动画
var grant = new createjs.Sprite(move,"run")
//设置在舞台中的位置
grant.x=360
grant.y=100
// 把动画放到舞台上，创建一个间隔事件侦听，进行动画
container.addChild(grant)
stage.addChild(container)
createjs.Ticker.setFPS(60)
createjs.Ticker.addEventListener("tick",stage)
stage.update()
</script>
</body>
</html>
2、补间动画
补间动画，指我们给定动作的初始状态和结束状态，然后动画系统（例如动画软件）自动补齐中间状态，从而形成动画，补间动画适用于物体的移动、状态的改变等简单的动画。
补间动画实例，让刚刚那个原地跑步的人，向前方跑动，单击时表示跳起：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta author="pingfan" content="creatJSGame">
<title>玩转createJS游戏</title>
<link rel="stylesheet" href="../css/game.css">
</head>
<body>
<canvas id='canvas' width="960" height="400">浏览器不支持canvas，请使用现代浏览器。</canvas>
<button id='btn'>暂停pause</button>
<script src='http://code.createjs.com/createjs-2013.12.12.min.js'></script>
<script>
var stage=new createjs.Stage("canvas"),
container=new createjs.Container(),
// 定义SpriteSheet 参数
data={
"animations":{
"run": [0, 25, "run",1.5],
//start,end,next,speed开始帧，结束帧，下一个动作，运行速度
"jump": [26, 63, "run",1.5]
},
"images": ["../img/runningGrant.png"],
"frames":{
//单个帧的高度，宽度，就是png图片里面那么多个帧一个帧的大小
"height": 292.5,
"width":165.75,
//相对于原始偏移的位置
"regX": 0,
"regY": 0,
//帧数
"count": 64
}
}
//实例精灵动画集
var move = new createjs.SpriteSheet(data)
//SpriteSheet类设置帧和动画,里面的run为开始的动画
var grant = new createjs.Sprite(move,"run")
//设置在舞台中的位置
grant.x=20
grant.y=22
// 把动画放到舞台上，创建一个间隔事件侦听，进行动画
container.addChild(grant)
stage.addChild(container)
createjs.Ticker.setFPS(60)
createjs.Ticker.addEventListener("tick",tick)
//speed用来做加速度
var speed=1
function tick(){
if(!createjs.Ticker.getPaused()){
grant.x+=3*speed
stage.update()
speed+=.01
(grant.x>stage.canvas.width) && (grant.x=0,speed=1)
}
}
//侦听鼠标事件
stage.addEventListener("stagemousedown",handleClick)
function handleClick(){
//alert(11)
grant.gotoAndPlay("jump")
}
//设置按钮暂停
var btn=document.getElementById("btn")
btn.addEventListener("click",toggleMove,false)
function toggleMove(){
// grant.gotoAndStop()
//其实实现暂停和运动就是false和true切换
var paused = !createjs.Ticker.getPaused()
createjs.Ticker.setPaused(paused)
btn.value="暂停pause" ? "运动play" : "暂停pause"
}
stage.update()
</script>
</body>
</html>
