Hype

Hype中文官网 > 新手入门 > 基础教程:Hype 4符号与元素的排列(二)

基础教程:Hype 4符号与元素的排列(二)

发布时间:2020/11/02

在上一章节《基础教程:Hype 4符号与元素的排列(一)》中,讲述了在Hype 4交互动效制作软件中针对元素或者符号在画布中的定位工具以及把多个元素或者符号组合成一组的方法。本章节将继续讲述Hype 4 HTML5创作工具中在排版方面的三个基础概念。

  1. 一、前方和后方

在Hype 4工具箱中,有“前方”和“后方”两个工具。

在Hype 4场景设计中,具有“层”的概念的。以场景画布为标准,水平方向为X轴;垂直方向为Y轴;与显示器屏幕垂直方向为Z轴。场景中对象在Z轴位置的变化,就是“层”的变化,也就是“前方(顶层)”和“后方(底层)”的位置变化。

Z轴“层”的概念
图1:Z轴“层”的概念

通过“前方”工具,可以使选中的对象(元素或者符号)移动到“顶层”;通过“后方”工具,可以使选中的对象移动到“底层”。通过对对象选择“前方”或者“后方”,可以把对象移动到指定的“层”。

“前方”和后方
图2:“前方”和后方
  1. 二、分发

主要针对三个或者三个以上的对象(元素或者符号),以第1个和最后一个对象为标准,这两个对象之间的空间进行平均分配,使对象之间的水平或者垂直距离相等。这样一个对对象排列的方法称为“分发”。

“分发”分三种情况:水平分发、垂直分发以及水平垂直分发。

  1. 水平分发。选择要分发的对象,在鼠标右键菜单选择“分发”-“水平”,完成对象的水平分发。
水平分发
图3:水平分发
  1. 垂直分发。选择要分发的对象,在鼠标右键菜单选择“分发”-“垂直”,完成对象的垂直分发。
垂直分发
图4:垂直分发
  1. 水平垂直分发。就是把选择的对象首先进行水平分发,然后再进行垂直分发。
水平垂直分发
图5:水平垂直分发
  1. 三、对齐

对两个或者两个以上的对象以边(上边、右边、下边、左边)、水平居中、垂直居中进行对齐的操作,称为“对齐”。

  1. 以“边”对齐。
  2. 选择需要对齐的对象,鼠标右键菜单选择“对齐”-“左”,全部对象以最接近画布左边的对象的左边为基准线进行对齐。
左边对齐
图6:左边对齐
  1. 选择需要对齐的对象,鼠标右键菜单选择“对齐”-“右”,全部对象以最接近画布右边的对象的右边为基准线进行对齐。
右边对齐
图7:右边对齐
  1. 选择需要对齐的对象,鼠标右键菜单选择“对齐”-“上”,全部对象以最接近画布上边的对象的上边为基准线进行对齐。
上边对齐
图8:上边对齐
  1. 选择需要对齐的对象,鼠标右键菜单选择“对齐”-“下”,全部对象以最接近画布下边的对象的下边为基准线进行对齐。
下边对齐
图9:下边对齐
  1. “居中(水平居中)”对齐。在全部需要对齐的对象中,对象与画布的左边的距离最小值与最大值之和的平均值为对齐基准线,要对齐的全部对象以此基准线进行水平中间对齐。感兴趣的小伙伴们可以点击Hype下载进行体验。
水平居中对齐
图10:水平居中对齐
  1. “中等(垂直居中)”对齐。在全部需要对齐的对象中,对象与画布的上边的距离最小值与最大值之和的平均值为对齐基准线,要对齐的全部对象以此基准线进行垂直中间对齐。
垂直居中对齐
图11 :垂直居中对齐
  1. 四、总结

本章讲述了在排版中很重要的三个基本概念:

  • “前方”和“后方”是“层”的概念,决定了“谁”覆盖“谁”,哪一层被显示能够看到。
  • “分发”的是一个空间分布的概念,决定了对象之间在场景画布中的分布规律。
  • “对齐”是一个平面排列的概念,决定了对象之间以什么样的基准线在平面上进行排列。

本章节是讲述元素和符号内容的最后一个章节,元素和符号是Hype 4HTML5创作工具中的基石,一切动效都是基于元素和符号进行操作的。

作者:东佛

标签:空间分布对齐分发

读者也访问过这里:
Hype中文版
创建漂亮的HTML5网页内容
立即购买
QQ 群
官方交流群:1046763737 立即加群
400-8765-888 kefu@makeding.com
热门文章
H5制作软件Hype导出功能详解
Hype是一款Mac端网页制作工具,它可以通过时间线录制功能制作各种各样的网页炫酷动画效果,同时也支持使用物理引擎制作动画。当然,它的强大不仅仅体现于动画制作方面,它的导出功能同样也是功能齐全,下面小编就通过使用Hype 4版本,为大家详细介绍下这款H5制作软件的导出功能。
2020-06-05
UI动效设计工具Hype的响应式布局及设置
响应式布局可以使用户的网页在各种尺寸的屏幕上都能够较好地兼容,不会因为屏幕尺寸大小变化导致网页拉伸变形。Hype就支持这种响应式布局,它允许设计者为单个场景创建多个布局,当用户在浏览器中显示页面时,Hype将根据设备的当前宽度动态加载合适的布局。
2020-05-21
Hype软件持久符号的应用
Hype是一款支持无代码创作炫酷网页的Mac端应用软件,它支持各种动画、元素。其中有一个强大的符号功能,该功能分为基本符号和持久符号两种,本文中,小编将使用Hype 4版本,为大家演示和讲解Hype中的持久符号。
2020-06-04
Hype中触发事件的使用
一个优秀的网页绝不仅仅是一个静态的页面,在网页当中,还应该存在着一些点击或者触摸等主动触发事件,当用户点击页面上某处的时候,页面会相应的发生一些动态变化,这就是网页的触发事件。Hype作为一款专业的Mac端网页制作软件,同样支持触发事件功能。
2020-06-08
使用Hype进行动画制作的入门介绍
在一个网页中,如果多了一些动态元素的呈现,会使页面看起来更显得高大上一些。而Hype使用功能强大的动画系统,利用时间线录制功能,使制作者制作动画变得轻而易举。
2020-05-21
Hype制作矢量形状动态变形的动画效果
相信大家都看过一些网页动画,就是从一个矢量图形慢慢变成另外一个矢量图形。其实这个效果利用Hype可以非常简单地实现,下面小编就利用Hype 4版本,教大家如何快速简单地实现这一功能。
2020-06-09