赞助商
立即赞助

腾讯出品!你离高效制作动画只差这一篇文章的距离

UI设计3年前 (2021)更新 流光
2.6K 0 0

看完本文,端能速发一些 H5动画,设计师效地制作合自己心意的画来别人保真还原,希望给大带来一点帮助。

腾讯出品!你离高效制作动画只差这一篇文章的距离

前言

说动画H5,为一个前端,谓是「又爱又恨」。爱的是加上动画动效 H5变得生动有趣,吸引力 Max;恨的是做动画时是一边在脑中 yy效果,一边用 css、js代码模拟出来,既低效又不直观,正所谓「产品一句,设计一根,重构一身汗」。幸的是,你现在看到篇文章,我将结合例来介绍一下 Adobe Animate CC 如何高效直观地实现动画效果,并指出一些2018版本新性。

腾讯出品!你离高效制作动画只差这一篇文章的距离

一、好戏来了

首先我们先来看个动画,大家估下这个 H5 需要做多久时? 答案是天。

腾讯出品!你离高效制作动画只差这一篇文章的距离

腾讯出品!你离高效制作动画只差这一篇文章的距离

能这么完这 h5,靠的可视化动画制作软件 Adobe Animate CC。Adobe Animate CC 身 Adobe FlashProfessional CC,由于 H5 的出,很多以需用 flash 能实的动画也可以用 H5 实了,另外 flash 一直以备受不安全的诟病,使得业界越越排斥 flash,例如 iphone 的网页就不能播 flash。Adobe 不能就此落啊,于这软件就顺势转型,维持原 Flash 发具基础,新增制作 H5动画功能。对于原 flash 发人员可以轻松转型,对于新手,这软件也比较易手。

腾讯出品!你离高效制作动画只差这一篇文章的距离

介绍如何动画之,我们先熟悉一下软件的界面:

腾讯出品!你离高效制作动画只差这一篇文章的距离

界面左方动画编辑区,区域里一舞台,就我们终可以看到的动画区域,超出舞台的内将不会看到。

右上是工具栏,大部分都和 photoshop 工具相似,在这先不详细展开了。工具栏左边有个可调节数值属性板,例如目前展示了选黄色小圈位、宽高等属性。

左下方是间轴编辑。动画之所以能动,就是指定了它在什间点上显示什画面。间轴有多层,上面的层将会盖住下面的层。

右下角我拉一个代码编辑面板,常用通代码控动画的播放和暂停,编写点击物的互逻辑等。

接来还有几个概念需要先了解一:

1. 键帧

键帧于编辑此刻的画状态,图为例,我们在第10帧添了一个键帧,并调整了图形的位置、大小、旋转角,播放时会看到图形在前9帧都,而到了键帧时就立刻变成了调整的状态。这可解为 css3 的 keyframes 里的某个百分里的状态。

腾讯出品!你离高效制作动画只差这一篇文章的距离

我们可在两个键帧之间添作补间,这样图片就会随着时间从初始状态变到结束状态。

腾讯出品!你离高效制作动画只差这一篇文章的距离

我们还可在两个形状之间添形状补间,使得他们自然地进行形状变。

腾讯出品!你离高效制作动画只差这一篇文章的距离

2. 图形 graphic 和影剪辑 movie clip

两类元件在动画时经常打道,个需要清楚。(敲黑板!)

当我们将图片拖到舞台上时,图片只是一个位图,并没有很多诸如创建补间画、设置透明等编辑功。

腾讯出品!你离高效制作动画只差这一篇文章的距离

而当它转换为图片元件后,就有了上述的功了。实际上,这是在图片外包了一层,如果双击图片元件,会进入元件,看到转换前的图片。在前端开发中,这相当于建了一个多功的组件并将图片赋值到里面。

腾讯出品!你离高效制作动画只差这一篇文章的距离

而影片剪辑就是一个可的图形元件,它有自己的时间轴。例如图的气泡画,就是一个影片剪辑。

腾讯出品!你离高效制作动画只差这一篇文章的距离

元件可复,例如在某个画面需要很多气泡,只需要将气泡元件放置多个到舞台上实现。通过双击元件对里面的画面进行编辑,将同时改变有他该元件的实例的画面。

