前端开发神器Hype3初体验-可视化、响应式、动效

之所以接触到这个开发工具，还是因为项目需要，我本来是做Android开发的，后来因为公司前端开发人员不够，然后开始做手机端网页开发，接触了Vue，后来前端开发离职，我只好又接手Web开发，本身对CSS也不是很熟悉，每次都是一边百度CSS教程，一边开发，后来经过UI设计大佬介绍Hype3，开发了产品官网，这个页面就是用Hype3开发，当然目前还没有适配移动端，用这个IDE适配移动端很方便，下面我会说到，之前其实已经适配过，不过由于官网样式老板不满意，所以UI设计重新设计了页面，移动端设计还没出来，所以暂时没有适配，闲话说了一堆，下面开始介绍我用Hype3开发官网的一些心得。 PS：目前Hype3好像只有Mac版本，Windows的同学可能要等一等了，或者可以安装Mac虚拟机

Hype3社区

Hype3目前国内教程资源似乎不是很多，Hype3中国社区感觉也不是很活跃，Hype3官网倒是挺活跃，论坛里也可以和其他人交流，不过没有中文，对于英语不好的人(比如我)，可以用Goole翻译一下页面勉强可以看懂！其他交流社区暂时没有发现！

适用场景

经过我的初步使用，目前感觉这款IDE适合设计人员做产品原型，因为它里面内置有动画时间轴，可以很方面的做出丰富的动画效果，不过由于本人能力有限，对动画时间轴运用还不熟练，还做不出很多效果，不过对于设计人员应该很容易上手；此外也适合前端开发，不过在我用它开发来看，觉得不太适合业务复杂的场景，适合一些产品官网，产品宣传，静态网页等这类页面，当然不是说不可以进行业务页面的开发，因为它可以引用外部脚本，还可以内嵌HTML，也就是说可以导入Vue，jQuery，Element-UI等我们常用的一些框架，两者互相配合，不过稍微有一些麻烦，下面会详细介绍。

Hype3介绍

1.界面

这个就是Hype3的开发界面了，从左到右分别是：

1. 场景

一个场景就相当于Web中的一个页面，我们可以设置多个场景，互相之间可以转跳。

2. 布局

每个场景下都可以有多个布局，多个布局分别对应不同的断点宽度，可以用来适配各种尺寸的终端设备。

3. 布局视图

页面的所有元素都会在这里显示，可以通过拖拽调整元素位置、大小等等， 布局视图下面就是动画时间线，可以在上面选中元素，然后开启时间线，拖拽时间线设置动画时长，然后再改变元素的位置和大小，就自动生成了动画，是不是很easy。

4. 检查器

我们对场景和组件元素的样式调整都是通过这些检查器，比如精确设置元素的位置和大小，设置文本的字体大小和颜色，设置元素的点击事件，鼠标悬浮事件，设置元素的类名称和ID等等。

5. 资源

这个就是放资源文件的，图片、音视频、函数、字体、还有我们引用的第三方脚本等，需要注意的是这里面都是引用磁盘上的资源路径，不会把资源拷贝到项目中，所以你在引用路径那里修改了资源，这里就会同步更新，最后发布成HTML的时候才会打包到项目中。

6. 工具栏

上面的 工具 栏中可以插入我们需要的元素，也可以把几个元素成组，有点类似Adobe XD，成组之后，组内的元素位置就是相对于这个组来说了；还可以把元素或者组转换成符号，符号的含义其实就是可以把一个组件复用，转换成符号后复制成多个，只要调整一个符号的样式，复制的所有符号都会跟着改变，还有持久符号的概念，这个就是可以跨场景复用，比如把一个按钮转换成持久符合，那么不管你切换几个场景，这个符合就一直存在你所设置的那个位置上；此外还可以通过"前方"和"后方"按钮调整元素的层级，也就是z-index。

详细介绍

先说响应式布局，也就是移动端适配，在Hype3里叫响应式布局，通过设置断点宽度，加载不同的布局。

添加完响应式布局后，右侧就多了一个布局，在新的布局里我们可以开发适合这种布局的页面。

响应式布局基本就这些了，是不是很简单，两个布局资源共用，但是布局里面的组件ID不能重复。

检查器

这个是我们经常会用到的，90%的操作都是在这里完成：

1. 文稿

可以看到，在这里可以设置网页的标题，也可以编辑HTML头部，在头部里可以添加我们引用的js和css文件，支持本地和网络，我这里就引用了Vue等框架，这个下面详细介绍怎么使用；还可以显示各种浏览器的兼容性警告，这个在你对元素进行样式调整的时候如果不兼容你设置的这些浏览器版本，都会有详细提示。

2. 场景

