Hype

Hype中文官网 > 使用技巧 > 绝对干货!H5动画软件制作大揭秘!

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

发布时间:2021/07/05

最近收到了公司的一个业务新需求:做一个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也不在话下,快来体验吧!

作者署名:包纸

标签:制作H5动画hype

读者也访问过这里:
Hype中文版
创建漂亮的HTML5网页内容
立即购买
QQ 群
官方交流群:1046763737 立即加群
kefu@makeding.com
热门文章
基础教程:Hype 4软件界面介绍
Hype是一款基于MacOS系统的交互动效制作软件,延续了苹果软件的简洁风格,与Keynote软件的界面基本一致。
2020-07-23
H5制作软件Hype导出功能详解
Hype是一款Mac端网页制作工具,它可以通过时间线录制功能制作各种各样的网页炫酷动画效果,同时也支持使用物理引擎制作动画。当然,它的强大不仅仅体现于动画制作方面,它的导出功能同样也是功能齐全,下面小编就通过使用Hype 4版本,为大家详细介绍下这款H5制作软件的导出功能。
2020-06-05
基础教程:Hype 4工作流程(一)
本章节通过一个简单的案例,完整讲述Hype 4的基础操作,让小伙伴了解怎么样使用Hype 4交互动效制作软件设计一个动效。
2020-11-09
Hype 如何进行安装与激活
本篇将为各位小伙伴们集中介绍一下H5制作软件Hype的安装与激活教程。
2020-12-24
Hype软件持久符号的应用
Hype是一款支持无代码创作炫酷网页的Mac端应用软件,它支持各种动画、元素。其中有一个强大的符号功能,该功能分为基本符号和持久符号两种,本文中,小编将使用Hype 4版本,为大家演示和讲解Hype中的持久符号。
2020-06-04
使用Hype进行动画制作的入门介绍
在一个网页中,如果多了一些动态元素的呈现,会使页面看起来更显得高大上一些。而Hype使用功能强大的动画系统,利用时间线录制功能,使制作者制作动画变得轻而易举。
2020-05-21