背景
之所以接觸到這個開發(fā)工具辽社，還是因為項目需要，我本來是做Android開發(fā)的翘鸭，后來因為公司前端開發(fā)人員不夠滴铅，然后開始做手機端網(wǎng)頁開發(fā)，接觸了Vue就乓，后來前端開發(fā)離職汉匙，我只好又接手Web開發(fā)，本身對CSS也不是很熟悉档址，每次都是一邊百度CSS教程盹兢，一邊開發(fā)邻梆，后來經(jīng)過UI設計大佬介紹Hype3守伸，開發(fā)了產(chǎn)品官網(wǎng)，這個頁面就是用Hype3開發(fā)浦妄，當然目前還沒有適配移動端尼摹，用這個IDE適配移動端很方便，下面我會說到剂娄，之前其實已經(jīng)適配過蠢涝，不過由于官網(wǎng)樣式老板不滿意，所以UI設計重新設計了頁面阅懦，移動端設計還沒出來和二，所以暫時沒有適配，閑話說了一堆耳胎，下面開始介紹我用Hype3開發(fā)官網(wǎng)的一些心得惯吕。
PS：目前Hype3好像只有Mac版本，Windows的同學可能要等一等了怕午，或者可以安裝Mac虛擬機
Hype3社區(qū)
Hype3目前國內教程資源似乎不是很多废登，Hype3中國社區(qū)感覺也不是很活躍，Hype3官網(wǎng)倒是挺活躍郁惜，論壇里也可以和其他人交流堡距，不過沒有中文，對于英語不好的人(比如我)兆蕉，可以用Goole翻譯一下頁面勉強可以看懂羽戒！其他交流社區(qū)暫時沒有發(fā)現(xiàn)！
適用場景
經(jīng)過我的初步使用虎韵，目前感覺這款IDE適合設計人員做產(chǎn)品原型半醉，因為它里面內置有動畫時間軸，可以很方面的做出豐富的動畫效果劝术，不過由于本人能力有限缩多，對動畫時間軸運用還不熟練呆奕，還做不出很多效果，不過對于設計人員應該很容易上手衬吆；此外也適合前端開發(fā)梁钾，不過在我用它開發(fā)來看，覺得不太適合業(yè)務復雜的場景逊抡，適合一些產(chǎn)品官網(wǎng)姆泻，產(chǎn)品宣傳，靜態(tài)網(wǎng)頁等這類頁面冒嫡，當然不是說不可以進行業(yè)務頁面的開發(fā)拇勃，因為它可以引用外部腳本，還可以內嵌HTML孝凌，也就是說可以導入Vue方咆，jQuery，Element-UI等我們常用的一些框架蟀架，兩者互相配合瓣赂，不過稍微有一些麻煩，下面會詳細介紹片拍。
Hype3介紹
1.界面
![]()
界面.png
這個就是Hype3的開發(fā)界面了煌集，從左到右分別是：
1. 場景
一個場景就相當于Web中的一個頁面，我們可以設置多個場景捌省，互相之間可以轉跳苫纤。
2. 布局
每個場景下都可以有多個布局，多個布局分別對應不同的斷點寬度纲缓，可以用來適配各種尺寸的終端設備卷拘。
3. 布局視圖
頁面的所有元素都會在這里顯示，可以通過拖拽調整元素位置色徘、大小等等恭金，
布局視圖下面就是動畫時間線，可以在上面選中元素褂策，然后開啟時間線横腿，拖拽時間線設置動畫時長，然后再改變元素的位置和大小斤寂，就自動生成了動畫耿焊，是不是很easy。
4. 檢查器
我們對場景和組件元素的樣式調整都是通過這些檢查器遍搞，比如精確設置元素的位置和大小罗侯，設置文本的字體大小和顏色，設置元素的點擊事件溪猿，鼠標懸浮事件钩杰，設置元素的類名稱和ID等等纫塌。
5. 資源
這個就是放資源文件的，圖片讲弄、音視頻措左、函數(shù)、字體避除、還有我們引用的第三方腳本等怎披，需要注意的是這里面都是引用磁盤上的資源路徑，不會把資源拷貝到項目中瓶摆，所以你在引用路徑那里修改了資源凉逛，這里就會同步更新，最后發(fā)布成HTML的時候才會打包到項目中群井。
6. 工具欄
上面的工具欄中可以插入我們需要的元素状飞，也可以把幾個元素成組，有點類似Adobe XD昔瞧，成組之后指蚁，組內的元素位置就是相對于這個組來說了菩佑；還可以把元素或者組轉換成符號稍坯，符號的含義其實就是可以把一個組件復用，轉換成符號后復制成多個搓劫，只要調整一個符號的樣式瞧哟，復制的所有符號都會跟著改變，還有持久符號的概念枪向，這個就是可以跨場景復用勤揩，比如把一個按鈕轉換成持久符合，那么不管你切換幾個場景秘蛔，這個符合就一直存在你所設置的那個位置上陨亡；此外還可以通過"前方"和"后方"按鈕調整元素的層級，也就是z-index深员。
詳細介紹
先說響應式布局负蠕，也就是移動端適配，在Hype3里叫響應式布局倦畅，通過設置斷點寬度遮糖，加載不同的布局。
添加完響應式布局后叠赐，右側就多了一個布局欲账，在新的布局里我們可以開發(fā)適合這種布局的頁面屡江。
響應式布局基本就這些了，是不是很簡單赛不，兩個布局資源共用盼理，但是布局里面的組件ID不能重復。
檢查器
這個是我們經(jīng)常會用到的俄删，90%的操作都是在這里完成：
1. 文稿
可以看到宏怔，在這里可以設置網(wǎng)頁的標題，也可以編輯HTML頭部<head>畴椰，在頭部里可以添加我們引用的js和css文件臊诊，支持本地和網(wǎng)絡，我這里就引用了Vue等框架斜脂，這個下面詳細介紹怎么使用抓艳；還可以顯示各種瀏覽器的兼容性警告，這個在你對元素進行樣式調整的時候如果不兼容你設置的這些瀏覽器版本帚戳，都會有詳細提示玷或。
2. 場景
這里可以設置頁面的大小，設置斷點寬度片任，增加響應式布局偏友，管理動畫時間線，添加頁面事件監(jiān)聽对供，比如頁面加載位他，卸載等
3. 度量
這里就是設置元素的位置、寬高产场、縮放鹅髓、旋轉等，可以與動畫配合使用京景，最上面的內容概覽其實就是對屬性overflow的設置窿冯，需要注意的就是可調布局這個選項，這個是設置元素在頁面寬高發(fā)生變化時的位置如何變化确徙，如上圖設置就是不管寬度怎么改變醒串，元素始終水平居中，同理你也可以設置其他變化米愿，當你鼠標懸浮在預覽上面時厦凤，它會動態(tài)變化告訴你元素位置會如何改變。
它還可以設置元素縮放行為育苟，只要選中里面的水平或者垂直箭頭较鼓，這樣當寬高發(fā)生變化，元素就會隨著寬高變化動態(tài)填充，也就是改變寬高博烂，這部分有點難以理解香椎，需要自己動手試一下才能真的理解。
4. 元素
這里就是設置元素的一些屬性禽篱，如果當前選中的是視頻畜伐，還可以在這里添加視頻源格式
5. 排印
這里就是設置字體大小，字體種類躺率，文字對齊方式等
6. 操作
這里可以添加一些常用事件監(jiān)聽玛界，不過經(jīng)過我測試，發(fā)現(xiàn)"進入視區(qū)時"這個事件貌似不太靠譜悼吱，就是雖然你把頁面底部的一個元素設置了這個事件慎框，但是在頁面加載的時候，沒有滑到這個元素的位置的時候也會觸發(fā)"進入視區(qū)時"這個事件后添；還有一個就是"鼠標移出時"這個事件笨枯，它只會在當前頁面觸發(fā)，也就是說當你觸發(fā)了一個元素的"鼠標移至時"事件遇西，如果此時你切換窗口馅精，然后把鼠標移走，這個時候是不會觸發(fā)"鼠標移至時"這個事件的粱檀，所以大家需要慎用洲敢，一般用這兩個事件就是切換元素樣式，可以通過div:hover來控制梧税，怎么引用css樣式下面會介紹沦疾。
7. 物理量
這個我沒怎么用過称近，所以了解的不多第队，應該就是賦予元素物理屬性，對于做一些動效應該很有用刨秆，詳細的可以去官網(wǎng)文檔了解一下凳谦。
8. 身份
這里就是可以設置元素的ID和類名稱，設置過之后衡未，我們就可以通過引用外部自己寫的css文件來控制元素樣式了尸执，不過需要注意的是由于Hype3在把元素生成HTML時就會附上一些屬性，比如顏色缓醋，寬高等如失，這個時候我們在css里如果寫相同的屬性是覆蓋不了的，因為Hype3生成的都是行內樣式送粱，而我們寫的是外部樣式褪贵，優(yōu)先級沒有行內樣式高营密，所以需要加上!important造成，這樣就可以覆蓋了。
.channel-btn .hover-bg{
top: 38px !important;
opacity: 0 !important;
transition:all 0.6s !important;
}
建議自己的寫的外部css樣式都加上!important，防止出現(xiàn)未知Bug糜值。
檢查器的介紹就到這里了，更多用法大家可以自行摸索赠叼。
接下來說一下引用外部腳本和內嵌HTML
這方面對于之前有web開發(fā)經(jīng)驗的來說很實用扒袖，因為有些功能我們可能還是熟悉用代碼的方式完成，這時候"HTML小組件"可以大顯身手了歼培。
HTML小組件最終生成的代碼其實就是iframe
我們可以用其他編輯器編寫iframe的代碼震蒋，然后拷貝到Hype3里面，這樣就可以使用一些第三方提供的功能了躲庄，比如Element-UI 的carousel走馬燈效果喷好。
同理，我們也可以自己寫一些js文件和css文件读跷，然后添加到Hype3里面梗搅，Hype會自動在頭部HTML給我們引用，這個在介紹文稿的編輯頭部HTML已經(jīng)提到過了效览，細心的同學應該已經(jīng)發(fā)現(xiàn)了无切。
Hype3最終生成的HTML項目，這些自定義的js和css文件和HTML小組件生成的iframe都在同一個目錄下丐枉，它們之間也可以互相調用哆键，所以可擴展性還是很高的。
動畫時間線
看完這個GIF圖瘦锹，是不是覺得和AE很像籍嘹，就像上圖中的動畫其實就是新建一個時間線，先選中一個元素弯院，然后點一下時間線旁邊的紅色按鈕開始錄制動畫辱士，拖動時間線控制動畫時長，然后這個時候你就可以隨意移動你選中的元素听绳，改變大小颂碘，旋轉360度等等一些操作，最后動畫就生成了椅挣，點一下播放按鈕头岔，你剛才對元素所做的操作都會播放出來，然后可以在任意的時間點添加一個操作：
當動畫播放到這個時間點的時候就會執(zhí)行你設置的操作
可以設置很多動畫屬性鼠证，動畫功能還是很強大的峡竣，不過需要自己摸索一下，如果熟悉AE的同學應該很容易上手吧量九，因為我對動畫了解的還不多适掰，所以先介紹到這里。
上面的動畫時間線也可以通過腳本動態(tài)控制開始的時機:
此外在腳本里還可以獲取和設置文稿、場景攻谁、布局的一些屬性稚伍，比如可以在這里通過元素ID獲取元素對象。
hypeDocument.getElementById(id)
搜索通過身份檢查器“唯一的元素 ID”所輸入的指定 ID 的當前文稿戚宦，并返回 DOM HTML 元素个曙。這與典型的“document.getElementById”類似，但是應使用 API 版本受楼，因為 Tumult Hype 遇到?jīng)_突時可能重新分配 ID垦搬。
一些問題和想法
1. 我們前面提到的"鼠標移出時"事件觸發(fā)問題，這個是挺大的一個問題了艳汽，基本導致這個事件有點雞肋猴贰，因為只要一切換窗口，就不會觸發(fā)河狐，這個時候你的UI樣式可能還停留在"鼠標移至時"這個事件觸發(fā)所顯示的那樣米绕。
2. 內置的資源編輯器不好用，寫js馋艺、css沒有任何提示栅干，只能在其他編輯器里完成后復制過來，很繁瑣捐祠。
3. 不適合深度開發(fā)
4. 個人覺得可以增加一個類似組件庫的功能碱鳞，可以由開發(fā)者自己開發(fā)一些組件提交上去，其他人可以下載下來添加到Hype中使用踱蛀，就是比如把輪播圖功能封裝一下窿给，然后我們用的時候只需要在插入的時候選擇這個組件，然后就可以使用了率拒，雖然目前可以Hype3內置的動畫來實現(xiàn)崩泡，但是對于不太熟悉動畫制作的來說還是有點困難，也可以通過HTML小組件實現(xiàn)俏橘，但是略微繁瑣一些允华，如果能有這個功能，相信這款IDE會更強大寥掐。
結語
由于本人也是初次使用，可能有些地方講的不是很明白磷蜀，有些地方了解的也不夠透徹召耘，希望大家見諒，歡迎大家討論和指正褐隆，一起進步污它！
參考：http://www.reibang.com/p/5cf5708abc2b
