基础教程：Hype 4弹性布局（五）

在上一章，讲述了在Hype 4交互动效制作软件中图钉与单个对象水平弹性和垂直弹性的关系，知道对象固定一边和固定相对两边，对象缩放的不同效果。本章节继续探讨Hype 4 HTML5创作工具中图钉与同时具有水平和垂直弹性的对象的关系，并且选择不同的缩放行为，对象的弹性效果的差异。

由于对象同时具有水平和垂直弹性，会打开“缩放行为”选项，因此本章节及后面的章节会依照不同的缩放行为讲述图钉与对象弹性的关系。

在本章节及后面的关于弹性布局“缩放行为”的章节中，所有例子都会基于如下模型：场景宽高100%缩放，红色边框范围为场景范围，随场景大小变化而变化。测试对象是背景为绿色的矩形元素，宽度为300px，高度为200px,上边距为0，左边距为0。对象同时具有水平和垂直弹性。

此外，场景布局的变化是因屏幕宽度的变化引起的，在这些案例中，场景或者屏幕窗口的高度保持不变，屏幕窗口宽度基于变大或者变小两种情况进行分析。

图1：案例模型

一、“伸缩”缩放行为

缩放行为的默认选项是“伸缩”，该行为意味着对象的缩放是任意的，没有宽度和高度的比例限制。

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

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

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

向左移动模拟设备窗口的右边框，使场景宽度变小。对象的宽度与窗口的宽度比值保持1:2不变，宽度随着窗口宽度的变小而变小，高度不变。

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

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

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

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

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

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

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

向右移动模拟设备窗口的右边框，使场景宽度变大。对象的宽度与窗口的宽度比值保持1:2不变，宽度随着窗口宽度的变大而变大，高度随着窗口宽度的变大而变小。（与固定对象的右边和下边的情况一样）

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

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

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

最后，在案例模型中，红色边框包围着场景，并且随着场景大小的变化而变化。其原理就是设置对象的宽度和高度等于场景的宽度和高度，四条边与场景画布的边距为0，且4条边被固定（图钉全选上），对象具有水平和垂直两个方向的弹性，这样就可以获得案例的效果。

图8：实现红色边框随场景大小变化而变化

二、小结

“伸缩”缩放选项是于对象自身而言，它的缩放没有宽高比限制。即使这样，如果没有特殊要求，不要选择固定对象的右边和下边，避免对象在缩放的时候出现偏差。

下一章节，继续讲述“缩小以适合”缩放选项中，图钉与对象弹性的关系及效果。