腾讯出品!你离高效制作动画只差这一篇文章的距离

一般来说,添进来的图片都应该转换为图形元件,如果该图形元件要,就再转换为影片剪辑。在结构上,相当于影片剪辑里包了一个图形元件,图形元件再包了一个图片。

腾讯出品!你离高效制作动画只差这一篇文章的距离

好,掌握了上的基础知识,接来的容就较容易解了。那我就开始这个 H5画为例,介绍一分画的制作。

二、实例示范

1. 吊下来的蜘蛛

腾讯出品!你离高效制作动画只差这一篇文章的距离

这是一个位移动画,在开始位置和结束位置将蜘蛛图形摆放好,再添加一个运动渐变就行了。

腾讯出品!你离高效制作动画只差这一篇文章的距离

例蜘蛛的下落有一个 duang 一下的弹簧效果,这个在补间置一下缓动函数就行了。常用缓动函数的选择是2018版本新增的,个人觉十实用。

腾讯出品!你离高效制作动画只差这一篇文章的距离

在 H5 ,点击蜘蛛后会继续播放动画,这个点击事件可以让软件动生成代码。选择蜘蛛图形,在代码面板的事件双击需要的事件,软件便会立刻生成绑定事件。

腾讯出品!你离高效制作动画只差这一篇文章的距离

需要写的只有一句:this.play();

关要学习的代码,使用频率最的就是几句:

//播放
this.[parent.]play();
//暂停
this.[parent.]stop();
//跳到第num帧然后播放
this.[parent.]gotoAndPlay(num);
//跳到第num帧然后暂停
this.[parent.]gotoAndStop(num);

部分的动画内都可以看作移、缩、旋转的运动渐变,因此只掌握了这几操作,恭喜已可以胜任一些基本动画了。

2. 彩色场景的转换

腾讯出品!你离高效制作动画只差这一篇文章的距离

这要使了遮罩和形状渐变。首先在彩色场景图层上面建一个遮罩层,然后在遮罩层做一个圆形图案逐渐放大的形状渐变就行了。

腾讯出品!你离高效制作动画只差这一篇文章的距离

遮罩在这个 H5画里得较多,仔细观察,会发现开始的打字效果、红包落至消失见那一刻、在沸腾的水中上窜的红包、伸舌头等地方都上了遮罩效果。

3. 气泡效果的实现

腾讯出品!你离高效制作动画只差这一篇文章的距离

儿主要做一个气泡放大消失不见的动画,需要注意的是要将放大的准心往下移,样才符合际生活。在气泡最大化,需要插上一段空白关键帧,表示气泡爆破的一小段空白期。

腾讯出品!你离高效制作动画只差这一篇文章的距离

画面上有个气泡,我是用前面说的复用元件的方法去现的,此外需整各个元件例的位置和大小,以模拟际气泡的不规则。

为了气泡整体看起来沸腾得更自然,我给各个元件实例命了名,并一个随机函数控制元件画的播放。

function bubbleAni(){
 //这次将会num气泡随机冒出
 var num = parseInt(Math.random()*7);
 for(var i=0;i<num;i++){
 var target = "bubble"+parseInt(Math.random()*8+1);
 var nextTime = parseInt(Math.random()*100);
 setTimeout(function(){
 _this[target].play();
 },nextTime);
 }
 //下一次的冒泡时间
 var nextTime2 = parseInt(Math.random()*200);
 setTimeout(function(){
 bubbleAni();
 },nextTime2);
}
bubbleAni();

三、测试动画

动画的过程中,我们可以通过单栏的 control->Test 将动画到浏览器里看效果。通过调试的 h5,我们可以发 Animate CC  canvas 通过 createjs 引擎绘制动画的。关于 createjs,家可以看看其中文社区 、或者 ajex 的博客了解多。

腾讯出品!你离高效制作动画只差这一篇文章的距离

四、发布动画

成画后,就是将画发布成页了。通过 file->publish 就可发布,软件会在画源件在目录导 html、js、css 等资源件。要查看导效果,可直接双击 html 打开,但遇到点击事件时会报跨域之类的全错误。要解决这个问题,只要将有件放在务器里再访问就可了。

