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='/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":?["/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='/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>