基础教程：Hype 4度量面板（一）

在上一章节面板组介绍中，小伙伴已经了解到在Hype 4交互动效制作软件中，度量面板主要是调节对象的大小、中心点位置以及三种对象变形等，本章节将详细介绍这些属性参数的调整以及调整后的效果。

一、放置属性

对象的放置属性包括了两个参数：位置和大小。

位置参数：以对象的左上角为参考点，参考点与画布上边的距离大小为“上”参数；参考点与画布左边的距离大小为“左”参数。调整“左”参数和“上”参数可以调整对象在画布的位置。通过位置参数，可以给对象准确定位。

图1：设置对象位置

大小参数：通过调整“宽度”和“高度”数值，可以调整对象的大小。如果选择了“限制比例”，那么只要调整“宽度”参数，“高度”参数就会按照宽度的调整的比例进行调整，反之亦然。如果不选择“限制比例”，可以单独“宽度”参数或者“高度”参数。

图2：设置对象大小

二、对象原点设置

对象原点的默认位置是对象的中心点，在转换原点参数中，X偏移量为50%，Y偏移量为50%。所谓的偏移量是指：对象的原点与参考点（对象的左上角）的距离和对象的宽或高的比。

X偏移量 = （原点X轴的值 – 左上角X轴的值）/ 对象宽的值 * 100%

Y偏移量 = （原点Y轴的值 – 左上角Y轴的值）/ 对象高的值 * 100%

图3：对象原点位置

小伙伴除了记住当X偏移量=50%，Y偏移量=50%时，原点为对象中心点外，还需记住：

当X偏移量=0，Y偏移量=0时，原点为对象左上角；

当X偏移量=100%，Y偏移量=0时，原点为对象右上角；

当X偏移量=100%，Y偏移量=100%时，原点为对象右下角；

当X偏移量=0，Y偏移量=100%时，原点为对象左下角；

图4：对象四个角为原点的设置

对象原点的位置与对象在画布中的位置无关，与下面将要讲述的三种变形样式——缩放、旋转和倾斜有关。

三、缩放

“缩放”是Hype 4中对象三种变形样式的一种，它实现的是对象在时间线上放大或者缩小的效果。

为什么需要“缩放”。

在Hype 4中，改变对象的大小可以在“放置”设置中调整对象的宽度和高度的值。但是，在动效设计中，不会去改变对象的宽高值来对对象进行放大或者缩小。原因是在动效过程中，不停地改变对象的宽高值会不断刷新屏幕，影响动效效果。

因此在Hype 4动效设计中，使用“缩放”设置调整对象在动效中的大小变化。

图5：“缩放”在动效中的使用

对象原点对“缩放”的影响。

在默认情况下，对象的原点就是对象的中心点，对象的缩放是以原点为中心进行收缩或放大，如图5的效果；如果把对象的原点移到左上角，对象的缩放就以左上角为中心点向左向上收缩或者向右向下放大，如图6效果。

图6：原点对缩放的影响

四、小结

本章节详细讲述了Hype 4 HTML5创作工具中，在度量面板中的三个设置——放置、转换原点和缩放。放置决定了对象的真实大小以及在画布中的位置；转换原点是改变了对象变形时的基准参考点，它与对象的位置无关；缩放是使对象在时间线上实现放大或缩小的效果。

在下一章节，将继续讲述对象的另外两种变形样式——旋转和倾斜。