发布时间:2020/11/24 14:12:54
在上一章,讲述了在Hype 4交互动效制作软件中图钉与单个对象水平弹性和垂直弹性的关系,知道对象固定一边和固定相对两边,对象缩放的不同效果。本章节继续探讨Hype 4 HTML5创作工具中图钉与同时具有水平和垂直弹性的对象的关系,并且选择不同的缩放行为,对象的弹性效果的差异。
由于对象同时具有水平和垂直弹性,会打开“缩放行为”选项,因此本章节及后面的章节会依照不同的缩放行为讲述图钉与对象弹性的关系。
在本章节及后面的关于弹性布局“缩放行为”的章节中,所有例子都会基于如下模型:场景宽高100%缩放,红色边框范围为场景范围,随场景大小变化而变化。测试对象是背景为绿色的矩形元素,宽度为300px,高度为200px,上边距为0,左边距为0。对象同时具有水平和垂直弹性。
此外,场景布局的变化是因屏幕宽度的变化引起的,在这些案例中,场景或者屏幕窗口的高度保持不变,屏幕窗口宽度基于变大或者变小两种情况进行分析。
缩放行为的默认选项是“伸缩”,该行为意味着对象的缩放是任意的,没有宽度和高度的比例限制。
最后,在案例模型中,红色边框包围着场景,并且随着场景大小的变化而变化。其原理就是设置对象的宽度和高度等于场景的宽度和高度,四条边与场景画布的边距为0,且4条边被固定(图钉全选上),对象具有水平和垂直两个方向的弹性,这样就可以获得案例的效果。想要尝试的小伙伴们可以点击Hype下载。
“伸缩”缩放选项是于对象自身而言,它的缩放没有宽高比限制。即使这样,如果没有特殊要求,不要选择固定对象的右边和下边,避免对象在缩放的时候出现偏差。
下一章节,继续讲述“缩小以适合”缩放选项中,图钉与对象弹性的关系及效果。
作者:东佛
读者也喜欢这些内容:
利用Hype制作鼠标移至切换图片的效果(场景设置)
在一些图库网站里,我们经常会使用到滑动切换图片的功能。该功能可帮助我们快速地浏览图库中的图片,避免进行繁琐的打开、关闭图片的操作。...
阅读全文 >
实例演示如何利用Hype运动曲线调整动画运动路径
Hype运动路径是两个或多个点之间的曲线动画,可通过运动曲线调整。比如,图1所示的粉色圆形就是按照特定运动路径移动的。...
阅读全文 >
绝对干货!H5动画软件制作大揭秘!
最近收到了公司的一个业务新需求:做一个H5网页动画,提升客户的产品使用体验。这是我们小组第一次制作H5动画,没有经验,像无头苍蝇,反复碰壁,最终团队内部终于敲定了一款软件,进行设计制作。...
阅读全文 >
Hype 4时间线操作(九)自定义时间线循环往复运动
本章节是上一章节“开始时间线”的延续篇,由于在主时间线上设置触发关键实现自定义时间线的循环往复运动相对比较复杂,涉及到的分析比较多,知识点非常重要,因此单独用一章节来讲述自定义时间线的循环往复运动。...
阅读全文 >