第2章 关于Animate软件

2.1 Animate软件简介

Animate软件的前身是Flash，它不是被网络淘汰的FlashPlayer插件，而是一款优秀的二维动画制作软件。相信从事动画和设计行业的人士都对它比较熟悉，不仅可以用它在时间轴上做关键帧动画，还可以用它强大的脚本语言制作可交互的动画、游戏和应用。另外，它还提供一套完善的跨平台方案，让一个项目轻松输出到多个平台上，同时方便在各种设备上测试动画效果。Animate输出的程序支持GPU加速，可以保证动画在手机、平板电脑等性能较弱的设备上依然保持流畅。Animate可以输出mov、mp4、gif、序列帧、sprite表、纹理集、svg、H5等多种主流动画格式，方便设计师与工程师对接。Animate天生就具备“动画”和“交互”两种属性，这使它本身就很适合界面动画的制作。

随着近两年界面动画越来越被重视，新生的界面动画制作软件也有很多，如Hype3、Flinto、Principle等。虽然用这些软件可以很快速、很轻松地做出一些主流交互动画效果，但是灵活性较差。遇到自定义程度较高的动画效果就很难应付了。Framer.js在用代码来编写动画方面与Animate有点类似，但是从编程角度来说，其效率、灵活性、易用性上都比Animate差。

图2-1所示是Animate软件的快捷图标，图2-2所示是软件主界面图。

Animate软件主界面由若干个选项卡窗口视图组成，拖动每个窗口的标题栏即可改变选项卡窗口视图在界面中的位置。首先处于界面中央的是舞台，在舞台上可以用绘图工具绘图，也可以将图片、视频等文件导入舞台，并做移动、变形等处理。默认舞台背景色是白色，舞台大小是550×400，单位是像素，如果想改变舞台设置，可以用右键单击舞台的任意空白处，在弹出的菜单中选择“文档”，在“文档”菜单中可以设置舞台宽高、背景颜色和帧频等属性。在舞台上有两个形状，一个橙色圆形和一个绿色矩形，如图2-3所示。圆形位于矩形的上方，如果想要改变元素的上下层级关系，可以先选中该元素，然后按Ctrl+↑或Ctrl+↓组合键进行调整。除了上述调整元素层级的方法之外，也可以在时间轴中调整层级关系。

时间轴窗口非常重要。界面布局、添加关键帧、补间、调整缓动等操作都在这里完成，如图2-4所示。左侧黄色高亮部分是图层，在该时间轴中只有一个图层，并且该图层中只有一帧，单击第1帧即可选中该帧处的所有图形。左下角3个小按钮依次为“新建图层”“新建文件夹”“删除”。鼠标单击“新建图层”按钮即可新建一个图层，新建的图层默认处于最上方；鼠标单击“新建文件夹”按钮可以创建一个层文件夹，当时间轴中图层较多时，可以用层文件夹的形式来分类管理；选中某图层，单击“删除”按钮即可删除一个图层。

鼠标单击橙色圆形，按Ctrl+X组合键剪切该图形，单击新建图层的第1帧，按Ctrl+Shift+V组合键原位粘贴该图形，这样橙色圆形与绿色矩形就分别属于上、下两个不同的图层了。双击该图层可以更改名称，鼠标拖动某个图层上下移动即可调整该图层与其他图层的层级关系。图层处于上方的元素对应在舞台上的位置也处于上层。

鼠标单击第25帧处，按F5键就完成了添加帧的操作，如果帧频是25帧/s的话，整个动画的时长则为1s，如图2-5所示。

工具窗口中集合了常用的绘图、变形、文本、笔刷、骨骼、颜色等工具，如图2-6所示，图2-3中的圆形与矩形就是用椭圆工具和矩形工具绘制的。

属性面板可以设置舞台上元素的位置、大小、宽高、Alpha值、颜色等属性，也可以改变该界面元素的混合模式，或者添加一些滤镜效果。

右键单击舞台上的橙色圆形，选择“转换元件”，类型选择“影片剪辑”，然后单击“确定”按钮。鼠标单击该元件，在属性面板中查看属性，然后尝试更改各个属性值，并在舞台上查看元件的状态，如图2-7所示。

库是存放素材的地方，如图2-8所示。舞台上所有的元素都可以在库中找到，但是库里可能包含舞台上没有的元素。使用绘图工具绘制的图形元素不会显示在库中，只有将图形元素转换为“图形”“影片剪辑”等元件时才会在库中显示。

库窗口的左下角4个按钮分别为“新建元件”“新建文件夹”“属性”“删除”，用来管理和查看库中存放的素文件。鼠标单击选中库中某文件，再单击左下角第3个“属性”按钮，或鼠标右键单击该文件，然后选择“属性”，即可在属性窗口中更改元件相关的属性。

输出和编译器错误窗口是在编写程序时常用的两个窗口视图，输出窗口可以帮助检测程序是否正常运行，若编译器错误，面板则会将程序出错的原因显示出来，如图2-9和图2-10所示。