HTML5动画框架easeljs中setFPS函数 20
想问一下这个函数设置的是每秒播放祯的数目，那么Ticker.addEventListener("tick",stage)；中stage的更新与fps有关系么？这个tick...
想问一下这个函数设置的是每秒播放祯的数目，那么Ticker.addEventListener("tick",stage)；中stage的更新与fps有关系么？ 这个tick事件是如何被触发的？
展开
1个回答
展开全部
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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
