动画是将静止的画面变为动态的艺术,由静止到动态的实现,主要依靠人眼的视觉残留效应。 动画可以分为逐帧动画和补间动画两种,逐帧动画把动画(例如人物动作)进行分解,然后绘制出连续的、具有代表性的动作,连续播放形成动画,逐帧动画适用于复杂的不连续的动画。 补间动画,指我们给定动作的初始状态和结束转台,然后动画系统(例如动画软件)自动补齐中间状态,从而形成动画,补间动画适用于物体的移动、状态的改变等简单的动画。 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 value= "pause" id= "pauseBtn" onclick= "togglePause();" type= "button" > 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 ; } } |