前端开发神器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。

一些问题和想法

1. 咱们前面提到的"鼠标移出时"事件触发问题，这个是挺大的一个问题了，基本致使这个事件有点鸡肋，由于只要一切换窗口，就不会触发，这个时候你的UI样式可能还停留在"鼠标移至时"这个事件触发所显示的那样。

2. 内置的资源编辑器很差用，写js、css没有任何提示，只能在其余编辑器里完成后复制过来，很繁琐。

3. 不适合深度开发

4. 我的以为能够增长一个相似组件库的功能，能够由开发者本身开发一些组件提交上去，其余人能够下载下来添加到Hype中使用，就是好比把轮播图功能封装一下，而后咱们用的时候只须要在插入的时候选择这个组件，而后就可使用了，虽然目前能够Hype3内置的动画来实现，可是对于不太熟悉动画制做的来讲仍是有点困难，也能够经过HTML小组件实现，可是略微繁琐一些，若是能有这个功能，相信这款IDE会更强大。

结语

因为本人也是初次使用，可能有些地方讲的不是很明白，有些地方了解的也不够透彻，但愿你们见谅，欢迎你们讨论和指正，一块儿进步！

参考：www.jianshu.com/p/5cf5708ab…

喜欢的麻烦动动小手点个赞来支持我，有不对的地方欢迎你们指正，有什么问题也能够在下方留言，我看到后会第一时间回复！谢谢您来看这篇文章！但愿能够帮到您！🌹🌹🌹