基础教程：Hype 4弹性布局（七）— 扩展以填充

在上一章，讲述了Hype 4交互动效制作软件中的“缩小以适应”缩放行为选项中图钉与单个对象弹性的关系及其缩放的效果。本章节继续探讨Hype 4 HTML5创作工具中的“扩展以填充”缩放行为选项中，图钉与单个对象的关系及缩放效果。

为了利于分析，本章节的案例继续沿用讲述“伸缩”案例的案例模型：场景选择100%缩放，宽为600px，高为400px。对象宽为300px，高为200px，对象左边距为0，上边距为0。在浏览器中，模拟设备窗口的宽为600px，高为400px，与场景原型的宽度和高度相等。

同样，在操作中，场景分别采用“伸缩”和“扩展以填充”两种缩放行为。

一、场景采用“伸缩”，对象使用“扩展以填充”缩放行为

在Hype 4度量面板，“扩展以填充”是指在设计原型中，以具有弹性的对象的宽度与场景的宽度比为标准，当对象与显示屏幕或者浏览器的宽度的比值大于或等于原型中对象与场景的宽度比值，此时对象宽高值最小。当屏幕宽度变大，对象限制宽高等比例放大。

1、选择左边和上边图钉，固定对象的上边和左边。

向右移动模拟设备窗口的右边框，使场景宽度变大，对象限制宽高等比例放大。

图1：固定对象左边和右边，场景变宽的缩放效果

向左移动模拟设备窗口的右边框，使场景宽度变小，对象的宽度和高度不变。

图2：固定对象的左边和上边，场景变窄的缩放效果

2、选择右边和下边图钉，固定对象的右边和下边。

向右移动模拟设备窗口的右边框，使场景宽度变大，对象的宽度与场景宽度的比值始终保持为1:2。对象的宽度在变大的同时，高度在减少。

图3：固定对象右边和下边，场景变宽的缩放效果

向左移动模拟设备窗口的右边框，使场景宽度变小，对象向下偏移，对象的宽与设备窗口的宽的比值始终保持为1:2，宽度变小，高度变大。

图4：固定对象右边和下边，场景变窄的缩放效果

3、选择四个边的图钉，固定对象的四条边。

向右移动模拟设备窗口的右边框，使场景宽度变大，对象的宽与设备窗口的宽的比值始终保持为1:2，宽度变大，高度不变。

图5：固定对象的四边，场景变宽的缩放效果

向左移动模拟设备窗口的右边框，使场景宽度变小，对象的宽度不变，高度变大。

图6：固定对象的四边，场景变窄的缩放效果

二、场景和对象均采用“扩展以填充”缩放方法

对象固定4条边，并且选择水平和垂直的弹性方向。向右移动模拟设备窗口的右边框，使场景宽度变大。对象跟随场景的放大等比例地放大，不但始终保持其位置不变，而且宽度和高度均为场景宽度和高度的一半。

图7：背景和对象采用“扩展以填充”的放大效果

三、小结

一般情况下，当场景应用在宽度比其大的设备上时，对象的弹性选择“扩展以填充”，使对象的布局在大屏幕上显示更加合理。

当场景采用“伸缩”及对象使用“扩展以填充”时，只有选择固定对象的左边和上边，并且使场景放大时，对象才会保持相对位置不变进行放大，但是，背景会产生畸变。

当场景和对象都采用“扩展以填充”，场景会限制宽高放大，对象在保持相对位置不变的同时跟随场景等比例放大。

在下一章节，将通过两个案例的分析和操作，继续探讨多个对象的弹性效果。