H5动画开发快车道

前言

以往做一些H5的运营项目,都是动画设计师使用Animate cc(原来的Flash)先设计好动画原型,然后交给我们UI开发来实现。做过动画开发的童鞋都知道动画开发都是比较耗费时间精力的,而且还要高质量的还原动画设计师设计好的动画,来回沟通成本也非常高。

那有没有一种高效的方法来改善这种流程,提高开发效率的同时还能完成高品质的动画呢?

经过一段时间的摸索,发现AnimateCC(就是原来的Flash)可以导出canvas动画,而且是基于createjs这个开发轻量级游戏的js库的,非常适合用来做移动端的一些h5动画。不仅缩短制作动画所需要的时间。同时它也是一个可视化的IDE,不需要编写代码就可以完成高品质的动画效果;还可以通过Javascript,为动画效果添加交互性。

比如下面这一页动画,如果使用传统的html css3的动画开发或者是canvas方式来硬写代码来实现,切图加上动画开发没有一天应该是搞不定的;而使用AnimateCC导出配合自己写一点点代码,一两个小时就可以搞定。

一些需要了解的概念

开始之前先来了解下Animate CC中做动画的概念。

帧频

是指每秒钟放映或显示的帧或图像的数量,这个数值设置越大,动画越快,但同时也是性能消耗大户,一般设置24帧就可以了。

图形与影片剪辑

我们可以将单独的动画,放到一个独立的影片剪辑里,这样可以更好的控制动画。几个独立的剪片剪辑,可以组成一个完整的动画。

当我们把图片从资源库拖到舞台时,它这个时候,只是普通的位图,并不能做补帧动画,所以我们必须把它转换成元件。

图形由矢量图或者是位图组成。

影片剪辑包含在动画影片中的影片片段,有自己的时间轴和属性。具有交互性,是用途最广、功能最多的部分。

时间轴

时间轴是我们创作动画时使用层和帧组织和控制动画内容的窗口,层和帧中的内容随时间的改变而发生变化,从而产生了动画。时间轴主要由层、帧和播放头组成。

Createjs

CreateJS为CreateJS库,可以说是一款为HTML5游戏开发的引擎。目前被Adobe整合到Animate CC中,作为导出canvas动画的基础javascript库。

它是一款为HTML5游戏开发的引擎,包含:

EaselJS:用于 Sprites、动画、位图的绘制,交互体验(包含多点触控)功能。

TweenJS:补间动画”引擎

SoundJS:音频播放引擎

PrloadJS:资源预加载

具体的文档和Demo介绍以及API的使用方法,可以通过官网来了解:http://createjs.com/docs

怎么快速导出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代码放进去,专门用来控制动画的播放以及一些交互逻辑的编写,整理代码如下:

html:

<!DOCTYPE html><html><head><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 {		overflow:hidden;	}</style></head><body onload="init();" style="margin:0px;"><canvas id="canvas" width="750" height="1206"></canvas><!--可以下载下来放在自己的服务器--><script src="createjs-2015.11.26.min.js"></script><script src="1.js"></script><script src="main.js"></script></body></html>

下面是整理好的js代码:

// 声明相关变量var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation, view1;var stageWidth =  document.documentElement.clientWidth;var stageHeight = document.documentElement.clientHeight;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.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} )    }    // 这里需要把我们上面声明好导出来的类方法进行替换    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.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();    }    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方面的非常不错的博客,把上面的教程看完,基本上就可以出师了:

原文发布于微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文发表时间:2017-04-26

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏非著名程序员

推荐几个比较炫酷效果的开源项目和开源库

上次推送了一篇关于推荐开源项目和开源库的文章,引起的反响不错,那我就持续搞下去,继续分享我收藏和看到的不错的开源库。相信这些推送应该对大家的帮助很大。 Shin...

35480
来自专栏非著名程序员

Android 自定义删除 View

目标:实现一个点击删除的Item ---- 效果图如下:我知道作为研发肯定会吐槽这个删除的设计,但是我还是要上图,不然我们岂不是不明真相的吃瓜群众… ----...

21190
来自专栏Android小菜鸡

LayaAir引擎学习经历

  由于公司任务安排,需要笔者先去了解一下LayaAir引擎库,以用来完成公司将要启动的大数据可视化项目,需要借助LayaAir引擎实现复杂的动画。笔者花两天时...

88420
来自专栏前端说吧

CSS-项目中遇到IE兼容问题,处理随笔

70670
来自专栏deepcc

ios中iframe的scroll滚动事件替代方法

15920
来自专栏进步博客

创建高效media queries的七个好习惯

从最小屏幕开始,逐渐扩大窗口,当效果丑陋不堪(like shit)时,此处就是breakpoint。

7420
来自专栏deepcc

ios中iframe的scroll滚动事件替代方法

63790
来自专栏腾讯大讲堂的专栏

打造H5动感影集的爱恨情仇【动画性能篇】

作者:谭照强,热爱折腾前端,喜欢新奇创意的程序员,业余喜欢玩摄影,弄咖啡。 “你听说过动感影集么?” 动感影集是QQ空间新功能,可以将静态的图片轻松转变为动态的...

305120
来自专栏Thinks

设计师使用SVG的必读文章

导语-“本文适合设计师浅读,适合有追求的设计师和UI开发同学仔细研读“

55240
来自专栏腾讯社交用户体验设计

打造H5动感影集的爱恨情仇(动画性能篇) - 腾讯ISUX

24240

扫码关注云+社区

领取腾讯云代金券