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

在上一章节“Hype 4度量面板（一）”，详细讲解了在Hype 4交互动效制作软件中，如何通过度量面板设置对象的位置、大小以及原点。本章节继续讲述在Hype 4 HTML5创作工具中如何通过度量面板设置对象在时间线上的旋转和倾斜的效果。

一、旋转

“旋转”也是Hype 4中对象三种变形样式的一种，它实现的是在时间轴上对象绕X轴、Y轴或Z轴转动的效果。在动效设计中，使用最多的是绕Z轴转动。关于X轴、Y轴和Z轴的概念，请参考“Hype 4元素和符号排列（二）”中的“前方”和“后方”。

调整旋转参数。

方法一：在“旋转”设置中，可以在“角度”参数中对X、Y和Z直接填写数值，在Z上填写数值的就是绕Z轴旋转的角度。数值为正，则为顺时针旋转；数值为负，则为逆时针旋转。Y轴和X轴亦是如此设置。

图1：填写数值确定旋转角度

方法二：在填写角度数值的旁边有一个圆圈包着一个黑点的图案，鼠标按着黑点不放，顺时针移动黑点，可以看到角度数值在增大，画布上的对象在顺时针旋转；如果逆时针移动黑点，角度数值在减少（变为负值），画布上的对象在逆时针旋转。

图2：移动黑点确定旋转角度

原点对旋转的影响。

以绕着Z轴旋转为例，默认情况下，对象是绕着中心点旋转的，参考图1或图2效果。如果把原点改为左上角（X偏移量0，Y偏移量0），那么对象是绕着左上角进行旋转，参考图3效果。

图3：原点对旋转的影响

最后，小伙伴参考图4运动效果，实际操作一下如何实现这个翻牌效果。注意牌的正面和背面的颜色是不一样的，而且在翻牌的过程中，颜色是没有过渡变化的。小编也会在今后的文稿中详细讲解这个翻牌动效的制作。

图4：翻牌动效

二、倾斜

“倾斜”也是Hype 4中对象三种变形样式的一种，它实现的是对象在时间轴上沿着X轴或Y轴进行斜切的效果。

调整倾斜参数。

在默认情况下，倾斜设置中的X值和Y值均为0，X和Y滑竿上的滑块居中。向左或者向右移动滑竿上的滑块，可以在画布上看到对象的斜切效果。另外，还可以在滑竿旁边的空格中填写斜切的角度，实现对象的斜切。

图5：调整倾斜参数

原点对倾斜的影响。

默认情况下，对象是以中心点为基准点进行斜切的，参考图5的效果。如果把原点调整到左上角（X偏移量0，Y偏移量0），对象的斜切效果就会完全不同，请参考图6的效果。

图6：原点对倾斜的影响

三、小结

小编使用了两个章节详细讲述了对象在时间线上三种变形效果，这三种变形效果在设计的基础，小伙伴会在今后的设计中大量使用。

下一章节将会深入讲解Web网页设计中另一非常重要的概念——弹性布局。