createjs入门

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏AhDung

【C#】让DataGridView输入中实时更新数据源中的计算列

本文适用Winform开发,且DataGridView的数据源为DataTable/DataView的情况。

1012
来自专栏哲学驱动设计

技术总结:自动扩张WPF树型表格列宽

问题描述     今天测试人员提了一个易用性的BUG,主要是说系统目前使用的树型控件不支持自动扩张列的宽度。其实客户那边已经对这个问题提了多次,不过由于对WPF...

2255
来自专栏CRPER折腾记

React 折腾记 - (2) 实现路由动效过渡,并解决过程中奇奇怪怪的问题

注意: 这里的样式用的style-components来写的,感兴趣的可以自行了解下

721
来自专栏跟着阿笨一起玩NET

EPPlus与Excel完美的结合

笔者近期在公司项目中需要生产比较复杂的Excel报表, 问题点是单个Excel文件中必须能包含多个sheet, 按照以前项目的经验, 此情况需要使用MS Off...

591
来自专栏前端布道

界面之下:还原真实的MV*模式

做客户端开发、前端开发对MVC、MVP、MVVM这些名词不了解也应该大致听过,都是为了解决图形界面应用程序复杂性管理问题而产生的应用架构模式。网上很多文章关于这...

732
来自专栏hightopo

网络拓扑图上文本的巧妙应用

1143
来自专栏Java帮帮-微信公众号-技术文章全总结

WAI-ARIA无障碍网页应用属性完全展示

WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员。尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助设备,如屏...

1224
来自专栏开发与安全

JSONP存在的JSON Hijacking漏洞以及与csrf/xss漏洞的关系

在实习过程中接触过所谓的JSON Hijacking 漏洞,但最近在写论文时发现理解得不深,好像跟xss与csrf又有点区别与联系,索性深入学习了下JSONP(...

2150
来自专栏jojo的技术小屋

原 荐 自己写代码对比工具

作者:汪娇娇 时间:2018年1月19日 上一篇:自己写JSON编辑器 基于上一次做的JSON编辑器,继而衍生出这一次的代码对比工具,本来打算写在一块的,想想懒...

3528
来自专栏hightopo

原 基于 HTML5 WebGL 的 3D

1816

扫码关注云+社区