[发明专利]一种类太阳系系统导航的创建方法和装置

说明书

本发明实施例公开了一种类太阳系系统导航的创建方法和装置，该方法包括：设置太阳图像；以所述太阳图像为中心，创建多个环绕所述太阳图像的运行轨道；在每个运行轨道上设置并定位相应的行星图像；为所述太阳图像、行星图像以及运行轨道设置动画，以使整个类太阳系系统导航里的星体动起来，其中，每个行星星体作为系统导航中的一个模块入口，太阳用于指示系统名称。通过该实施例方案，创建出了酷炫、个性的系统导航，提高用户的视觉体验。

技术领域

本发明实施例涉及系统导航设计技术，尤指一种类太阳系系统导航的创建方法和装置。

背景技术

一个系统会有一个导航部分，目前的导航部分有各种各样的设计，但是都没有特色，不能给予使用者良好的视觉体验。

发明内容

本发明实施例提供了一种类太阳系系统导航的创建方法和装置，能够创建出酷炫、个性的系统导航，提高用户的视觉体验。

为了达到本发明实施例目的，本发明实施例提供了一种类太阳系系统导航的创建方法，所述方法可以包括：

设置太阳图像；

以所述太阳图像为中心，创建多个环绕所述太阳图像的运行轨道；

在每个运行轨道上设置并定位相应的行星图像；

为所述太阳图像、行星图像以及运行轨道设置动画，以使整个类太阳系系统导航里的星体动起来，其中，每个行星星体作为系统导航中的一个模块入口，太阳用于指示系统名称。

在本发明的示例性实施例中，所述设置太阳图像可以包括：

在预设位置处，通过层叠样式表css设置代表太阳的图片的属性，形成所述太阳图像；所述代表太阳的图片的属性包括：尺寸、形状和倾斜程度。

在本发明的示例性实施例中，所述以所述太阳图像为中心，创建多个环绕所述太阳图像的运行轨道可以包括：

通过层叠样式表中的图层div中的画圆border-radius属性，设置多个环绕所述太阳图像的圆形；其中，每个圆形的宽度为可配置的运行轨道的半径，每个圆形的高度为零。

在本发明的示例性实施例中，border-radius设置为50％。

在本发明的示例性实施例中，所述在每个运行轨道上设置并定位相应的行星图像可以包括：

通过预设算法计算每个行星在相应的运行轨道上的位置；

在每个位置的中心处设置一个div；

设置每个行星的属性；所述每个行星的属性包括：尺寸和形状。

在本发明的示例性实施例中，所述通过预设算法计算每个行星在相应的运行轨道上的位置可以包括：

通过下述第一关系式计算行星相对于所在轨道的top百分比值：positionTop＝(r-r*Math.sin(deg/180*Math.PI))/(r*2)*100；

通过下述第二关系式计算行星相对于所在轨道的left百分比值：positionLeft＝(r-r*Math.sin(deg/180*Math.PI))/(r*2)*100；

其中，Math.PI为圆周率数值，r为当前运行轨道的半径，deg为行星与太阳的连线位于第二象限时该连线与X轴的夹角。

在本发明的示例性实施例中，所述为所述太阳图像、行星图像以及运行轨道设置动画可以包括：

为所述太阳图像、行星图像以及运行轨道外层div设置样式；

为所述太阳图像加反向旋转角度；