前端開發神器Hype3初體驗-可視化、響應式、動效

時間 2019-11-16

標籤前端開發神器 hype3 hype 體驗可視化響應简体版

原文原文鏈接

背景

之因此接觸到這個開發工具，仍是由於項目須要，我原本是作Android開發的，後來由於公司前端開發人員不夠，而後開始作手機端網頁開發，接觸了Vue，後來前端開發離職，我只好又接手Web開發，自己對CSS也不是很熟悉，每次都是一邊百度CSS教程，一邊開發，後來通過UI設計大佬介紹Hype3，開發了產品官網，這個頁面就是用Hype3開發，固然目前尚未適配移動端，用這個IDE適配移動端很方便，下面我會說到，以前其實已經適配過，不過因爲官網樣式老闆不滿意，因此UI設計從新設計了頁面，移動端設計還沒出來，因此暫時沒有適配，閒話說了一堆，下面開始介紹我用Hype3開發官網的一些心得。 PS：目前Hype3好像只有Mac版本，Windows的同窗可能要等一等了，或者能夠安裝Mac虛擬機css

Hype3社區

Hype3目前國內教程資源彷佛不是不少，Hype3中國社區感受也不是很活躍，Hype3官網卻是挺活躍，論壇裏也能夠和其餘人交流，不過沒有中文，對於英語很差的人(好比我)，能夠用Goole翻譯一下頁面勉強能夠看懂！其餘交流社區暫時沒有發現！html

適用場景

通過個人初步使用，目前感受這款IDE適合設計人員作產品原型，由於它裏面內置有動畫時間軸，能夠很方面的作出豐富的動畫效果，不過因爲本人能力有限，對動畫時間軸運用還不熟練，還作不出不少效果，不過對於設計人員應該很容易上手；此外也適合前端開發，不過在我用它開發來看，以爲不太適合業務複雜的場景，適合一些產品官網，產品宣傳，靜態網頁等這類頁面，固然不是說不能夠進行業務頁面的開發，由於它能夠引用外部腳本，還能夠內嵌HTML，也就是說能夠導入Vue，jQuery，Element-UI等咱們經常使用的一些框架，二者互相配合，不過稍微有一些麻煩，下面會詳細介紹。前端

Hype3介紹

1.界面

這個就是Hype3的開發界面了，從左到右分別是：web

1. 場景

一個場景就至關於Web中的一個頁面，咱們能夠設置多個場景，互相之間能夠轉跳。瀏覽器

2. 佈局

每一個場景下均可以有多個佈局，多個佈局分別對應不一樣的斷點寬度，能夠用來適配各類尺寸的終端設備。bash

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。