背景
之所以接觸到這個開發工具，還是因為專案需要，我本來是做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小元件"可以大顯身手了。
動畫時間線
當動畫播放到這個時間點的時候就會執行你設定的操作
可以設定很多動畫屬性，動畫功能還是很強大的，不過需要自己摸索一下，如果熟悉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…