这些年我做过的项目

安卓Canvas渲染引擎——hEngine

教程收集

欢迎访问hanyeah的blog

23
2015
01

(九)createjs-ButtonHelper

flash里边还有一个用的比较多的显示元件,没错就是SimpleButton,缩写是“SB”,设计人员喜欢,程序人员不喜欢的一个显示元件,其实只是作为按钮的话,还是很方便的。

就像as里边经常用MovieClip或是Sprite实现按钮一样,createjs里边完全可以用Sprite来实现(虽然没翻源码,猜想官方也是这么做的),所以如果够用的话就没必要自己再写一遍了。

ButtonHelper,这个名字不敢恭维,为什么不叫SimpleButton或者干脆叫Button,还是有其他深意?暂时先不管了,还是直接拿来用吧。

23
2015
01

(八)createjs-Container

Sprite不是作为容器来用的,那么用什么做容器呢?直接用Container,记得as里边DisplayObjectContainer是不能被实例化的,又不一样了吧。

其他就没什么好说的了,源码放多了也只是乱,有用的就这一句,创建容器:

  1. var con = new createjs.Container();//Sprite做了MovieClip的事,容器就用Container来做了。

然后就可以addChild了,然后就可以开始控制con的属性了。

23
2015
01

(七)createjs-mask

遮罩。

flash里边做动画,很重要的几个概念:补间动画、遮罩层、引导层。

不知道怎么说,反正遮罩很重要。看完Sprite就想起来要看看遮罩了。

canvas本身就能实现遮罩效果,createjs里边的遮罩估计也就是用了canvas里原生的东西,也没做什么更多的处理。

还是先看代码:

23
2015
01

(六)createjs-Sprite

基础的都学习了,接下来就是中级的了。

学习as的时候,最开始都是用MovieCLip,然后水平提高一点,用的最多的就是Sprite了,为了效率。

createjs里边的Sprite相当于as里边的MovieClip,有stop/play/gotoAndStop/gotoAndPlay等方法。

先看代码:

23
2015
01

(五)createjs-Bitmap

看过Text之后,再来看看Bitmap,用js的话,graphic估计会用的很少,大多数时候还是用位图的。

html里边自己的image就挺方便的,canvas处理image也挺方便。这里边没有BitmapDate,和as里不一样,为什么没有,可以看看Canvas的API,本身就提供了对于像素级的处理。LufyLegend里边提供了BitmapDate的封装,不知道createjs以后会不会也提供。

23
2015
01

(四)createjs-Text

敲完前三个例子,就算入了门了。接下来熟悉一下常用的类,先从基本的显示对象开始,as里边最基本的显示对象就3种:graphic、textField、bitmap,createjs里边也是。想想也是,屏幕上能看到的无非就是这三种:矢量图、文本、位图。

shape里边已经用过graphic了,就不再单独拿出来了。先来看一下TextField,createjs里边叫Text。

还是直接上源码,个人理解都在注释里:

23
2015
01

(三)createjs-Animation

前三个都是api中的例子。加入了一些自己的理解。

动画无非就是定时改变现实对象,或者改变现实对象的状态。第一个例子学会了在舞台上呈现一个显示对象—Shape类型的圆;第二个例子学会了定时做一些事情tick,以及鼠标交互。

结合起来就可以做动画了。还是直接上代码:

23
2015
01

(二)createjs-Events

创建了舞台,创建了一个圆形,然后就想能够通过点击这个圆或是舞台来控制圆的状态,或者定时更新圆的状态来形成动画效果。

createjs的事件和as很像,但是有很大区别。官方没说明白,有没有人告诉,就都是坑啊。幸好有源码,而且js圆满很好看懂,可以自己研究。

作为一个程序员(勉强算得上吧),不善于表达,还是直接上例子:

23
2015
01

(一) createjs-Stage

adobe cc开发html5使用的是createjs,找来createjs的api看了看,确实和as很像。

最近createjs官网打不开,可能跟谷歌有关吧,不知道以后是不是也打不开了。好不容易才从GitHub下载了一份源码(百度搜createjs,首页没有,排在好几页之后了,用AOL搜的,第3个就是),总算可以用了,而且不用担心以后上不了官网,看不到更新了。

15
2015
01

(五)流程控制

1、if...else...

2、for循环

3、while循环

4、switch

常用的就这几个,大多数语言都是这几种。而且只要会1、2就够用了,3、4能够用1、2来实现。