发布时间:2020-11-24 14: 12: 04
在上一章,讲述了Hype 4交互动效制作软件中的“伸缩”缩放行为选项中图钉与单个对象弹性的关系及其缩放的效果。本章节继续探讨Hype 4 HTML创作工具中的“缩小以适合”缩放行为选项中,图钉与单个对象的关系及缩放效果。
“缩小以适合”与“放大以填充”于对象来说都是限制了宽高比的,无论是改变宽度还是高度或者两者都改变,对象均保持原来的宽高比。
为了利于分析,本章节的案例继续沿用讲述“伸缩”案例的案例模型:场景选择100%缩放,宽为600px,高为400px。对象宽为300px,高为200px,对象左边距为0,上边距为0。在浏览器中,模拟设备窗口的宽为600px,高为400px,与场景原型的宽度和高度相等。
此外,在操作中,场景分别采用“伸缩”和“缩小以适合”两种缩放行为。
“缩小以适合”是指在设计原型中,以具有弹性的对象的宽度与场景的宽度比为标准,当对象与显示屏幕或者浏览器的宽度的比值等于或者大于原型中对象与场景的宽度比,此时的对象宽高值最大。屏幕宽度缩小时,对象限制宽高等比例缩小。
对象固定4条边,并且同时选择水平和垂直的弹性方向。向左移动模拟设备窗口的右边框,使场景宽度变小。对象跟随场景的缩小等比例地缩小,不但始终保持其位置不变,而且宽度和高度均为场景宽度和高度的一半。
一般情况下,当场景应用在宽度比其小的设备上时,对象的弹性选择“缩小以适合”,使对象的布局在小屏幕上显示更加合理。
当场景采用“伸缩”而对象使用“缩小以适合”时,只有固定对象的左边和上边并且场景缩小时,对象才与场景保持相对位置不变并且等比例缩小,但场景会畸变。
当场景和对象都采用“缩小以适合”,场景会限制宽高缩小,对象不但保持了相对位置不变而且还跟随场景等比例缩小。
下一章节,继续探讨“展开以填充”选项对对象产生的缩放效果。
作者:东佛
展开阅读全文
︾
读者也喜欢这些内容:
Hype 4时间线操作(十) 暂停和继续时间线
在Hype 4交互动效制作软件中,可以通过设置“开始时间线”关键帧操作启动时间线,同样也可以设置“暂停时间线”和“继续时间线”关键帧暂停及继续当前时间线。表现出来的就是对象的运动在启动后,暂停下来,等待一段时间后继续运行,直至终点。...
阅读全文 >
Hype 4时间线操作(六)前往URL
URL是Uniform Resource Locator的缩写,称之为统一资源定位符,就是网页地址的意思。每一个网页都有只属于自己的URL地址,在浏览器中输入URL地址,就可以打开其指向的网页。...
阅读全文 >
Hype 4时间线操作 — 设置触发关键帧
一般情况下,设计的动画会有多个场景,而每个场景也会有多个对象和时间线。但动画的启动只能在一个场景的主时间线上进行,其他的场景、对象和时间线需要在主时间线上的某个时间点触发才能启动。...
阅读全文 >
如何在H5制作软件Hype中实现响应式布局
在上一个章节已经完成了将一个场景设置4个布局,下面将通过模拟购物网页中的产品陈列,来讲述如何在不同的布局中进行排版和实现响应式布局。...
阅读全文 >