EaselJS简明教程系列第二部分,今天主要看看动画的实现,没有看过第一部分的可以看看教程1绘图。
动画是将静止的画面变为动态的艺术,由静止到动态的实现,主要依靠人眼的视觉残留效应。
动画可以分为逐帧动画和补间动画两种,逐帧动画把动画(例如人物动作)进行分解,然后绘制出连续的、具有代表性的动作,连续播放形成动画,逐帧动画适用于复杂的不连续的动画。
补间动画,指我们给定动作的初始状态和结束状态,然后动画系统(例如动画软件)自动补齐中间状态,从而形成动画,补间动画适用于物体的移动、状态的改变等简单的动画。
1.逐帧动画
首先看看我的codepen上的实例一。
<canvas id="testCanvas" width="960" height="400"></canvas>
// 创建stage并把它放到舞台上
stage = new createjs.Stage(document.getElementById("testCanvas"));
// 定义SpriteSheet
var ss = new createjs.SpriteSheet({
"animations":
{
"run": [0, 25, "jump"],
"jump": [26, 63, "run"]},
"images": ["http://createjs.com/Demos/EaselJS/assets/runningGrant.png"],
"frames":
{
"height": 292.5,
"width":165.75,
"regX": 0,
"regY": 0,
"count": 64
}
});
var grant = new createjs.Sprite(ss, "run");
grant.x = 360;
grant.y = 22;
// 把动画放到舞台上,创建一个间隔事件侦听,进行动画
stage.addChild(grant);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
实现逐帧动画主要需要两个东西,动作关键帧和动起来的机制。
1.1关键帧
我们从一个png图像里面弄进来实现Sprite,EaselJS有个专门的类SpriteSheet来实现。
传递给SpriteSheet类构造函数的参数需要定义三个重要的信息,
- Sprite使用的图片,或是图片集
- 每个图像帧的位置,可以以两种方式,一种是涉及连续大小的、相同的帧呈现,一种是每个帧单独设置。
- 动画,同样通话也可以以两种方式定义,一种是定义开始和结束帧的连续帧,一种是定义一个帧列表。
例如下面的代码
var data = {
images: ["sprites.jpg"],
frames: {width:50, height:50},
animations: {run:[0,4], jump:[5,8,"run"]}
};
var spriteSheet = new createjs.SpriteSheet(data);
var animation = new createjs.Sprite(spriteSheet, "run");
SpriteSheet方法主要这么几个,功能如下
clone () 克隆一个SpriteSheet实例 返回值是一个SpriteSheet对象
getAnimation ( name ) 返回指定的动画对象,参数name接受String类型,返回一个包含frames, speed, name, and next properties的对象
getAnimations () 返回一个由字符串命名的动画组成数组
getFrame ( frameIndex ) Object
getFrameBounds ( frameIndex [rectangle] ) Rectangle
getNumFrames ( animation ) Number
1.2 “动画”机制
使动画动起来的机制,这里使用EaselJS的另一个类Ticker。Ticker的使用貌似下面代码
createjs.Ticker.addEventListener("tick", tick);
function tick(evt) {
//some code
}
Ticker的几个关键方法,setFPS、getFPS设置和获取帧频,setInterval、getInterval设置和获取时间间隔,setPaused、getPaused设置和获取暂停等,这些都是静态方法。
2.补间动画
//创建stage对象,并放到舞台上
stage = new createjs.Stage(document.getElementById("testCanvas"));
//用来做加速度
var speed=1;
//创建spriteSheet对象
var ss = new createjs.SpriteSheet({
"animations": {"run": [0, 25, "run", 1.5], "jump": [26, 63, "run"]},
"images": ["http://createjs.com/Demos/EaselJS/assets/runningGrant.png"],
"frames":
{
"height": 292.5,
"width":165.75,
"regX": 0,
"regY": 0,
"count": 64
}
});
var grant = new createjs.Sprite(ss, "run");
grant.x =20;
grant.y = 22;
// 将人物放到舞台上
stage.addChild(grant);
createjs.Ticker.setFPS(20);
//动画动起来
createjs.Ticker.addEventListener("tick",tick);
function tick(evt){
grant.x+=3*speed;
stage.update();
speed+=.01;
}
//侦听鼠标单击,跳起来
stage.addEventListener("stagemousedown", handleJumpStart);
function handleJumpStart(evt){
grant.gotoAndPlay("jump");
}
再加上控制按钮
<input type="button" value="pause" id="pauseBtn" οnclick="togglePause();">
function togglePause(){
var paused = !createjs.Ticker.getPaused();
//alert(paused);
createjs.Ticker.setPaused(paused);
document.getElementById("pauseBtn").value = paused ? "unpause" : "pause";
}
完工!系列教程未完待续。
同时,原来的Ticker处理方法,也要进行相应的修改。
function tick(evt){
if (!createjs.Ticker.getPaused()) {
grant.x+=3*speed;
}else{
grant.Stop();
}
stage.update();
speed+=.01;
if(grant.x>=1000){
grant.x=0;
speed=1;
}
}
完工,系列教程还在继续,请大家持续关注。
---------------------------------------------------------------
前端开发whqet,关注web前端开发技术,分享网页相关资源。
---------------------------------------------------------------