Hype

Hype中文官网 > 使用技巧 > 实战:使用Hype绘制动态旅行路线(二)

实战:使用Hype绘制动态旅行路线(二)

发布时间:2020/05/22

上一篇文章中,给大家介绍了使用Hype 4绘制动态旅行路线实现方法中,场景基本布局的实现,对具体实现方法感兴趣的小伙伴,可以去查看小编的上一篇文章——实战:使用Hype绘制动态旅行路线(一)

今天小编继续来带大家实现动态旅行路线的第二部分——旅行路线布局实现。我们先来回顾一下上一次实现的最终效果,如下图:

场景基础布局效果
图片1:场景基础布局效果

今天我们要在上一次的基础上,继续绘制旅行路线的布局元素。下面我们一起来看具体的实现步骤吧。

1.文件打开

首先打开Hype 4,菜单栏->文件->打开,选择上一次保存的文件进行打开。

打开文件
图片2:打开文件

2.创建目的地元素

首先目的地及路线的绘制,都是通过添加元素的方式完成。点击下方图中的元素,根据绘制要求进行不同类型元素选择,进行添加。

元素添加按钮
图片3:元素添加按钮

我们这里旅行目的地以圆点来表示,Hype 4中未提供单独绘制圆形元素,所以这里在添加时选择椭圆形元素。下图标识了选择的元素类型,以及添加后的椭圆形元素。

添加椭圆形元素
图片4:添加椭圆形元素

因为默认添加的元素是无颜色填充的,为了让大家能够看到效果,小编这里对圆形的颜色进行了编辑,大家可以保持添加后的默认效果即可。

下面继续对添加的椭圆形元素进行参数调整。需要注意的是,因为元素为椭圆形,所以我们需要通过参数调整将其变为正圆,通过将元素宽高设置为同一数值,并且勾选限制比例,确保元素为正圆。具体参数如下:

正圆参数设置
图片5:正圆参数设置

确保元素为正圆后,继续调整元素的位置、大小、颜色、边框等属性,以呈现圆点效果。此部分的位置参数,可根据大家希望设置的目的地地点进行调整。具体参数如下图:

目的地详细参数
图片6:目的地详细参数

设置好第一个目的地元素参数后,直接选中元素,右键选择复制,粘贴另外三个目的地元素,并将每个元素拖拽到需要的位置即可。完成后的目的地效果如下图所示:

目的地效果
图片7:目的地效果

3.创建路径元素

下面进行路径元素的绘制。路径的类型选择矢量形状进行添加。如下图:

添加路径元素
图片8:添加路径元素

矢量形状添加后,鼠标形状会变为钢笔形状指针。绘制形状,分别点击两个目的地作为矢量形状的开始点和结束点,既可以绘制出两个目的地之间的连线,然后按Esc键退出矢量形状绘制。绘制效果如下图:

路线矢量形状绘制
图片9:路线矢量形状绘制

为了让路径的效果更好,我们对路径进行弧度的调整,在路径直线中部位置进行点击鼠标并按住,进行拖拽,路径将随着鼠标变化为曲线,移动鼠标适当调整弧度,调整效果如下:

调整路线形状弧度
图片10:调整路线形状弧度

调整到合适弧度后,按通过Esc键,退出形状绘制效果,然后对矢量形状进行宽度颜色元素参数调整,具体参数如下图:

路线元素详细参数
图片11:路线元素详细参数

设置完成后,路线元素效果如下:

路线设置完成后效果
图片12:路线设置完成后效果

此处如果路线绘制时,端点位置不精确,可以通过双击路径元素,对其继续进行编辑,编辑方式与上面的绘制过程相同。

下面重复上述绘制,完成剩余三条路线元素绘制,实现效果图如下:

路线绘制最终效果
图片13:路线绘制最终效果

到现在,我们已经完成了旅行地图第二部分内容,路线部分的绘制,本教程内容到此结束。感兴趣的小伙伴们可以进行Hype下载试用。

下一次会为大家介绍最后一部分,动态效果部分实现,具体内容见文章实战:使用Hype绘制动态旅行路线(三),一定要来哦。

那我们今天的教程到此就结束了,对Hype 4更多操作感兴趣的小伙伴,可以查看Hype 4的官网,获得更多技巧和分享。

作者:Noel

标签:元素颜色路线

读者也访问过这里:
Hype中文版
创建漂亮的HTML5网页内容
立即购买
QQ 群
官方交流群:1046763737 立即加群
400-8765-888 kefu@makeding.com
热门文章
Hype制作矢量形状动态变形的动画效果
相信大家都看过一些网页动画,就是从一个矢量图形慢慢变成另外一个矢量图形。其实这个效果利用Hype可以非常简单地实现,下面小编就利用Hype 4版本,教大家如何快速简单地实现这一功能。
2020-06-09
实战:使用Hype绘制动态旅行路线(一)
小编今天给大家介绍一款HTML5动画制作软件——Hype 4。Hype 4是一款不需要使用Flash就可以进行HTML5动画制作的软件,让完全不了解代码的大家也能够轻松使用并制作自己的动画。
2020-05-22
Hype中触发事件的使用
一个优秀的网页绝不仅仅是一个静态的页面,在网页当中,还应该存在着一些点击或者触摸等主动触发事件,当用户点击页面上某处的时候,页面会相应的发生一些动态变化,这就是网页的触发事件。Hype作为一款专业的Mac端网页制作软件,同样支持触发事件功能。
2020-06-08
H5制作软件Hype导出功能详解
Hype是一款Mac端网页制作工具,它可以通过时间线录制功能制作各种各样的网页炫酷动画效果,同时也支持使用物理引擎制作动画。当然,它的强大不仅仅体现于动画制作方面,它的导出功能同样也是功能齐全,下面小编就通过使用Hype 4版本,为大家详细介绍下这款H5制作软件的导出功能。
2020-06-05
在Hype中手动编辑关键帧
在Hype中,制作动画是基于关键帧来实现的,通过时间线录制功能,Hype将为用户自动添加关键帧,不过添加关键帧以后,可能还会进行微调,那么用户该如何手动编辑关键帧呢?
2020-05-21
使用交互动效设计软件Hype预览和导出网页
作为一个网页制作者,大家在制作网页的时候,一般需要对网页效果进行预览,才能了解网页效果是否达到个人预期,以便于接下来的设计制作。另外,当大家制作好网页以后,也会需要对网页文件进行导出得到最终成品。
2020-05-21