H5动画开发快车道 - 前端技术 - 腾讯ISUX
以往做一些H5的运营项目，都是动画设计师使用Animate cc（原来的Flash）先设计好动画原型，然后交给我们UI开发来实现。做过动画开发的童鞋都知道动画开发都是比较耗费时间精力的，而且还要高质量的还原动画设计师设计好的动画，来回沟通成本也非常高。
那有没有一种高效的方法来改善这种流程，提高开发效率的同时还能完成高品质的动画呢？
经过一段时间的摸索，发现AnimateCC（就是原来的Flash）可以导出canvas动画，而且是基于createjs这个开发轻量级游戏的js库的，非常适合用来做移动端的一些h5动画。不仅缩短制作动画所需要的时间。同时它也是一个可视化的IDE，不需要编写代码就可以完成高品质的动画效果；还可以通过Javascript，为动画效果添加交互性。
比如下面这一页动画，如果使用传统的html css3的动画开发或者是canvas方式来硬写代码来实现，切图加上动画开发没有一天应该是搞不定的；而使用AnimateCC导出配合自己写一点点代码，一两个小时就可以搞定。
一些需要了解的概念
开始之前先来了解下Animate CC中做动画的概念。
是指每秒钟放映或显示的帧或图像的数量，这个数值设置越大，动画越快，但同时也是性能消耗大户，一般设置24帧就可以了。
图形与影片剪辑
我们可以将单独的动画，放到一个独立的影片剪辑里，这样可以更好的控制动画。几个独立的剪片剪辑，可以组成一个完整的动画。
当我们把图片从资源库拖到舞台时，它这个时候，只是普通的位图，并不能做补帧动画，所以我们必须把它转换成元件。
图形由矢量图或者是位图组成。
影片剪辑包含在动画影片中的影片片段，有自己的时间轴和属性。具有交互性，是用途最广、功能最多的部分。
时间轴是我们创作动画时使用层和帧组织和控制动画内容的窗口，层和帧中的内容随时间的改变而发生变化，从而产生了动画。时间轴主要由层、帧和播放头组成。
CreateJS为CreateJS库，可以说是一款为HTML5游戏开发的引擎。目前被Adobe整合到Animate CC中，作为导出canvas动画的基础javascript库。
它是一款为HTML5游戏开发的引擎，包含：
EaselJS：用于 Sprites、动画、位图的绘制，交互体验（包含多点触控）功能。
TweenJS：补间动画”引擎
SoundJS：音频播放引擎
PrloadJS：资源预加载
具体的文档和Demo介绍以及API的使用方法，可以通过官网来了解：
怎么快速导出canvas动画？
一般动画设计给我们都是单个的使用Animate CC导出的fla源文件，就以我上面说的demo为例，长这样：
拿到之后我们需要做一点点整理工作，先在Animate CC里面建立一个影片剪辑元件：
建好之后在Animate CC中的库面板中就会生成刚刚建好的影片剪辑元件，点击刚刚建好影片剪辑元件链接的栏目就会变成可编辑的状态，然后取个名字，比如我这里取名为view1：
然后双击这个元件，时间轴里面是空白的，这个时候需要做的事情就是打开动画设计师给我们的fla源文件，复制时间轴上所有的图层粘贴到刚刚新建的影片剪辑里时间轴里。
这样我们这个叫page1的影片剪辑就包含了这一页的所有动画，想一想如果你是要做有5页游动画的h5项目，就单独把每一页的动画放到对应的影片剪辑里。这几个单独的影片剪辑就组成了一个完整的动画。
做完这一步整理工作后，就可以点击导出了。
它会直接把资源导出到你当前fla文件所在的目录：
images -& 动画所用的图片资源
1.hmt -& html文件
1.js -& canvas所需要的图形全部转成canvas绘制的元件库
打开导出的js文件，可以看到刚刚在影片剪辑里做的类链接已经在js生成了一个view1的方法在里头：
然后可以发现在导出来的html文件里中混合了js代码，我们可以新建一个main.js文件把html文件中的js代码放进去，专门用来控制动画的播放以及一些交互逻辑的编写，整理代码如下：
&!DOCTYPE html&
&meta charset="UTF-8"&
&meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&
&title&1&/title&
&style type="text/css"&
&body onload="init();" style="margin:0"&
&canvas id="canvas" width="750" height="1206"&&/canvas&
&!--可以下载下来放在自己的服务器--&
&script src="createjs-.min.js"&&/script&
&script src="1.js"&&/script&
&script src="main.js"&&/script&
下面是整理好的js代码：
// 声明相关变量
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation, view1;
var stageWidth =
document.documentElement.clientW
var stageHeight = document.documentElement.clientH
var stageScale = stageWidth/(750/2);
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
images = images||{};
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt. }
function handleComplete(evt) {
var queue = evt.
var ssMetadata = lib.ssM
for(i=0; i&ssMetadata. i++) {
ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
// 这里需要把我们上面声明好导出来的类方法进行替换
exportRoot = new lib.view1;
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
//监听事件
fnStartAnimation = function() {
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
//处理屏幕自适应
function makeResponsive(event)
if(stageWidth!=document.documentElement.clientWidth||stageHeight!= document.documentElement.clientHeight)
stageWidth =
document.documentElement.clientW
stageHeight = document.documentElement.clientH
if(stageWidth/stageHeight & 0.665)
stageScale = stageHeight/(1206/2);
stageScale = stageWidth/(750/2);
canvas.style.width = 750/2*stageScale + 'px';
canvas.style.height = 1206/2*stageScale + 'px';
stage.update();
makeResponsive();
fnStartAnimation();
从代码中可以发现我们把动画方法修改为我们在cc中定义好的类链接方法：
exportRoot = new lib.view1;
浏览器上就可以显示出刚才在animate cc里面经过类链接的影片剪辑的动画。
一个动画效果就完成，当然刚开始的时候可能要花点时间来熟悉。一旦熟悉这个套路后，后面就会越发越熟练了。
比如下面这个小的h5动画，使用上面的animate cc和createjs两天就可以搞定：
雪碧图功能
如果碰到图片很多的项目怎么办呢？Animate CC也支持导出雪碧图的功能，在发布之前设置下就可以了：
这里要注意的是在选择的时候选择两者兼有，这样就会把jpg和png格式分别导出；png品质选择32位的就可以了。
左边是没有选择雪碧图的，右边是选择导出雪碧图的，图片数量瞬间少了很多。导出雪碧图就是这么简单。
说到做动画性能是绕不开的话题，同样在使用fla导出canvas动画的时候也会碰到性能问题，这里总结下遇到的性能问题，一般都是在用Animate CC做动画的时候可以规避掉，总结一句话就是：
减少矢量 减少影片剪辑（movie clip） 减少嵌套
减少滤镜特效。
详情如下：
1、嵌套规范
在使用CC设计动画效果时，尽量不要太多的嵌套，比如：影片剪辑里面再嵌套影片剪辑或者是帧里面再嵌套其它帧。
2、滤镜和动画规范
不要使用滤镜特效比如（阴影滤镜和发光滤镜）来做动画，因为这样会非常耗费性能，在移动端上性能不可控。
可以使用逐帧图片来代替相关滤镜特效来实现动画效果。比如下面效果里面的花瓣飘落和萤火虫的效果可以使用逐帧图片来做。
3、素材规范
少用矢量多用位图，Text shape都算矢量（如果是用 flashCC或者animateCC做的，在里面就直接把字和矢量图转成位图）。
使用Animate CC做动画效果的基本知识就介绍到这了，有什么问题可以留言一起交流交流。
各位设计的小伙伴们，可以尝试下使用Animate CC来做动画效果，特别是H5类型的动效。不仅高效还可以高质的还原出设计师的动画效果。
使用Animate CC来设计动效，你好，我好，大家都好！
下面给大家推荐一个学习an和createjs方面的非常不错的博客，把上面的教程看完，基本上就可以出师了：
Tags: , , , , , ,
留下你的想法吧html5游戏之createjs以及“找不同”实践 -
html5游戏之createjs以及“找不同”实践
今天给大家介绍一款h5游戏的小框架，createjs，相信很多人都接触过。先简单介绍下createjs：CreateJS为CreateJS库，可以说是一款为HTML5游戏开发的引擎。
CreateJS 中包含五款工具：
EaselJS：用于 Sprites、动画、向量和位图的绘制，创建 HTML5 Canvas 上的交互体验（包含多点触控），同时提供 Flash 中的&显示列表&功能。
TweenJS：一个简单的用于制作类似 Flash 中&补间动画&的引擎，可生成数字或非数字的连续变化效果。
SoundJS：一个音频播放引擎，能够根据浏览器性能选择音频播放方式。将音频文件作为模块，可随时加载和卸载。
PrloadJS：帮助你简化网站资源预加载工作，无论加载内容是图形、视频、声音、JS、数据&&
一款用于网站资源预加载的 JavaScript 库，可加载图片、音频等任何类型的文件。PxLoader 除了可以帮你对资源加载的进度进行监测，捕捉&加载完成&事件外，还可以帮你指定资源加载的顺序。你甚至还可以按照优先级分组加载资源。
那么今天我们主要讲的就是easejs，并附送一款之前在微信朋友圈很火的"找不同"，作为实战演练。
首先介绍下游戏：
那么游戏很简单拉，就是在一块区域出现不同的颜色的图块，其中有一块跟其他颜色不一样，用户点击此则得一分并进入下一关。
那么游戏的思路并不难，我们用easejs来做好了，上代码：
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html lang = "en" &
&head&&meta charset = "UTF-8" &
&!--This text is a comment--&
&script src = "jquery-1.8.3.min.js"&&/script&
&script src="easeljs-0.7.1.min.js"&&/script&
&script src="rank.js"&&/script&
&canvas id="gameView" width="400px" height="400"& Your browser is not Support&/canvas&
&div&时间：&span id="time"&--&/span&&/div&&div&得分：&span id="int"&--&/span&&/div&
&script src="app.js"&&/script&
该代码为html内容，其中引入easeljs模块，直接引入就好。（在这里我们只引用了了easejs这个组件类库，其实createjs功能很强大，本身是一款h5游戏引擎）
然后我们自己写的js为两块，一个是app.js，另一个就是rank.js。其中rank.js为构造实例，即每一关图块所拥有的方法，我们均将其封装在这个实例里面。app.js为具体执行的主线程js。
先上rank.js的代码
function Rect(n,color){
createjs.Shape.call(this);//将createjs.Shape的方法全部当作参数传进来
this.setRectType = function (type){//构造setRectType方法
this._RectType =
switch (type){
this.setColor("#"+color[0]+color[1]+color[2]+color[3]+color[4]+color[5]);
var m=1.9-n/9;
this.setColor("#"+parseInt(color[0]/m)+parseInt(color[1]/m)+parseInt(color[2]/m)+parseInt(color[3]/m)+parseInt(color[4]/m)+parseInt(color[5]/m));
this.setColor = function(colorString){
this.graphics.beginFill(colorString);
this.graphics.drawRect(0,0,400/n-5,400/n-5);
this.graphics.endFill();
this.getRectType = function (){
this._RectT
this.setRectType(1);
Rect.prototype = new createjs.Shape();//构建Rect对象，继承所有createjs方法以及我们之前创建的方法
在rank.js代码中，我们构建的所有实例应该拥有的方法，接下来在app.js中我们写主线程：
var stage=new createjs.Stage("gameView");
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",stage);
var gameView=new createjs.Container();
stage.addChild(gameView);
var n=2,num=1;
var timer = 16;
var time=$("#time");
function stop() {
var ove = '&div style="9height:9z-index:99;opacity:0.6;background:#;"&&/div&',
over = '&div style="position:top:200left:200font-size:20height:500width:200z-index:" id="over"&时间到啦！！！！！！&/div&';
$("html").append(ove);
$("html").append(over);
t = setInterval(function() {
if(timer&0){
clearTimeout(t);
time.html(timer);
function addRect(){
var cl=[parseInt(Math.random()*10),parseInt(Math.random()*10),parseInt(Math.random()*10),parseInt(Math.random()*10),parseInt(Math.random()*10),parseInt(Math.random()*10)];
var color =
var x =parseInt(Math.random()*n);
var y =parseInt(Math.random()*n);
for(var indexX=0;indexX&n;indexX++){
for(var indexY=0;indexY&n;indexY++){
var r = new Rect(n,color);
gameView.addChild(r);
r.x=indexX;
r.y=indexY;
if(r.x == x&& r.y==y){
r.setRectType(2);
r.x=indexX*(400/n);
r.y=indexY*(400/n);
if(r.getRectType() == 2 &&timer&=0){
r.addEventListener("click",function(){
if(n&7){++n;}
gameView.removeAllChildren();
$("#int").html(num++);
addRect();
addRect();
由于游戏简单，app.js功能很好理解，主要作用为玩家选中目标方块时，构建新图层。
更多相关文章
Kiwi.js是一个语法友好的开源Html5 2D游戏引擎,文档丰富. Kiwi.js是用State来管理游戏场景的, state的切换也就是场景的切换了. Kiwi.js内置许多方便的components,例如huds用于显示head 元素, input 用于鼠标.键盘.触摸控制, box用于物理 ...
前面两章我们已经研究了如何使用Box2d来模拟游戏世界,这一章就把所有的东西拼凑在一起,最终完成我们的游戏. 一.定义物体 典型的物体: {type:'ground',name:'dirt',x:500,y:440,width:1,height:20,isStatic:true}, {type:'g ...
Kiwi.js中资源的加载是在Kiwi.State.preload方法中进行的,而关于加载进度State中有另外一个方法loadProgress来实现,所以要实现进度百分比显示,只需要重写loadProgress方法即可. 下面是Kiwi.js的loadProgress的API说明 重写loadPr ...
创建左右按键控制NPC行走并释放技能动画. 先准备一张NPC连播动画图和一张技能连播图 Kiwi.js中创建NPC动画是通过AnimationManager的 add ( name cells speed [loop=false] [play=false] [addToAtlas=true] ) 方 ...
Kiwi.js中游戏场景命名为State,所以游戏中可以创建很多个state来显示不同的游戏场景: 精灵所用的API命名就是Sprite,这个一看就知道了. 下面我来创建一个简单的场景来显示一张背景图和一只可以动的怪物. 显示背景图,我们可以创建StaticImage对象,相应的构造函数为
Ajax Control Toolkit
The Ajax Control Toolkit contains a rich set of controls that yo ...
没有安装或启动 sendmail 组件 解决办法 我是新手,命令不熟,所以写的很详细,老鸟勿喷哦 1.重新安装 sendmail 组件,我用的是 CentOS ,使用下面的命令安装 代码如下 代码 yum insta ...
问题出现:同事说foxmail邮箱里的别的帐号都能够搜索里面的邮件,一个新安装的帐户就是不能搜索. 解决问题:我跑过去看了下,自已动手试了试,还真的不行,于是我想可能是软件出了问题,就全新的更新了一下,但问题依旧,与 ...
javacolumns[0][data]:id columns[0][name]: columns[0][searchable]:true columns[0][orderable]:true columns[0][ ...
导读:其实,这个工具已经有很多博客说明它的安装和使用了.而我记录的,除了常规的外,还希望能探究其他几个命令. 详细: 1 下载安装包 2 配置安装路径 3 编译 4 建立软链接 5 工具解释
友情链接：
管理员邮箱：info@html5阻杀游戏《野蛮的猎人》源码 - 开源中国社区
当前访客身份：游客 [
当前位置：
发布于 日 13时,
html5阻杀游戏《野蛮的猎人》源码，点击野蛮人将其消灭，防止其越线/service-sid-12385.html
代码片段(1)
1.&[代码][HTML]代码&&&&
/// &reference path="../lib/typings/createjs/createjs.d.ts"/&
/// &reference path="../lib/typings/easeljs/easeljs.d.ts"/&
var __extends = this.__extends || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = }
__.prototype = b.
d.prototype = new __();
(function (src) {
var GameWindow = (function (_super) {
__extends(GameWindow, _super);
function GameWindow() {
var _this =
_super.call(this);
this.addEventListener('added', function (e) {
_this.lastParent = _this.
for (var i = 0; i & _this.parent.numC i++) {
_this.parent.getChildAt(i).mouseEnabled =
_this.mouseEnabled =
_this.create();
this.addEventListener('removed', function (e) {
for (var i = 0; i & _this.lastParent.numC i++) {
_this.lastParent.getChildAt(i).mouseEnabled =
_this.lastParent =
_this.freeResources();
GameWindow.prototype.create = function () {
GameWindow.prototype.freeResources = function () {
for (var i = 0; i & this.numC i++) {
createjs.Tween.removeTweens(this.getChildAt(i));
this.removeAllChildren();
return GameW
})(createjs.Container);
src.GameWindow = GameW
})(src || (src = {}));
* Created by Roman on 24.04.2015.
/// &reference path="../lib/typings/createjs/createjs.d.ts"/&
/// &reference path="../lib/typings/preloadjs/preloadjs.d.ts"/&
/// &reference path="../lib/typings/soundjs/soundjs.d.ts"/&
/// &reference path="../lib/typings/tweenjs/tweenjs.d.ts"/&
/// &reference path="Main.ts"/&
(function (_src) {
var SoundManager = (function () {
function SoundManager() {
this.soundButtonIsEnabled =
this.isInitializedDefaultPlugins = createjs.Sound.initializeDefaultPlugins();
createjs.Sound.alternateExtensions = ["mp3", "m4a"];
//createjs.Sound.setMute(true);
Object.defineProperty(SoundManager, "instance", {
get: function () {
return SoundManager._instance ? SoundManager._instance : SoundManager._instance = new SoundManager();
enumerable: true,
configurable: true
/*public preloadingWasCrashed(): void {
this.isInitializedDefaultPlugins =
SoundManager.prototype.fillManifest = function (manifest) {
manifest.push({ id: "achiv", src: 'sounds/achiv.ogg' }, { id: "levelVictory", src: 'sounds/levelVictory.ogg' }, { id: "flagFallDown", src: 'sounds/flagFallDown.ogg' }, { id: "bgSound", src: 'sounds/bgSound.ogg' }, { id: "click", src: 'sounds/click.ogg' }, { id: "freeze", src: 'sounds/freeze.ogg' }, { id: "sun", src: 'sounds/sun.ogg' }, { id: "killBarbarian0", src: 'sounds/killBarbarian0.ogg' }, { id: "killBarbarian1", src: 'sounds/killBarbarian1.ogg' }, { id: "killBarbarian2", src: 'sounds/killBarbarian2.ogg' }, { id: "killBarbarian3", src: 'sounds/killBarbarian3.ogg' }, { id: "killWoman", src:
开源中国-程序员在线工具：
相关的代码(10)
1回/1268阅
20回/4183阅
2回/1500阅
1回/2820阅
1回/1384阅
开源从代码分享开始
巾帼天下2013的其它代码}