Hype

Hype中文官网 > 新手入门 > 基础教程:Hype 4文稿面板之高级选项

基础教程:Hype 4文稿面板之高级选项

发布时间:2021/03/04

在前面的数个章节,详细讲述了HTML、CSS语言以及Hype 4交互动效制作软件的内部运作原理,相信小伙伴对Hype 4 HTML创作工具已经有了一个较深的理解。

现在再回头去看文稿面板中的选项,也应该大概明白这些选项的作用。本章节继续讲述面板中的高级选项。

一、高级选项

高级选项包括了四个选项:阻止外部样式、使用WebKit图形加速、置于CSS处在左边/顶部的状态以及使用低延时Web Audio API。

高级选项界面
图1:高级选项界面

1、阻止外部样式

由于内联样式和外链样式本质是一样的,为了方便,下面的三个案例都采用了内联样式进行测试。

案例模型:场景中一个矩形元素,矩形内有文字“阻止外部样式”,文字使用HTML中的a元素包住,点击文字,浏览器页面会跳转到百度首页。

测试的内容有三项:

1)阻止外部样式正常效果;

2)对文字颜色的影响;

3)对矩形元素边框的影响。

案例模型
图2:案例模型

如果勾选了“阻止外部样式”,就意味着Hype文档不会受到内联样式和外链样式的影响。这通常是针对元素名和类名的样式而言

图3:阻止外部样式的效果

如果是id名样式,不管是否勾选“阻止外部样式”,在浏览器中,对象都会显示id名的样式。小伙伴要注意:Hype软件中,id名的样式对场景中的对象是不起作用的,这估计是Hype的一个Bug。一切以浏览器的显示为准。

对id名样式的影响
图4:对id名样式的影响

如果样式添加了!important最高优先等级,同样不管是否勾选“阻止外部样式”,对象都会显示!important的样式。

2、使用WebKit图形加速

对!important样式的影响
图5:对!important样式的影响

如果勾选了“使用WebKit图形加速”功能,在基于 WebKit 的浏览器(包括 Safari、移动 Safari 和 Chrome)中,将使用系统的 GPU提升显示性能及增强动画效果。如果动画在浏览器渲染有问题,则需要取消勾选此选项功能。

3、置于CSS处在左边/顶部的状态

“置于CSS处在左边/顶部的状态”这个选项在英文版是“position with CSS left/top”,意思是:使用CSS的左/上角定位。在CSS的定位系统中,浏览器窗口左上角或者对象的左上角是定位的基准点。确定对象的位置是左边距离和上边距离。

如果不选择此选项,有可能在在对象在位移动画中的产生不可控的影响。特别是在使用JavaScript或jQuery操作对象位置,必须选择此选项。

图6案例中,如果不选择“置于CSS处在左边/顶部的状态”选项,在Safari浏览器中,场景2的侧边栏的不能上下滚动。当选择了该选项,场景2的侧边栏的不能上下滚动的问题解决了。

选项对对象位置的影响
图6:选项对对象位置的影响

4、使用低延时Web Audio API

什么是“Web Audio API”?Web Audio API是JavaScript中主要用于在网页应用中处理音频请求的一个高级应用接口,这个API目的是让最新技术与传统的游戏音频引擎的综合处理相兼容,尽力提供一些桌面音频处理程序的要求。

简而言之,就是为音频的载入、声音混合、音量调整、设置效果以及播放提供了一个控制接口。所谓低延时就是控制响应的时间非常短,能够高质量还原音质。毫无疑问这个选项是需要勾选的。

二、小结

小编花了数章节的篇幅讲解HTML、CSS和Hype的内部原理,其实就是让小伙伴理解“阻止外部样式”,想要长久使用这款软件的小伙伴们可以正确获取Hype激活码。“阻止外部样式”其实也算是Hype设定的一个优先等级,用来控制外部样式对对象的作用。

作者:东佛

标签:阻止外部样式使用WebKit图形加速

读者也访问过这里:
Hype中文版
创建漂亮的HTML5网页内容
立即购买
QQ 群
官方交流群:1046763737 立即加群
kefu@makeding.com
热门文章
基础教程:Hype 4软件界面介绍
Hype是一款基于MacOS系统的交互动效制作软件,延续了苹果软件的简洁风格,与Keynote软件的界面基本一致。
2020-07-23
H5制作软件Hype导出功能详解
Hype是一款Mac端网页制作工具,它可以通过时间线录制功能制作各种各样的网页炫酷动画效果,同时也支持使用物理引擎制作动画。当然,它的强大不仅仅体现于动画制作方面,它的导出功能同样也是功能齐全,下面小编就通过使用Hype 4版本,为大家详细介绍下这款H5制作软件的导出功能。
2020-06-05
基础教程:Hype 4工作流程(一)
本章节通过一个简单的案例,完整讲述Hype 4的基础操作,让小伙伴了解怎么样使用Hype 4交互动效制作软件设计一个动效。
2020-11-09
Hype 如何进行安装与激活
本篇将为各位小伙伴们集中介绍一下H5制作软件Hype的安装与激活教程。
2020-12-24
Hype软件持久符号的应用
Hype是一款支持无代码创作炫酷网页的Mac端应用软件,它支持各种动画、元素。其中有一个强大的符号功能,该功能分为基本符号和持久符号两种,本文中,小编将使用Hype 4版本,为大家演示和讲解Hype中的持久符号。
2020-06-04
使用Hype进行动画制作的入门介绍
在一个网页中,如果多了一些动态元素的呈现,会使页面看起来更显得高大上一些。而Hype使用功能强大的动画系统,利用时间线录制功能,使制作者制作动画变得轻而易举。
2020-05-21