但是有时候有些额外的对象或者方法是需要放在view1里面的，那怎么办呢？ 我们新建一个View1的类把animate cc里的view1给复合进去。

//view1 (function() { "use strict"; function View1(){ this.Container_constructor(); this.back = new lib.view1(); this.addChild(this.back); this.show = function (){ //这里可以写额外的方法 } //this.con = new createjs.Container() 这里可以是额外处理的对象 } var p = createjs.extend(View1,createjs.Container); cls.View1 = createjs.promote(View1, "Container"); }());

然后创建这个类把它放到舞台上就可以了：

js代码：

view = new cls.View(); stage.addChild(view);

最后js代码整理如下，相关代码已经有详细的注释：

// 定义一些需要用到的变量 var canvas, stage, exportRoot, cls={}; // model来专门处理接收事件，记得要是EventDispatcher类 model = new createjs.EventDispatcher(); stageWidth = document.documentElement.clientWidth; stageHeight = document.documentElement.clientHeight; stageScale = stageWidth/(750/2); canvas = document.getElementById("canvas"); if(stageWidth/stageHeight > 0.665) { stageScale = stageHeight/(1206/2); } else { stageScale = stageWidth/(750/2); } canvas.style.width = 750/2*stageScale + 'px'; canvas.style.height = 1206/2*stageScale + 'px'; function init() { canvas = document.getElementById("canvas"); images = images||{}; // LoadQueue是一个预加载类，可以把需要加载的资源提前加载，基本支持大多数的文件预加载。 //我这里主要处理了它的2个事件，fileload，complete。 var loader = new createjs.LoadQueue(false); //这里一共可以是3个参数 第一个是是否用XHR模式加载 第二个是基础路径 第三个是跨域 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.result; } } function handleComplete(evt) { var queue = evt.target; var ssMetadata = lib.ssMetadata; for(i=0; i<ssMetadata.length; i++) { ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} ) } view1 = new cls.View1(); stage = new createjs.Stage(canvas); //获取舞台 Stage是我们的舞台类，可以理解为所有canvas内部对象的总容器或者说是根显示对象。 stage.addChild(view1); //将容器放在舞台上 model.addEventListener("complete",function (){ alert("complete"); }) //Ticker是一个计时类，不过他是每过一帧触发一次的，也就是说跟时间其实没关系（因为帧频是会波动的）。 // createjs.Ticker.setFPS();和createjs.Ticker.addEventListener("tick", stageBreakHandler);是必须要加的，stageBreakHandler里面放的是刷新舞台的方法，因为createjs需要不停的刷新舞台来刷新动画，也就是一个重绘的过程。 平时也可以拿Ticker类做动画。 fnStartAnimation = function() { createjs.Ticker.setFPS(lib.properties.fps); createjs.Ticker.addEventListener("tick", stageBreakHandler); } fnStartAnimation(); } function stageBreakHandler(event) { if(stageWidth!=document.documentElement.clientWidth||stageHeight!= document.documentElement.clientHeight) { stageWidth = document.documentElement.clientWidth; stageHeight = document.documentElement.clientHeight; if(stageWidth/stageHeight > 0.665) { stageScale = stageHeight/(1206/2); } else { stageScale = stageWidth/(750/2); } canvas.style.width = 750/2*stageScale + 'px'; canvas.style.height = 1206/2*stageScale + 'px'; } stage.update(); } //view1 (function() { "use strict"; function View1(){ this.Container_constructor(); this.back = new lib.view1(); this.addChild(this.back); } var p = createjs.extend(View1,createjs.Container); cls.View1 = createjs.promote(View1, "Container"); }());

一个动画效果就完成，当然刚开始的时候可能要花点时间来熟悉。一旦熟悉这个套路后，后面就会越发越熟练了。

比如下面这个小的h5动画，使用上面的animate cc和createjs两天就可以搞定：

怎么来做交互反馈

像我们一般做这些运营项目，都会和用户发生些交互动作或者是监听页面的动画事件来做进一步反馈，这个是还怎么办呢？

这里有一个小诀窍，我们可以在帧上加上dispatchEvent，来告知程序动画结束了，或者播放到哪个关键地方了。

比如这里我们在动画的最后一帧上加上：

this.stop(); if(model) model.dispatchEvent("complete");

然后在js上新建一个model来专门处理接收事件，记得要是EventDispatcher类：

model = new createjs.EventDispatcher();

然后在代码中监听就可以了：

model.addEventListener("complete",function (){ alert("complete"); })

在动画结束的时候就会监听到complete事件了：

雪碧图功能

如果碰到图片很多的项目怎么办呢？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来设计动效，你好，我好，大家都好！

分享给小伙伴们：

本文标签： HTML5，设计/">HTML5，设计

相关文章

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