绝对干货！H5动画软件制作大揭秘！

最近收到了公司的一个业务新需求：做一个H5网页动画，提升客户的产品使用体验。这是我们小组第一次制作H5动画，没有经验，像无头苍蝇，反复碰壁，最终团队内部终于敲定了一款软件，进行设计制作。

这款软件就是Mac系统的Hype，它是Mac系统常用的H5动画制作软件之一，能够完美迎合我们的业务需求，下面一起来看看它都有哪些优势，为什么能符合我们的独特需求。

一、具备持久符号功能

业务场景需求1：在H5动画的各个业务场景上方，都加上公司的整体LOGO。

这个需求可以使用Hype的“持久符号”功能来实现，将第一个场景中的公司LOGO图片右键选择“转换为持久符号”，如下图1。

图1：转换为持久符号

转换为持久符号以后，可选择将该符号添加到所有场景中，如下图2，完成后，所有的场景中的同个位置都会存在公司LOGO，且修改其中某个场景的LOGO时，其余场景中的LOGO会跟随改变，提升工作效率，简直是设计的福音。

图2：添加到所有场景

二、可嵌入其他网页代码

业务场景需求2：在第二个场景页面中，加入公司的网站首页页面。

这个需求可把我们难坏了，也是团队选择了Hype进行制作的重要原因。我们一开始尝试使用其他网站在线H5制作工具，但是那些工具普遍只能插入矩形、图片、文字、视频等普通元素，无法插入HTML5元素，这意味着无法在H5页面中使用公司的网站页面。

但是Hype支持导入HTML小组件，如下图3，该小组件中可以嵌入其他网页的内嵌框架，原理是使用ifame技术进行网页内嵌。

图3：HTML小组件

实际演示效果如下图4，在HTML小组件中使用input标签，网页预览时就可以在H5中显示出INPUT输入框了。

图4：HTML组件演示

当然，除了自己写HTML代码以外，还可以直接指定某个URL网址，如百度，就可以在H5页面中直接显示该网址页面，如下图，是不是感觉离下班又近了一步啊！

图5：使用指定URL

三、可自定义字体

业务场景需求3：要求使用公司独特要求的创意毛笔书法字体。

为什么不使用在线的H5平台进行H5制作？还有一大原因：无法使用自定义字体，只能从给定的字体列表中选取字体。

后来我们惊喜的发现，Hype支持自定义字体导入，如下图所示，这个功能简直就是救命啊有木有。 

图6：添加字体

它的字体添加灵活到什么程度？可通过自定义CSS样式文件来往Hype中添加字体，如下图7。

图7：自定义CSS样式字体

上述三个场景需求是本次项目中最为棘手的三个需求，Hype都完美解决了，准时下班有指望了。当然制作H5的其他需求Hype也不在话下，快来体验吧！