【Hype】- 定制一个旅行路线动画图-中

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

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

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

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

1.文件打开

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

图片2:打开文件

2.创建目的地元素

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

图片3:元素添加按钮

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

图片4:添加椭圆形元素

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

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

图片5:正圆参数设置

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

图片6:目的地详细参数

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

图片7:目的地效果

3.创建路径元素

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

图片8:添加路径元素

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

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

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

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

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

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

设置完成后，路线元素效果如下：

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

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

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

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

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

下一次会为大家介绍最后一部分，动态效果部分实现，一定要来哦。