
发布时间:2020/11/11 19:27:21
在上一章节面板组介绍中,小伙伴已经了解到在Hype 4交互动效制作软件中,度量面板主要是调节对象的大小、中心点位置以及三种对象变形等,本章节将详细介绍这些属性参数的调整以及调整后的效果。
对象的放置属性包括了两个参数:位置和大小。
对象原点的默认位置是对象的中心点,在转换原点参数中,X偏移量为50%,Y偏移量为50%。所谓的偏移量是指:对象的原点与参考点(对象的左上角)的距离和对象的宽或高的比。
X偏移量 = (原点X轴的值 – 左上角X轴的值)/ 对象宽的值 * 100%
Y偏移量 = (原点Y轴的值 – 左上角Y轴的值)/ 对象高的值 * 100%
图3:对象原点位置
小伙伴除了记住当X偏移量=50%,Y偏移量=50%时,原点为对象中心点外,还需记住:
当X偏移量=0,Y偏移量=0时,原点为对象左上角;
当X偏移量=100%,Y偏移量=0时,原点为对象右上角;
当X偏移量=100%,Y偏移量=100%时,原点为对象右下角;
当X偏移量=0,Y偏移量=100%时,原点为对象左下角;
对象原点的位置与对象在画布中的位置无关,与下面将要讲述的三种变形样式——缩放、旋转和倾斜有关。
“缩放”是Hype 4中对象三种变形样式的一种,它实现的是对象在时间线上放大或者缩小的效果。
在Hype 4中,改变对象的大小可以在“放置”设置中调整对象的宽度和高度的值。但是,在动效设计中,不会去改变对象的宽高值来对对象进行放大或者缩小。原因是在动效过程中,不停地改变对象的宽高值会不断刷新屏幕,影响动效效果。
因此在Hype 4动效设计中,使用“缩放”设置调整对象在动效中的大小变化。
在默认情况下,对象的原点就是对象的中心点,对象的缩放是以原点为中心进行收缩或放大,如图5的效果;如果把对象的原点移到左上角,对象的缩放就以左上角为中心点向左向上收缩或者向右向下放大,如图6效果。
本章节详细讲述了Hype 4 HTML5创作工具中,在度量面板中的三个设置——放置、转换原点和缩放。放置决定了对象的真实大小以及在画布中的位置;转换原点是改变了对象变形时的基准参考点,它与对象的位置无关;缩放是使对象在时间线上实现放大或缩小的效果。
在下一章节,将继续讲述对象的另外两种变形样式——旋转和倾斜。
作者:东佛
读者也喜欢这些内容:
实例演示Hype主时间线与新建时间线的关系
时间线是Hype进行动画制作的主要功能区,通过在时间线上添加关键帧、操作等,可制作各种类型的动画效果。...
阅读全文 >
Hype 4时间线操作(十) 暂停和继续时间线
在Hype 4交互动效制作软件中,可以通过设置“开始时间线”关键帧操作启动时间线,同样也可以设置“暂停时间线”和“继续时间线”关键帧暂停及继续当前时间线。表现出来的就是对象的运动在启动后,暂停下来,等待一段时间后继续运行,直至终点。...
阅读全文 >
应用Hype制作英文字母卡片学习小动画
对于很多小朋友来说,英文的学习会显得枯燥而乏味。但如果是借助一些视觉性的工具,比如学习英文字母用的卡片动画,可提高学习的趣味性,让小朋友更容易接受。...
阅读全文 >
Hype 4一条时间线的轮播图(一) 原理分析及设置显示窗口
在多条时间线上实现的轮播图由于使用了多条时间线,如果通过鼠标事件操作轮播图暂停、图片跳转会变得非常麻烦。实际上,轮播图的运行更普遍的是在一条时间线上,这也是使用JavaScript语言编写轮播图函数或者原型的方法。...
阅读全文 >