这里可以设置页面的大小，设置断点宽度，增加响应式布局，管理动画时间线，添加页面事件监听，比如页面加载，卸载等

3. 度量

这里就是设置元素的位置、宽高、缩放、旋转等，可以与动画配合使用，最上面的内容概览其实就是对属性overflow的设置，需要注意的就是可调布局这个选项，这个是设置元素在页面宽高发生变化时的位置如何变化，如上图设置就是不管宽度怎么改变，元素始终水平居中，同理你也可以设置其他变化，当你鼠标悬浮在预览上面时，它会动态变化告诉你元素位置会如何改变。

它还可以设置元素缩放行为，只要选中里面的水平或者垂直箭头，这样当宽高发生变化，元素就会随着宽高变化动态填充，也就是改变宽高，这部分有点难以理解，需要自己动手试一下才能真的理解。

4. 元素

这里就是设置元素的一些属性，如果当前选中的是视频，还可以在这里添加视频源格式

5. 排印

这里就是设置字体大小，字体种类，文字对齐方式等

6. 操作

这里可以添加一些常用事件监听，不过经过我测试，发现"进入视区时"这个事件貌似不太靠谱，就是虽然你把页面底部的一个元素设置了这个事件，但是在页面加载的时候，没有滑到这个元素的位置的时候也会触发"进入视区时"这个事件；还有一个就是"鼠标移出时"这个事件，它只会在当前页面触发，也就是说当你触发了一个元素的"鼠标移至时"事件，如果此时你切换窗口，然后把鼠标移走，这个时候是不会触发"鼠标移至时"这个事件的，所以大家需要慎用，一般用这两个事件就是切换元素样式，可以通过 div:hover 来控制，怎么引用css样式下面会介绍。

7. 物理量

这个我没怎么用过，所以了解的不多，应该就是赋予元素物理属性，对于做一些动效应该很有用，详细的可以去官网文档了解一下。

8. 身份

这里就是可以设置元素的ID和类名称，设置过之后，我们就可以通过引用外部自己写的css文件来控制元素样式了，不过需要注意的是由于Hype3在把元素生成HTML时就会附上一些属性，比如颜色，宽高等，这个时候我们在css里如果写相同的属性是覆盖不了的，因为Hype3生成的都是行内样式，而我们写的是外部样式，优先级没有行内样式高，所以需要加上 !important ，这样就可以覆盖了。

.channel-btn .hover-bg{
    top: 38px !important;
    opacity: 0 !important;
    transition:all 0.6s !important;
}
复制代码

建议自己的写的外部css样式都加上 !important ，防止出现未知Bug。

检查器的介绍就到这里了，更多用法大家可以自行摸索。

接下来说一下引用外部脚本和内嵌HTML

这方面对于之前有web开发经验的来说很实用，因为有些功能我们可能还是熟悉用代码的方式完成，这时候"HTML小组件"可以大显身手了。

HTML小组件最终生成的代码其实就是iframe

我们可以用其他编辑器编写iframe的代码，然后拷贝到Hype3里面，这样就可以使用一些第三方提供的功能了，比如Element-UI 的carousel走马灯效果。 同理，我们也可以自己写一些js文件和css文件，然后添加到Hype3里面，Hype会自动在头部HTML给我们引用，这个在介绍文稿的编辑头部HTML已经提到过了，细心的同学应该已经发现了。 Hype3最终生成的HTML项目，这些自定义的js和css文件和HTML小组件生成的iframe都在同一个目录下，它们之间也可以互相调用，所以可扩展性还是很高的。

动画时间线

看完这个GIF图，是不是觉得和AE很像，就像上图中的动画其实就是新建一个时间线，先选中一个元素，然后点一下时间线旁边的红色按钮开始录制动画，拖动时间线控制动画时长，然后这个时候你就可以随意移动你选中的元素，改变大小，旋转360度等等一些操作，最后动画就生成了，点一下播放按钮，你刚才对元素所做的操作都会播放出来，然后可以在任意的时间点添加一个操作：

当动画播放到这个时间点的时候就会执行你设置的操作

可以设置很多动画属性，动画功能还是很强大的，不过需要自己摸索一下，如果熟悉AE的同学应该很容易上手吧，因为我对动画了解的还不多，所以先介绍到这里。 上面的动画时间线也可以通过脚本动态控制开始的时机:

此外在脚本里还可以获取和设置文稿、场景、布局的一些属性，比如可以在这里通过元素ID获取元素对象。

hypeDocument.getElementById(id) 搜索通过身份检查器“唯一的元素 ID”所输入的指定 ID 的当前文稿，并返回 DOM HTML 元素。这与典型的“document.getElementById”类似，但是应使用 API 版本，因为 Tumult Hype 遇到冲突时可能重新分配 ID。