程序与技术分享:createjs入门

简介: 程序与技术分享:createjs入门

createjs是一个轻量级的框架,稍微有点时间和耐心,就可以把全部源代码都看一遍,毕竟只有三十几个js文件。地址:


开发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的使用:


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/54;


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/grossinidance" + (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 //代码效果参考:http://www.lyjsj.net.cn/wx/art_24169.html

= 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) {


//代码效果参考:http://www.lyjsj.net.cn/wz/art_24167.html

stage.update(event);

}


欢迎投简历给我,一线大厂工作机会

相关文章
|
编解码 缓存 数据安全/隐私保护
浅析 HLS 流媒体协议
【2月更文挑战第13天】浅析 HLS 流媒体协议
1527 5
浅析 HLS 流媒体协议
|
存储 NoSQL Redis
单线程模型想象不到的高并发能力、多路复用是效率杠杆
单线程模型想象不到的高并发能力、多路复用是效率杠杆
230 0
|
Linux
LINUX下载编译libsndfile
LINUX下载编译libsndfile
2004 0
|
6月前
|
机器学习/深度学习 人工智能 分布式计算
AI 大模型时代的网络架构演进
​2025 年 7 月 26 日,第二届中国计算机学会(CCF)分布式计算大会暨中国算力网大会(CCF Computility 2025)在甘肃兰州隆重召开。大会以“算力网:新质生产力背景下的分布式系统”为主题,吸引了来自学术界与产业界的 1200 余位专家学者、行业代表齐聚一堂,共探分布式计算与算力网络的前沿技术与未来趋势。
|
存储 自然语言处理 Java
Elasticsearch写入优化
【10月更文挑战第3天】Elasticsearch:从写入原理谈写入优化
428 2
|
大数据 UED
「Mac畅玩鸿蒙与硬件16」鸿蒙UI组件篇6 - List和Grid组件展示数据列表
List 和 Grid 是鸿蒙开发中的核心组件,用于展示动态数据。List 适合展示垂直或水平排列的数据列表,而 Grid 则适用于展示商品或图片的网格布局。本篇将展示如何封装组件,并通过按钮实现布局切换,提升界面的灵活性和用户体验。
788 9
「Mac畅玩鸿蒙与硬件16」鸿蒙UI组件篇6 - List和Grid组件展示数据列表
|
11月前
|
计算机视觉 Perl
RT-DETR改进策略【Backbone/主干网络】| 替换骨干网络为CVPR-2024 PKINet 获取多尺度纹理特征,适应尺度变化大的目标
RT-DETR改进策略【Backbone/主干网络】| 替换骨干网络为CVPR-2024 PKINet 获取多尺度纹理特征,适应尺度变化大的目标
293 10
RT-DETR改进策略【Backbone/主干网络】| 替换骨干网络为CVPR-2024 PKINet 获取多尺度纹理特征,适应尺度变化大的目标
|
机器学习/深度学习 人工智能 自然语言处理
AI驱动的个性化学习路径优化
在当前教育领域,个性化学习正逐渐成为一种趋势。本文探讨了如何利用人工智能技术来优化个性化学习路径,提高学习效率和质量。通过分析学生的学习行为、偏好和表现,AI可以动态调整学习内容和难度,实现真正的因材施教。文章还讨论了实施这种技术所面临的挑战和潜在的解决方案。
925 7
|
存储 算法 Linux
数据恢复软件恢复的数据打不开的原因与解决方法
数据恢复软件恢复的数据打不开的原因与解决方法
2420 10
|
域名解析 缓存 网络协议
揭秘DNS协议:从'http://www.example.com'到IP地址的奇幻旅程,你不可不知的互联网幕后英雄!
【8月更文挑战第4天】在互联网的广袤空间里,每台设备都有唯一的IP地址,但记忆这些数字组合并不直观。因此,DNS(域名系统)作为关键桥梁出现,将易记的域名转换为IP地址。DNS协议工作于应用层,支持用户通过域名访问资源。DNS系统包含多级服务器,从根服务器到权威服务器,共同完成域名解析。查询过程始于客户端,经过递归或迭代查询,最终由权威服务器返回IP地址,使浏览器能加载目标网页。
602 12