码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-09-17 17:00:06      阅读:30      评论:0      收藏:0      [点我收藏+]

标签:strong   现在   str   http   连线   菜单   大小   完成   com   

上一篇文章中,给大家介绍了使用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下载试用。

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

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

标签:strong   现在   str   http   连线   菜单   大小   完成   com   

原文地址:https://www.cnblogs.com/xdaren/p/13625340.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!