Animate CC之canvas动画玩耍篇

2020年03月12日作者:井井客来源:井井客原创

之前在网上看到一个挺好玩的canvas小动画,所以想自己动手做个canvas动画,然后发现用Animate CC可以很好的帮助我。

Animate CC之canvas动画玩耍篇

这个是我自己制作的一个简单版本的动画(上面是线图)。因为里面并没有包含复杂Action动作,只是在图形及运动轨迹上面做了效果,所以这个算是基础功能运用。

预览效果如下(通过新窗口访问下载.fla文件

历史

十多年前热门的网页三剑客:来自Macromedia公司的Dreamweaver、Fireworks、Flash。
Dreamweaver用于网页代码编辑,所见即所得是一个亮点,现在用的人应该不多。
Fireworks这款作图软件知道的人都少,它早被Adobe Photoshop代替。
Flash作为依然活跃的二维动画软件,在Adobe收购Macromedia后,更名为Adobe Flash。
2016年Adobe在Flash原有基础上,添加了HTML5的支持,Adobe Flash正式发布更名为Adobe Animate CC。

知识点

Animate界面与Flash相差不大,下面我就顺着新建一个canvas动画罗列一个知识点(我使用的是Animate CC 2020)。

1、文档类型

支持ActionScript3.0、HTML5Canvas、WebGL等。

在新建窗口中,根据需求选择相应的预设,如:Web有若干手机尺寸及网页尺寸,宽高也可自定义,平台类型使用默认HTML5Canvas即可。

文档类型

2、帧频率(FPS)

动画可以理解是连惯的画面,一般24帧表示一秒有24个画面,而网页用的动画也可以设置成12帧,24帧比12帧会更通畅。

3、常用面板

【工具面板】展示绘图工具,常用工具快捷键有移动(v)、任意变形(q)、矩形工具(r)、圆形工具(o)、线条工具(n)、钢笔工具(p)、颜料桶(k)等。
【属性面板】下面有四个选项卡:当点击工具面板上工具时会自动切换至工具属性、当选择任意图形/边框时自动切换至Object属性、当选择场景外空区域时自动切换至Doc属性、当在时间轴选择任意帧时会自动切换成帧属性。
【时间轴面板】实现动画必须,一个主时间轴,另外影片剪辑(元件)等也可以编辑时间轴。时间轴上带点的即是关键帧,实心表示有内容,空心表示无内容。
另外还有颜色面板和对齐面板比较常用,见名知义~

面板选项

同时,可以使用预设的工作区,点击菜单栏窗口-工作区,里面有设计人员、开发人员等常用的工作区,会帮我们展示合适的面板排列。

4、线条及填充

线条及填充属性

绘图中主要就是这两类,注意线条及填充在属性面板中会有区别。

5、绘图类型

绘图类型可以在属性面板中Object选项卡进行编辑修改。常用:分离、对象、扩展以填充、元件。用路径选择工具可以更好的理解它们。
分离的两个图形,有交叉时,它们的路径也会交叉,重而产生一个合并的新图形。
作为对象的两个图形,即使有交叉,路径也不会交叉,可以通过排列上下层。
扩展以填充通俗点说就是把路径变为填充。
元件是动画必须的,我们一般是一个图层放一个元件,进行动画编辑。

绘图类型

6、动画类型

时间轴上方选择任意帧然后右键

我常用的是传统补间,主要在缩放、透明度、位置等方面进行动画描述。(需要为元件)
形状补间则听名知义,可以在形状上过渡,甚至两个图形。(不需要为元件,图形即可)
补间动画和传统补间类似,也是两个关键帧之间的过渡(需要为元件)
补间动画与传统补间最大的区别应该就是它可以调整补间,丰富动画效果。

7、引导层

这个可以想像有一个形状在一条弯曲的轨道上前进,轨道就是引导层,在图层中右键可以选择引导层。被引导层可以拖到引导层下方即可。另外若需要按轨道前进,开始及结束关键帧时,形状中心点必须在轨道上。

引导层及遮罩层

8、遮罩层

屏幕是一个方形,如果我们只想有一个圆形区域可以显示,则需要用到遮罩层,这个也比较简单,在最上面新建图层,画一个回形,然后右键选择遮罩层,这样图形覆盖的区域才能显示了。

9、元件及影片剪辑

库面板介绍

在上面说了很多元件,这个我们通过库面板可以看清楚。
影片剪辑是元件的进阶,比如人物有一个走动的效果,我们可以创建一个影片剪辑,前后摆动作为它的关键帧。
这时我们需要从A点走到B点,则可以在场景中加入影片剪辑,然后两个关键帧,第一个帧在A点,第二个帧在B点。
两个帧中间的帧数用距离粗略估计一下,再创建一个传统补间。这时就有一个走路的效果了。

上面就是我用到的知识点,都还比较简单,准备空闲时看一下CreateJS再学习一下~

文章TAG:

本文标题:Animate CC之canvas动画玩耍篇
本文链接:http://www.jingjingke.com/c/12364.html

上一篇:Vue + 高德地图整理了几点
下一篇:没有了