createjs入门
来源:互联网 发布:macbook air推荐软件 编辑:程序博客网 时间:2024/05/16 23:39
createjs是一个轻量级的框架,稍微有点时间和耐心,就可以把全部源代码都看一遍,毕竟只有三十几个js文件。地址:http://www.createjs.com/
开发createjs的动画或游戏,没有重型的IDE或什么工具支持,我们只能从零开始写js。一方面,这样对于jser来说,足够灵活;另外一方面,createjs因此足够精简足够小。
createjs由几个库组成:
l easeljs,这个是核心,包括了显示列表、事件机制;
l preloadjs,用于预加载图片等;
l tweenjs,用于控制元件的缓动;
l soundjs,用于播放声音。
easeljs 81k,preloadjs 31k,soundjs 34k,tweenjs 18k,对于手机小动画或小游戏,其实只需要加载easeljs即可,因为核心库已经涵盖了简单图片的预加载功能。
开发步骤:
1、 下载类库,可以使用源代码,也可以使用压缩过的min.js,就好像平时写网页一样。
2、 建立html和canvas标签,onload后再执行createjs相关逻辑。
3、 编写createjs逻辑。这个非常简单,因为createjs只提供了最简单的基础功能,我们理解了基础功能后就可以叠积木了。
关于createjs,最关键是要理解类结构
上图列出了createjs的主要类结构,所有舞台上的内容都是元件,元件的基类是DisplayObject。Container可以包含子元 件,舞台Stage本身也是Container。另外Sprite用于表现SpriteSheet帧动画人物、Bitmap用于展示纯静态的人物。
而Filter和Shadow则是滤镜分支,可以针对任意元件实现颜色变换、模糊、阴影等效果。使用滤镜的方式跟Flash一致,需要新建Filter实例,添加到目标元件的FilterList中,Createjs框架在下一帧就会把该元件加上滤镜效果。
下边以一个例子概要学习一下Createjs的使用:
<script type="text/javascript"> var stage; function init() { var canvas = document.getElementById("testCanvas"); stage = new createjs.Stage(canvas); stage.autoClear = true;//添加背景图 var bg = new createjs.Bitmap("../res/bg.jpg"); stage.addChild(bg);//增加5个小人,不断做旋转和放缩 for (var i = 0; i < 5; i++) { var man = new createjs.Bitmap("../res/grossini.png"); man.regX = 42; man.regY = 60; man.x = canvas.width/6*(i+1); man.y = canvas.height/5*4; man.scaleX = man.scaleY = 1; stage.addChild(man); createjs.Tween.get(man, {loop: true}, true) .to({rotation: 360, scaleX:2, scaleY:2}, 1000).to({rotation: 360, scaleX:1, scaleY:1}, 1000); man.addEventListener("click", function(event) { console.log("click", event.currentTarget); }); //监听点击非常方便,位图的透明区域忽略鼠标事件 } var images = []; for (var i = 1; i <= 14; i++) { images.push("../res/grossini_dance_" + (i<10?("0"+i):i) + ".png"); }//增加5个帧动画小人,不断播放14帧画面 for (var j = 0; j < 5; j++) { var sheet = new createjs.SpriteSheet({ images: images, frames: {width: 85, height: 121, regX: 42, regY: 60} }); //需要设置每帧的宽高,注册点信息 var man = new createjs.Sprite(sheet); man.framerate = 60/7; man.x = canvas.width/6*(j+1); man.y = canvas.height / 3; man.play(); stage.addChild(man); } stage.update(); createjs.Ticker.setFPS(60); createjs.Ticker.addEventListener("tick", tick); }//这里有点猥琐,需要用户自行控制舞台不断update更新 function tick(event) { stage.update(event); } </script>
- createjs入门
- 入门createjs———EaselJS模块基本介绍
- CreateJS 事件
- CreateJS 动画
- createjs接触
- 初识CreateJS
- 初识createJS
- Hello Createjs
- 入门createjs———easelJS教程(1)绘制一个圆形
- CreateJS 绘制图形1
- CreateJS 绘制图形2
- createjs介绍--1
- createjs初学-关于cache
- createjs初学-关于Ticker
- 使用CreateJS绘制图形
- createJs游戏引擎
- CreateJS-EaseJS 应用
- CreateJS框架初探
- Timer和TimerTask(转载)
- Java线程面试题 Top 50
- 省赛总结
- 想加入一行代码吗?使用<code>标签
- Linux 文件系统与设备文件系统 (一)—— udev 设备文件系统
- createjs入门
- Mysql主从复制的一般步骤整理说明(异步复制)
- Android触摸屏事件派发机制详解与源码分析一(View篇)
- Ubuntu 安装Redis
- 暴力枚举算法之谁是嫌疑犯
- Win10 + cygwin64 + ndk 配置ijkplayer android
- mac xgboost安装
- Linux 字符设备驱动开发基础(六)—— VFS 虚拟文件系统解析
- OMNet++ .ned文件的编辑