EaselJS简明教程2-动画
来源:互联网 发布:05~06赛季科比数据 编辑:程序博客网 时间:2024/05/20 15:10
系列教程目录
EaselJS简明教程1-绘图
EaselJS简明教程2-动画
EaselJS简明教程2动画,动画是将静止的画面变为动态的艺术,由静止到动态的实现,主要依靠人眼的视觉残留效应。
动画可以分为逐帧动画和补间动画两种,逐帧动画把动画(例如人物动作)进行分解,然后绘制出连续的、具有代表性的动作,连续播放形成动画,逐帧动画适用于复杂的不连续的动画。
补间动画,指我们给定动作的初始状态和结束状态,然后动画系统(例如动画软件)自动补齐中间状态,从而形成动画,补间动画适用于物体的移动、状态的改变等简单的动画。
1.逐帧动画
首先看看我的codepen上的实例一。
<canvas id="testCanvas" width="960" height="400"></canvas>
// 创建stage并把它放到舞台上stage = new createjs.Stage(document.getElementById("testCanvas"));// 定义SpriteSheetvar 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" onclick="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; } }
完工,系列教程还在继续,请大家持续关注。
- EaselJS简明教程2-动画
- EaselJS简明教程2-动画
- EaselJS简明教程2-动画
- EaselJS简明教程2-动画
- EaselJS简明教程2-动画
- EaselJS简明教程1-绘图
- EaselJS简明教程1-绘图
- EaselJS简明教程1-绘图
- XML简明教程(2)
- numpy简明教程(2)
- Struts、Hibernate简明教程2
- 虚拟现实x3d简明教程2
- 简明x86汇编语言教程(2)
- php程序设计简明教程2
- 简明x86汇编语言教程(2)
- vim简明教程(step 2)
- Scala简明教程(2)
- GCC简明教程(2)
- UIWebView与js(JavaScript)交互
- XCode快捷键使用
- Exynos4412裸机开发系列教程--TICK机制
- 排列数据的输出(二) 循环处理
- ios获得UIImage的主色调方法
- EaselJS简明教程2-动画
- js 清空某个div中的input标签值
- android之JSON 进行网络数据交换
- Android 给类及方法自动添加注释 高亮显示选中词
- Cocos2d-x 3.1 一步步做屏幕适配
- Description Resource Path Location Type undefined reference to
- 进程控制
- datagrid直接编辑保存的“设计缺陷”
- 【JSP开发】JSTL标签参考手册