背景
之所以接觸到這個開發(fā)工具，還是因為項目需要，我本來是做Android開發(fā)的，后來因為公司前端開發(fā)人員不夠，然后開始做手機端網(wǎng)頁開發(fā)，接觸了Vue，后來前端開發(fā)離職，我只好又接手Web開發(fā)，本身對CSS也不是很熟悉，每次都是一邊百度CSS教程，一邊開發(fā)，后來經(jīng)過UI設(shè)計大佬介紹Hype3，開發(fā)了產(chǎn)品官網(wǎng)，這個頁面就是用Hype3開發(fā)，當(dāng)然目前還沒有適配移動端，用這個IDE適配移動端很方便，下面我會說到，之前其實已經(jīng)適配過，不過由于官網(wǎng)樣式老板不滿意，所以UI設(shè)計重新設(shè)計了頁面，移動端設(shè)計還沒出來，所以暫時沒有適配，閑話說了一堆，下面開始介紹我用Hype3開發(fā)官網(wǎng)的一些心得。
PS：目前Hype3好像只有Mac版本，Windows的同學(xué)可能要等一等了，或者可以安裝Mac虛擬機
Hype3社區(qū)
Hype3目前國內(nèi)教程資源似乎不是很多，Hype3中國社區(qū)感覺也不是很活躍，Hype3官網(wǎng)倒是挺活躍，論壇里也可以和其他人交流，不過沒有中文，對于英語不好的人(比如我)，可以用Goole翻譯一下頁面勉強可以看懂！其他交流社區(qū)暫時沒有發(fā)現(xiàn)！
適用場景
經(jīng)過我的初步使用，目前感覺這款I(lǐng)DE適合設(shè)計人員做產(chǎn)品原型，因為它里面內(nèi)置有動畫時間軸，可以很方面的做出豐富的動畫效果，不過由于本人能力有限，對動畫時間軸運用還不熟練，還做不出很多效果，不過對于設(shè)計人員應(yīng)該很容易上手；此外也適合前端開發(fā)，不過在我用它開發(fā)來看，覺得不太適合業(yè)務(wù)復(fù)雜的場景，適合一些產(chǎn)品官網(wǎng)，產(chǎn)品宣傳，靜態(tài)網(wǎng)頁等這類頁面，當(dāng)然不是說不可以進(jìn)行業(yè)務(wù)頁面的開發(fā)，因為它可以引用外部腳本，還可以內(nèi)嵌HTML，也就是說可以導(dǎo)入Vue，jQuery，Element-UI等我們常用的一些框架，兩者互相配合，不過稍微有一些麻煩，下面會詳細(xì)介紹。
Hype3介紹
1.界面
![]()
界面.png
這個就是Hype3的開發(fā)界面了，從左到右分別是：
1. 場景
一個場景就相當(dāng)于Web中的一個頁面，我們可以設(shè)置多個場景，互相之間可以轉(zhuǎn)跳。
2. 布局
每個場景下都可以有多個布局，多個布局分別對應(yīng)不同的斷點寬度，可以用來適配各種尺寸的終端設(shè)備。
3. 布局視圖
頁面的所有元素都會在這里顯示，可以通過拖拽調(diào)整元素位置、大小等等，
布局視圖下面就是動畫時間線，可以在上面選中元素，然后開啟時間線，拖拽時間線設(shè)置動畫時長，然后再改變元素的位置和大小，就自動生成了動畫，是不是很easy。
4. 檢查器
我們對場景和組件元素的樣式調(diào)整都是通過這些檢查器，比如精確設(shè)置元素的位置和大小，設(shè)置文本的字體大小和顏色，設(shè)置元素的點擊事件，鼠標(biāo)懸浮事件，設(shè)置元素的類名稱和ID等等。
5. 資源
這個就是放資源文件的，圖片、音視頻、函數(shù)、字體、還有我們引用的第三方腳本等，需要注意的是這里面都是引用磁盤上的資源路徑，不會把資源拷貝到項目中，所以你在引用路徑那里修改了資源，這里就會同步更新，最后發(fā)布成HTML的時候才會打包到項目中。
6. 工具欄
上面的工具欄中可以插入我們需要的元素，也可以把幾個元素成組，有點類似Adobe XD，成組之后，組內(nèi)的元素位置就是相對于這個組來說了；還可以把元素或者組轉(zhuǎn)換成符號，符號的含義其實就是可以把一個組件復(fù)用，轉(zhuǎn)換成符號后復(fù)制成多個，只要調(diào)整一個符號的樣式，復(fù)制的所有符號都會跟著改變，還有持久符號的概念，這個就是可以跨場景復(fù)用，比如把一個按鈕轉(zhuǎn)換成持久符合，那么不管你切換幾個場景，這個符合就一直存在你所設(shè)置的那個位置上；此外還可以通過"前方"和"后方"按鈕調(diào)整元素的層級，也就是z-index。
詳細(xì)介紹
先說響應(yīng)式布局，也就是移動端適配，在Hype3里叫響應(yīng)式布局，通過設(shè)置斷點寬度，加載不同的布局。
添加完響應(yīng)式布局后，右側(cè)就多了一個布局，在新的布局里我們可以開發(fā)適合這種布局的頁面。
響應(yīng)式布局基本就這些了，是不是很簡單，兩個布局資源共用，但是布局里面的組件ID不能重復(fù)。
檢查器
這個是我們經(jīng)常會用到的，90%的操作都是在這里完成：
1. 文稿
可以看到，在這里可以設(shè)置網(wǎng)頁的標(biāo)題，也可以編輯HTML頭部<head>，在頭部里可以添加我們引用的js和css文件，支持本地和網(wǎng)絡(luò)，我這里就引用了Vue等框架，這個下面詳細(xì)介紹怎么使用；還可以顯示各種瀏覽器的兼容性警告，這個在你對元素進(jìn)行樣式調(diào)整的時候如果不兼容你設(shè)置的這些瀏覽器版本，都會有詳細(xì)提示。
2. 場景
這里可以設(shè)置頁面的大小，設(shè)置斷點寬度，增加響應(yīng)式布局，管理動畫時間線，添加頁面事件監(jiān)聽，比如頁面加載，卸載等
3. 度量
這里就是設(shè)置元素的位置、寬高、縮放、旋轉(zhuǎn)等，可以與動畫配合使用，最上面的內(nèi)容概覽其實就是對屬性overflow的設(shè)置，需要注意的就是可調(diào)布局這個選項，這個是設(shè)置元素在頁面寬高發(fā)生變化時的位置如何變化，如上圖設(shè)置就是不管寬度怎么改變，元素始終水平居中，同理你也可以設(shè)置其他變化，當(dāng)你鼠標(biāo)懸浮在預(yù)覽上面時，它會動態(tài)變化告訴你元素位置會如何改變。
它還可以設(shè)置元素縮放行為，只要選中里面的水平或者垂直箭頭，這樣當(dāng)寬高發(fā)生變化，元素就會隨著寬高變化動態(tài)填充，也就是改變寬高，這部分有點難以理解，需要自己動手試一下才能真的理解。
4. 元素
這里就是設(shè)置元素的一些屬性，如果當(dāng)前選中的是視頻，還可以在這里添加視頻源格式
5. 排印
這里就是設(shè)置字體大小，字體種類，文字對齊方式等
6. 操作
這里可以添加一些常用事件監(jiān)聽，不過經(jīng)過我測試，發(fā)現(xiàn)"進(jìn)入視區(qū)時"這個事件貌似不太靠譜，就是雖然你把頁面底部的一個元素設(shè)置了這個事件，但是在頁面加載的時候，沒有滑到這個元素的位置的時候也會觸發(fā)"進(jìn)入視區(qū)時"這個事件；還有一個就是"鼠標(biāo)移出時"這個事件，它只會在當(dāng)前頁面觸發(fā)，也就是說當(dāng)你觸發(fā)了一個元素的"鼠標(biāo)移至?xí)r"事件，如果此時你切換窗口，然后把鼠標(biāo)移走，這個時候是不會觸發(fā)"鼠標(biāo)移至?xí)r"這個事件的，所以大家需要慎用，一般用這兩個事件就是切換元素樣式，可以通過div:hover來控制，怎么引用css樣式下面會介紹。
7. 物理量
這個我沒怎么用過，所以了解的不多，應(yīng)該就是賦予元素物理屬性，對于做一些動效應(yīng)該很有用，詳細(xì)的可以去官網(wǎng)文檔了解一下。
8. 身份
這里就是可以設(shè)置元素的ID和類名稱，設(shè)置過之后，我們就可以通過引用外部自己寫的css文件來控制元素樣式了，不過需要注意的是由于Hype3在把元素生成HTML時就會附上一些屬性，比如顏色，寬高等，這個時候我們在css里如果寫相同的屬性是覆蓋不了的，因為Hype3生成的都是行內(nèi)樣式，而我們寫的是外部樣式，優(yōu)先級沒有行內(nèi)樣式高，所以需要加上!important，這樣就可以覆蓋了。
.channel-btn .hover-bg{
top: 38px !important;
opacity: 0 !important;
transition:all 0.6s !important;
}
建議自己的寫的外部css樣式都加上!important，防止出現(xiàn)未知Bug。
檢查器的介紹就到這里了，更多用法大家可以自行摸索。
接下來說一下引用外部腳本和內(nèi)嵌HTML
這方面對于之前有web開發(fā)經(jīng)驗的來說很實用，因為有些功能我們可能還是熟悉用代碼的方式完成，這時候"HTML小組件"可以大顯身手了。
HTML小組件最終生成的代碼其實就是iframe
我們可以用其他編輯器編寫iframe的代碼，然后拷貝到Hype3里面，這樣就可以使用一些第三方提供的功能了，比如Element-UI 的carousel走馬燈效果。
同理，我們也可以自己寫一些js文件和css文件，然后添加到Hype3里面，Hype會自動在頭部HTML給我們引用，這個在介紹文稿的編輯頭部HTML已經(jīng)提到過了，細(xì)心的同學(xué)應(yīng)該已經(jīng)發(fā)現(xiàn)了。
Hype3最終生成的HTML項目，這些自定義的js和css文件和HTML小組件生成的iframe都在同一個目錄下，它們之間也可以互相調(diào)用，所以可擴(kuò)展性還是很高的。
動畫時間線
看完這個GIF圖，是不是覺得和AE很像，就像上圖中的動畫其實就是新建一個時間線，先選中一個元素，然后點一下時間線旁邊的紅色按鈕開始錄制動畫，拖動時間線控制動畫時長，然后這個時候你就可以隨意移動你選中的元素，改變大小，旋轉(zhuǎn)360度等等一些操作，最后動畫就生成了，點一下播放按鈕，你剛才對元素所做的操作都會播放出來，然后可以在任意的時間點添加一個操作：
當(dāng)動畫播放到這個時間點的時候就會執(zhí)行你設(shè)置的操作
可以設(shè)置很多動畫屬性，動畫功能還是很強大的，不過需要自己摸索一下，如果熟悉AE的同學(xué)應(yīng)該很容易上手吧，因為我對動畫了解的還不多，所以先介紹到這里。
上面的動畫時間線也可以通過腳本動態(tài)控制開始的時機:
此外在腳本里還可以獲取和設(shè)置文稿、場景、布局的一些屬性，比如可以在這里通過元素ID獲取元素對象。
hypeDocument.getElementById(id)
搜索通過身份檢查器“唯一的元素 ID”所輸入的指定 ID 的當(dāng)前文稿，并返回 DOM HTML 元素。這與典型的“document.getElementById”類似，但是應(yīng)使用 API 版本，因為 Tumult Hype 遇到?jīng)_突時可能重新分配 ID。
一些問題和想法
1. 我們前面提到的"鼠標(biāo)移出時"事件觸發(fā)問題，這個是挺大的一個問題了，基本導(dǎo)致這個事件有點雞肋，因為只要一切換窗口，就不會觸發(fā)，這個時候你的UI樣式可能還停留在"鼠標(biāo)移至?xí)r"這個事件觸發(fā)所顯示的那樣。
2. 內(nèi)置的資源編輯器不好用，寫js、css沒有任何提示，只能在其他編輯器里完成后復(fù)制過來，很繁瑣。
3. 不適合深度開發(fā)
4. 個人覺得可以增加一個類似組件庫的功能，可以由開發(fā)者自己開發(fā)一些組件提交上去，其他人可以下載下來添加到Hype中使用，就是比如把輪播圖功能封裝一下，然后我們用的時候只需要在插入的時候選擇這個組件，然后就可以使用了，雖然目前可以Hype3內(nèi)置的動畫來實現(xiàn)，但是對于不太熟悉動畫制作的來說還是有點困難，也可以通過HTML小組件實現(xiàn)，但是略微繁瑣一些，如果能有這個功能，相信這款I(lǐng)DE會更強大。
結(jié)語
由于本人也是初次使用，可能有些地方講的不是很明白，有些地方了解的也不夠透徹，希望大家見諒，歡迎大家討論和指正，一起進(jìn)步！
參考：http://www.itdecent.cn/p/5cf5708abc2b
