Hype

Hype中文官网 > 常见问题 > 关于Hype软件内置JS函数方法的使用

关于Hype软件内置JS函数方法的使用

发布时间:2020/09/16

Hype是一款用于Mac系统的HTML5制作软件,它能够帮助用户通过不需要编写代码的方式,也能实现创建一个精美网页的需求,能够实现用户的大部分需求,但是对于一些特定的场景,仍然需要通过编写JavaScript函数来实现。

Hype软件提供了许多内置的JavaScript函数,下面小编将通过Hype 4版本,为大家介绍有关的内置函数使用方法。

一、添加JavaScript函数

那么如何在Hype中添加JavaScript函数呢?点击右上角的“资源”按钮,打开Hype资源库,然后点击下方的加号,选择“添加JavaScript函数”,如下图1。

添加一个JavaScript函数
图1:添加一个JavaScript函数

通过上述操作,Hype就会默认新建一个名称为“untitledFunction”的JavaScript空函数,具体如下图2,在大括号中可以编写自己的函数逻辑。

默认JavaScript函数展示
图2:默认JavaScript函数展示

Hype内部为大家提供了许多的内置方法,经常使用到的是“文稿”、“场景”和“时间线”方法函数,如下图3。

内置方法展示
图3:内置方法展示

二、内置JavaScript方法使用

那么如何使用这些Hype内置的JavaScript方法呢?下面就以下图4的内置方法为例。下图4的“getElementProperty”方法,作用在于获取元素对象的属性,如元素的宽度、高度、位置、旋转角度、透明度。

一般来说,每个内置方法都会有0到N个参数,如“getElementProperty”函数就有2个参数,分别是element和propertyName,第一个参数表示需要获取哪个元素对象,第二个参数表示获取元素对象的哪个属性。

getElementProperty方法
图4:getElementProperty方法

为了方便演示,首先在Hype元素按钮中,选择创建一个矩形元素,然后在Hype“身份检查器”中,设置唯一的元素ID为“juxing”,作为矩形的标识ID,这里建议这个ID填写英文而不是中文,防止编写函数方法时输入中文乱码。

填写矩形唯一元素ID
图5:填写矩形唯一元素ID

然后回到JavaScript函数界面,开始使用Hype内置的getElementProperty方法,这里小编已经写好了一个简单的演示函数,如下图6。

演示函数展示
图6:演示函数展示

该函数的第一行使用了Hype内置的“getElementById”方法,用于获取唯一的元素ID为“juxing”的元素,也就是说,通过JavaScript函数的第一行,我们已经获取到了上述创建的矩形元素。

第二行使用“getElementProperty”方法,然后方法的第一个参数使用第一行得到的矩形元素,第二个参数填写“width”,表示获取的属性为宽度,综上,第二行的作用在于获取矩形元素的宽度。

第三行非常简单,表示将矩形元素的宽度进行弹框展示。

完成函数编写以后,给矩形在“操作检查器”中,添加一个“鼠标点按时”的操作,操作选择“运行JavaScript”,函数选择上述新建的函数,如下图7。

设置鼠标点按时运行JavaScript
图7:设置鼠标点按时运行JavaScript

最后,点击Hype界面上方的“预览”按钮,在浏览器中对网页效果进行预览,预览结果如下,当点击矩形时,弹出一个弹框,写着298,表示矩形的宽度为298px。

预览结果
图8:预览结果

那么究竟是不是呢?选中矩形元素,点开“度量检查器”,可以发现矩形的宽度的确是“298px”,如下图9红框。

矩形元素宽度
图9:矩形元素宽度

好了,这就是关于Hype内置JavaScript函数方法的简单使用教程了,除此以外,还有更多有用Hype教程发布在中文网站上,欢迎大家前往关注学习哦。

作者署名:包纸

标签:JavaScript函数

读者也访问过这里:
Hype中文版
创建漂亮的HTML5网页内容
立即购买
QQ 群
官方交流群:1046763737 立即加群
400-8765-888 kefu@makeding.com
热门文章
Hype制作矢量形状动态变形的动画效果
相信大家都看过一些网页动画,就是从一个矢量图形慢慢变成另外一个矢量图形。其实这个效果利用Hype可以非常简单地实现,下面小编就利用Hype 4版本,教大家如何快速简单地实现这一功能。
2020-06-09
H5制作软件Hype导出功能详解
Hype是一款Mac端网页制作工具,它可以通过时间线录制功能制作各种各样的网页炫酷动画效果,同时也支持使用物理引擎制作动画。当然,它的强大不仅仅体现于动画制作方面,它的导出功能同样也是功能齐全,下面小编就通过使用Hype 4版本,为大家详细介绍下这款H5制作软件的导出功能。
2020-06-05
Hype中触发事件的使用
一个优秀的网页绝不仅仅是一个静态的页面,在网页当中,还应该存在着一些点击或者触摸等主动触发事件,当用户点击页面上某处的时候,页面会相应的发生一些动态变化,这就是网页的触发事件。Hype作为一款专业的Mac端网页制作软件,同样支持触发事件功能。
2020-06-08
UI动效设计工具Hype的响应式布局及设置
响应式布局可以使用户的网页在各种尺寸的屏幕上都能够较好地兼容,不会因为屏幕尺寸大小变化导致网页拉伸变形。Hype就支持这种响应式布局,它允许设计者为单个场景创建多个布局,当用户在浏览器中显示页面时,Hype将根据设备的当前宽度动态加载合适的布局。
2020-05-21
使用Hype进行动画制作的入门介绍
在一个网页中,如果多了一些动态元素的呈现,会使页面看起来更显得高大上一些。而Hype使用功能强大的动画系统,利用时间线录制功能,使制作者制作动画变得轻而易举。
2020-05-21
实战:使用Hype绘制动态旅行路线(一)
小编今天给大家介绍一款HTML5动画制作软件——Hype 4。Hype 4是一款不需要使用Flash就可以进行HTML5动画制作的软件,让完全不了解代码的大家也能够轻松使用并制作自己的动画。
2020-05-22