发布时间:2020-05-22 14: 43: 51
上一篇文章中,给大家介绍了使用Hype 4绘制动态旅行路线实现方法中,场景基本布局的实现,对具体实现方法感兴趣的小伙伴,可以去查看小编的上一篇文章——实战:使用Hype绘制动态旅行路线(一)。
今天小编继续来带大家实现动态旅行路线的第二部分——旅行路线布局实现。我们先来回顾一下上一次实现的最终效果,如下图:
今天我们要在上一次的基础上,继续绘制旅行路线的布局元素。下面我们一起来看具体的实现步骤吧。
1.文件打开
首先打开Hype 4,菜单栏->文件->打开,选择上一次保存的文件进行打开。
2.创建目的地元素
首先目的地及路线的绘制,都是通过添加元素的方式完成。点击下方图中的元素,根据绘制要求进行不同类型元素选择,进行添加。
我们这里旅行目的地以圆点来表示,Hype 4中未提供单独绘制圆形元素,所以这里在添加时选择椭圆形元素。下图标识了选择的元素类型,以及添加后的椭圆形元素。
因为默认添加的元素是无颜色填充的,为了让大家能够看到效果,小编这里对圆形的颜色进行了编辑,大家可以保持添加后的默认效果即可。
下面继续对添加的椭圆形元素进行参数调整。需要注意的是,因为元素为椭圆形,所以我们需要通过参数调整将其变为正圆,通过将元素宽高设置为同一数值,并且勾选限制比例,确保元素为正圆。具体参数如下:
确保元素为正圆后,继续调整元素的位置、大小、颜色、边框等属性,以呈现圆点效果。此部分的位置参数,可根据大家希望设置的目的地地点进行调整。具体参数如下图:
设置好第一个目的地元素参数后,直接选中元素,右键选择复制,粘贴另外三个目的地元素,并将每个元素拖拽到需要的位置即可。完成后的目的地效果如下图所示:
3.创建路径元素
下面进行路径元素的绘制。路径的类型选择矢量形状进行添加。如下图:
矢量形状添加后,鼠标形状会变为钢笔形状指针。绘制形状,分别点击两个目的地作为矢量形状的开始点和结束点,既可以绘制出两个目的地之间的连线,然后按Esc键退出矢量形状绘制。绘制效果如下图:
为了让路径的效果更好,我们对路径进行弧度的调整,在路径直线中部位置进行点击鼠标并按住,进行拖拽,路径将随着鼠标变化为曲线,移动鼠标适当调整弧度,调整效果如下:
调整到合适弧度后,按通过Esc键,退出形状绘制效果,然后对矢量形状进行宽度颜色元素参数调整,具体参数如下图:
设置完成后,路线元素效果如下:
此处如果路线绘制时,端点位置不精确,可以通过双击路径元素,对其继续进行编辑,编辑方式与上面的绘制过程相同。
下面重复上述绘制,完成剩余三条路线元素绘制,实现效果图如下:
到现在,我们已经完成了旅行地图第二部分内容,路线部分的绘制,本教程内容到此结束。感兴趣的小伙伴们可以进行Hype下载试用。
下一次会为大家介绍最后一部分,动态效果部分实现,具体内容见文章实战:使用Hype绘制动态旅行路线(三),一定要来哦。
那我们今天的教程到此就结束了,对Hype 4更多操作感兴趣的小伙伴,可以查看Hype 4的官网,获得更多技巧和分享。
作者:Noel
展开阅读全文
︾
读者也喜欢这些内容:
怎么在Hype中设置掉落弹起的动画效果
如果使用Hype制作球体掉落弹起的效果,是不是只能通过绘制运动路径的方法?其实,我们有更加便捷的方法,就是在关键帧过渡方式中选择弹起的方式,让元素在开始帧与结束帧之间呈现弹跳的动画。...
阅读全文 >
Hype 4一条时间线的轮播图(二) 图片运动与时间线操作设置
在上一章节中讲述了在一条时间线上的轮播图的原理以及创建了符号显示窗口,本章节讲述轮播的的核心——图片运动及如何设置时间线操作,最终实现在一条时间线上的轮播图。...
阅读全文 >
Hype 4时间线操作(八) 开始时间线
经过前面的学习,小伙伴应该都知道,每一个场景都有自身的时间线。主时间线的生命周期在场景加载的时候开始,场景退出时结束。...
阅读全文 >
Hype 4时间线操作(九)自定义时间线循环往复运动
本章节是上一章节“开始时间线”的延续篇,由于在主时间线上设置触发关键实现自定义时间线的循环往复运动相对比较复杂,涉及到的分析比较多,知识点非常重要,因此单独用一章节来讲述自定义时间线的循环往复运动。...
阅读全文 >