基础教程：Hype 4弹性布局（八）— 多个对象的缩放规律

在前面章节中，在Hype 4交互动效制作软件中，通过对单个对象设置弹性及其缩放效果分析，归纳总结了单个对象在场景放大或者缩小时的缩放规律。本章节继续探讨Hype 4 HTML5创作工具中多个对象在场景放大或者缩小时的缩放规律。

需要查看上一章节的小伙伴们，可点击：Hype 4弹性布局（七）— 扩展以填充

案例模型：一个与场景同大小的矩形背景图，随场景100%缩放。背景图上有三个对象：矩形（50px,50px）宽50px，高50px；圆形（450px,150px）宽50px，高50px；六边形（200px,300px）宽50px，高50px。

图1：案例模型

案例要求实现两个目标：

目标1：场景放大或者缩小，三个对象大小不变，相对于场景的相对位置保持不变；

目标2：实现目标1的同时，三个对象以场景相同的缩放比例进行缩放。

一、实现目标1

分析：由于三个对象的大小不变，因此三个对象都没有弹性；三个对象相对于场景的相对位置不变，意味着三个对象的四条边都被固定了，才能保证其相对位置不变。

操作：

场景选择“伸缩”缩放行为，三个对象固定四个边，不选择弹性。三个对象的位置跟随场景的缩放而改变，但相对位置保持不变，实现了目标1。

图2：背景“伸缩实现目标1

场景选择“缩小以适合”缩放行为，三个对象固定四个边，不选择弹性。当场景限制宽高缩小，对象位置会产生偏移，不能保持相对位置不变。

图3：场景“缩小以适合”不能实现目标1

场景选择“扩展以填充”缩放行为，三个对象固定四个边，不选择弹性。当场景限制宽高扩展，三个对象的位置跟随场景的扩展而改变，而且它们相对于场景保持相对位置不变。

图4：背景“扩展以填充”实现目标1

二、小结

目标1案例也是弹性布局的一种应用。当场景在不同宽度的设备上显示，场景的宽度会自动转变为设备屏幕的宽度，场景上的对象相对于场景的相对位置保持不变。

如果场景采用“伸缩”缩放行为，场景在设备上的宽度改变了，高度却没有变化，即使场景上的对象相对位置不变，但是场景会发生畸形变化。

如果场景采用“扩展以填充”缩放行为，场景在设备上宽度改变了，高度也会等比例的发生改变，场景不会发生畸形变化。

所以，对于案例目标1而言，以移动设备优先，以要求最小的设备Breakpoint为基础设计场景，使场景的缩放行为选择“扩展以填充”，既保持了场景上的对象的相对位置，也保证了场景不因宽度的变化产生畸变。