腾讯出品!你离高效制作动画只差这一篇文章的距离

五、性能优化

当我们在电脑上辛辛苦苦地做完动画,看着电脑浏览器上自己做出来的赏心悦目的动画,心里的成就感不禁冉冉上升。接着当你满心欢喜地拿安卓手机欣赏动画时,顿时就晕:为什么卡得么惨不忍睹?莫急莫急,你该次幸现在看到篇文章,让我慢慢道来,给你一优化建议吧。

在 Animate CC 里制作画是有 fps 的概念的,即每秒播放多帧。在 js 里我们一般怎样控制帧率呢?没错,就是 setTimeout 或者 setInterval,正是这个原因,画在卓机里播放卡顿。解决办法就是换 requestanimationframe 播放,在 fnStartAnimation 方法里添 createjs.Ticker.timingMode = createjs.Ticker.RAF。

fnStartAnimation = function() {
 createjs.Ticker.setFPS(lib.properties.fps);
 createjs.Ticker.addEventListener("tick", stage);
 //默认的设置
 //createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
 //建议设置
 createjs.Ticker.timingMode = createjs.Ticker.RAF; 
 customHandleComplete();
}

由于 requestanimationframe 动画般是60帧秒,此要先将 fps 调成60再开始制作动画可以了。Animate CC 2018 在时轴上新增了秒数显示,大大便了制作动画时时考虑,不用再像以前那样用前帧除以 fps 来估算目前在什么时。

腾讯出品!你离高效制作动画只差这一篇文章的距离

在动画测试,我发现制作动画在手上越来越卡。使用 chrome  memory 检测后,发现了有内存泄露,上升速度很快。在查阅了相关资料后,我认为些默认导出设不太合理,例如雪碧图尺寸太大,竟然有81928192。于是我将雪碧图改为1024*1024(位不够放时,会自动创新雪碧图来存放,所以也不用担心),并更改了雪碧图按 jpg 和 png 分开放、不导出用资等设,具体改为下图:

腾讯出品!你离高效制作动画只差这一篇文章的距离

腾讯出品!你离高效制作动画只差这一篇文章的距离

调整后,内存占用速攀升,比较稳了,占用内存小了,动画也不会越越卡了,优化功!

腾讯出品!你离高效制作动画只差这一篇文章的距离

ajex的博客一篇《createjs性能优化》,家可以看看。不过以我目动画的验看,了面2点优化方案,就可以比较流畅了。

总结

不知家看完后否对这制作动画的方式产趣呢?本文首先通过指出家写码动画时的痛点难点,提出了使用 Animate CC 高效直观制作动画的方案,接结合实例对一些常用的动画效果行制作示范,并提供一些实用的优化建议。希望家看完后能比较清晰了解入门这软件,给家一些帮。

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

重新构想复古怀旧,赋予我们所喜爱的人物角色更多个性、温度、色彩和熟识度,以提升用户体验。 为了在QQ20周年掀起用户的怀...
QQ设计
如何在产品功能上做更多的创新来体现设计价值一直是设计师关注的话题,尤其是在体系成熟的产品里,如何对完善的基本框架和功...
QQ空间
当短视频场景的发展与突破回到普通用户的原创内容创作时,「贴纸」「音乐」「转场」等原创工具的设计,都成为直接影响到发表...
DOV
有破有立,再造升级。官网作为会员体系中最主要的营销渠道,突破原有的资源壁垒,将 QQ 三大会员体系官网进行再造升级,对商...
QQ
4 月 16 日 QQ 语音消息新特性突然登上微博热搜,QQ 铁粉瞬间集结。是什么让 129 万人为 QQ 花式彩虹屁?为何微信却被吃瓜群...
QQ
对于一款社交产品,面临最大的挑战也许不是来自竞争对手,而是随时间飞逝不断进化的互联网环境。作为已诞生 20 年的 QQ,历经...
QQ
截图,是将显示设备上所展示的内容截取下来,所生成可视图像,截图的目的是为了保存特定状态下的界面内容。早在 PC 时代,大...
QQ截图
每到过年,在外的游子都会不远万里回家与亲人团聚,这是一种中国独有的特色,也是一种别样的年味。我们期望在春节上线一款游...
3D游戏