基础教程：Hype 4元素面板 — 阴影与倒影

在上一章节中，详细讲解了Hype 4交互动效制作软件元素面板中控制对象可见性的两种方法——不透明度和隐藏，以及它们在动效制作中的作用。

本章节继续探讨Hype 4元素面板中体现对象立体感的属性——阴影以及倒影。

一、对象的阴影设置

在Hype 4中，对象的阴影包括三种类型——投影、框和内嵌，主要是以阴影在对象中所处位置进行分类的。

除了类型外，设置阴影有三个参数：偏移量、颜色和模糊度。在田字格移动圆形块或者在X、Y填写数值可以设定阴影的偏移量；颜色选择框可以选择阴影的颜色，设置阴影颜色的时候，最好设置颜色不透明度，使模糊效果更好；在模糊度选择框可以设置阴影的模糊程度。

图1：阴影设置界面

1、投影

投影就是模拟阳光（灯光）照射到物体上，在墙壁或者地上形成的阴影。在同等像素的模糊度，阴影的模糊程度比较大。

图2：对象的投影效果

2、框

所谓“框”就是使用阴影作为对象的边框，替代设置对象的边框宽度添加的边框，这种方法的使用在当前流行的Web页面设计相当普遍。使用“框”阴影可以使对象的边相对柔和，视觉上比较舒服，而且有立体感。同等像素的模糊度，阴影的模糊程度比投影要轻。

图3：对象的框效果

3、内嵌

内嵌就是阴影作用在对象边框内，使矩形对象看上去有种凹陷下去的效果，也可以在圆形上使用内嵌模拟球形的效果。

图4：对象的内嵌效果

二、使用阴影的动效小案例

1、点击按钮动效

就是鼠标移入到按钮上，按钮会略微向上移动，点击按钮，按钮向下移动，整个点击效果就像按钮被按下去一样。

图5：点击按钮动效

2、鼠标移入图像的动效

这个在很多图库网站上都有的效果，就是移动到图像上，图像向上移动，在图像下边显示阴影，就像图像单独被提起来一样。

图6：图像提起来效果

3、使用内嵌模拟渐变

Hype 4 H5创作工具的渐变只有两种颜色的渐变，无法给中间增加一个过渡颜色，可以通过内嵌阴影的方式模拟三种颜色的渐变。

图7：使用内嵌模拟三种颜色的渐变

三、对象的倒影设置

Hype 4中的倒影设置非常简单，在倒影设置界面中，只有2个参数——深度和偏移。

深度代表着显示的倒影相对于对象整体的程度，0代表没有倒影，100%代表倒影完全显示对象。

偏移代表倒影偏移对象的垂直距离，0表示倒影紧贴着对象的底边，最大值为40px，表示倒影的上边与对象下边的距离为40px。

图8：对象的倒影

四、小结

阴影在现代的Web页面设置中经常使用，主要在对象位置发生变化时，通过阴影体现的动态效果，它的使用并不复杂，但效果却非常好。