发布时间:2020-11-12 10: 08: 36
在上一章节“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轴亦是如此设置。
方法二:在填写角度数值的旁边有一个圆圈包着一个黑点的图案,鼠标按着黑点不放,顺时针移动黑点,可以看到角度数值在增大,画布上的对象在顺时针旋转;如果逆时针移动黑点,角度数值在减少(变为负值),画布上的对象在逆时针旋转。
以绕着Z轴旋转为例,默认情况下,对象是绕着中心点旋转的,参考图1或图2效果。如果把原点改为左上角(X偏移量0,Y偏移量0),那么对象是绕着左上角进行旋转,参考图3效果。
最后,小伙伴参考图4运动效果,实际操作一下如何实现这个翻牌效果。注意牌的正面和背面的颜色是不一样的,而且在翻牌的过程中,颜色是没有过渡变化的。小编也会在今后的文稿中详细讲解这个翻牌动效的制作。
“倾斜”也是Hype 4中对象三种变形样式的一种,它实现的是对象在时间轴上沿着X轴或Y轴进行斜切的效果。
在默认情况下,倾斜设置中的X值和Y值均为0,X和Y滑竿上的滑块居中。向左或者向右移动滑竿上的滑块,可以在画布上看到对象的斜切效果。另外,还可以在滑竿旁边的空格中填写斜切的角度,实现对象的斜切。
默认情况下,对象是以中心点为基准点进行斜切的,参考图5的效果。如果把原点调整到左上角(X偏移量0,Y偏移量0),对象的斜切效果就会完全不同,请参考图6的效果。
小编使用了两个章节详细讲述了对象在时间线上三种变形效果,这三种变形效果在设计的基础,小伙伴会在今后的设计中大量使用。
下一章节将会深入讲解Web网页设计中另一非常重要的概念——弹性布局。
作者:东佛
展开阅读全文
︾
读者也喜欢这些内容:
利用Hype制作鼠标移至切换图片的效果(场景设置)
在一些图库网站里,我们经常会使用到滑动切换图片的功能。该功能可帮助我们快速地浏览图库中的图片,避免进行繁琐的打开、关闭图片的操作。...
阅读全文 >
如何在Hype制作3秒后出现下一步的页面(动画制作)
在《如何在Hype制作3秒后出现下一步的页面(场景设置)》一文中,我们已经详细讲解了倒计时按钮的制作以及下一步触发动作的设置。...
阅读全文 >
Hype 4多条时间线的轮播图(二) 设置第1张图片
在上一章节中,已经做好了轮播图设置的前期工作,把所有图片放在一个符号里,并且把002至004三张图片移到到符号外。接下来选择符号,在“度量”面板中,“内容概览”选项中选择“隐藏”,把符号外的图片隐藏起来,从而使图片的轮播只出现在显示窗口里。...
阅读全文 >
Hype 4一条时间线的轮播图(一) 原理分析及设置显示窗口
在多条时间线上实现的轮播图由于使用了多条时间线,如果通过鼠标事件操作轮播图暂停、图片跳转会变得非常麻烦。实际上,轮播图的运行更普遍的是在一条时间线上,这也是使用JavaScript语言编写轮播图函数或者原型的方法。...
阅读全文 >