Hype這個關(guān)鍵詞在百度上搜索都不一定知道它到底是什么，但自從我用上之后，就愛上它了，就像當(dāng)年喜歡上Sketch一樣 >>>

它適合哪些人?

用AE、Flash等動畫視頻工具做App動效視頻(或GIF)演示的;

用FrameJS、Origami、Form等工具寫代碼生成App可互動性動效演示的;

用Axure、Justinmind搭建網(wǎng)站或者APP演示的，特別是在響應(yīng)式頁面方面;

想用HTML5實現(xiàn)各種可互動動畫、動效甚至游戲的設(shè)計師，卻苦于不會代碼的;

甚至想直接做適合無線傳播的互動頁面(比如各種酷炫的活動頁面)的;

它的好處：

無需代碼，像AE一樣使用時間軸就做可互動的動畫

PC、手機(jī)、pad端都可以直接訪問(以web的形式)，也可以導(dǎo)出視頻或者GIF

3.0版還有物理特性和彈性曲線，可以發(fā)揮更強(qiáng)大的動畫效果

對中國人來講，它原生支持中文這一點也非常棒!

還有很多自己去發(fā)現(xiàn)…

先看看它官網(wǎng)的視頻(因為官網(wǎng)上的需要翻墻才能看youtube，所以我把它轉(zhuǎn)到國內(nèi)的視頻網(wǎng)站，并且加了一點點中文字幕)

Hype3專業(yè)版中文介紹：http://v.qq.com

你可以去看看它的官網(wǎng)，或者直接去下載個試用版。

Hype在國內(nèi)甚至國外的資源現(xiàn)在都還很少，先來個入門教程，主要是我用的一些小技巧，深度的教程還需要一些日子之后放出來。

一、整體界面

它的界面有些許AE的味道，當(dāng)然為了符合Mac的氣質(zhì)，它的整體布局也是和Keynote十分接近，加上中文的原因，所以整體上手非常簡單。

二、頂部菜單

最左邊的有兩個按鈕，默認(rèn)布局是不展開的，點擊展開之后，就是讓你做響應(yīng)式頁面的，非常簡單。場景這個是和AE最不一樣的地方，因為做個完整的產(chǎn)品需要很多頁面，所以這個場景切換非常重要。

點擊添加可以快速增加響應(yīng)式布局，不得不說，這個軟件的上手難度只有一顆星，算是秒殺Axure和Justinmind(后者我沒怎么用，并不非常了解)

頂部菜單欄的第二部分就是添加元素，當(dāng)然Hype3在自己的圖形繪畫上還很少，只有三個形狀，而且不能對曲線編輯，這個還是比較麻煩的部分，而且現(xiàn)在它還不直接支持Sketch或者PS，只能從別的軟件中導(dǎo)出圖片之后手動加進(jìn)來才行。Tips：Hype3支持SVG格式的矢量圖形，所以在Sketch中選擇導(dǎo)出SVG格式會把所有圖形輸出成矢量，大大減少整體的容量體積。

添加元素邊上還有個“符號”，因為Symbol的翻譯問題，其實應(yīng)該理解為元件，這里更指代為“可重復(fù)使用的元件”，這個類似Axure中的Master母版，用于大型動畫元素的管理上還是很有用的。

其中它還有個“新建持久符號”，這個在彈出說明里也很容易理解，和Keynote中把“背景”應(yīng)用到所有場景道理一樣，只是它這里可以是任意一個元件。

中間成組什么我就不??鋁耍?丶?糠擲戳耍?齪彌?罌隙ㄒ?だ潰??庖彩欽飧霾?誹氐闃??。?喚鮒С種苯右患?阡?榔髦性だ潰??一怪С質(zhì)只?現(xiàn)苯釉だ潰?駝獾憔兔肷繃酥荒茉詰縋隕嫌檬蟊昴Ｄ獾?rigami。當(dāng)然這個你需要在手機(jī)上先裝個App，名字叫Hype Reflect，這個App界面有點落后，但能用就不錯了。

三、畫布區(qū)域

默認(rèn)是600px x 400px的大小(當(dāng)然它天生支持Retina屏，所以在Retina下它自動是兩倍尺寸)

你可以在場景面板里修改這個尺寸，它預(yù)設(shè)好了非常多移動終端的尺寸，包括“比大更大”的6和6plus(你仔細(xì)就會發(fā)現(xiàn)，它用的是縮小一倍的分辨率，但不用擔(dān)心，因為Retina屏下兼容很好，不然它也做不了響應(yīng)式設(shè)計)

四、右側(cè)面板

是主要參數(shù)的設(shè)置區(qū)域，主要8個面板，文稿、場景、度量、元素、排英操作、物理量和身份：

具體參數(shù)就大家自己去試試看，很容易上手，我只來談?wù)剮讉€特點：

1、文稿：

黃色框部分，主要是在手機(jī)上預(yù)覽時可以直接生成主屏幕web應(yīng)用，禁止用戶縮放，你的產(chǎn)品看起來更像是Native的。

2、文稿

有部分上面講過就忽略了，主要是時間線的管理，你可以通過新建時間線來管理不同元件的動畫，那么這個地方就是增加刪除的地方。(后期復(fù)雜動畫時非常有用)

還有場景加載卸載的選項，這個和Axure或者Flash的功能很像(在操作面板中也會有這樣的功能)，點擊增加，出現(xiàn)下拉菜單就可看到，除了動效以外，整個邏輯時間線的操作這邊都有，非常方便。

3、度量

它有3D旋轉(zhuǎn)，所以可以做出各種空間動效。

轉(zhuǎn)換原點其實就是中心點的位置

當(dāng)然除非要很精確，否則，你選中元件，按住鍵盤上的command鍵，鼠標(biāo)懸浮在元件上你就可以看到中心點，然后拖動它就可以改變位置(中心點是干嘛的?你先自己補(bǔ)補(bǔ)圖形課)

4、元素

這里就不多說了，很多常見的設(shè)置，當(dāng)然其中的顏色樣式的設(shè)置還很牛的，比如模糊。

5、排印

有意思的是你可以通過添加更多字體，去直接下載google提供的字體，當(dāng)然這些都是英文的，而且你得先有個國外的VPN。

6、操作

重點是“拖移動時”，這個也是手機(jī)上滑動效果的操作，具體可以好好嘗試看。

7、物理量

最神奇的功能，你先選擇一個元件，然后點擊下拉就會看到靜態(tài)和動態(tài)，如果你要一個物體動起來，那就是動態(tài)，如果你要一個物體在一個斜面上滑下去，那你要一個動態(tài)的物體和一個靜態(tài)的斜面。注意，默認(rèn)頁面是沒有物理環(huán)境的，你需要賦予這些元件物理特點，他們才會動起來，密度、阻力啥的我也還沒搞懂，但你沒錯改變參數(shù)就可以知道效果，大家最關(guān)心的肯定是是彈跳力，那個就是“退還”，不知道是怎么翻譯的，你要彈跳越好數(shù)字越大，當(dāng)然1是最適合的，太大就會馬上不見。。。

下圖中的黃框，更是叼炸天的，可以利用手機(jī)的重力感應(yīng)去控制，勾選之后，手機(jī)預(yù)覽妥妥的!

五、時間軸

屏幕下方是這個軟件重要的部分，和AE一樣的時間軸，不同的是，它把對象和屬性用上下兩個部分分開，而不是像AE一樣默認(rèn)是用展開的方式。

之所以這么做，我想是因為它的屬性非常多，點擊屬性右側(cè)的向下剪頭就可以發(fā)現(xiàn)：

當(dāng)然它這里比較麻煩的是，選擇了任意一個之后，并不是在這里進(jìn)行編輯，而只是像AE里面一樣打個點而已，還需要找到右側(cè)對應(yīng)的面板具體參數(shù)設(shè)置的地方去修改。

可能就是因為“這么麻煩”，所以它有個“錄像”的功能，我認(rèn)為這個非常??

你只要選中一個元件，然后點擊這個錄像功能，選擇一個時間點(連打點都不用，只要選擇好時間就行)，然后隨意改變這個元件變成你想要的樣子位置甚至顏色什么的，它自動就生成了動畫。

做動效的都知道曲線，你有了運動，如果沒有速率曲線，那簡直就是作死。Hype3的這個完整的曲線庫，實在太貼心，不僅有很多種樣子(并且每個都有曲線的演示，看它右側(cè)的小方塊)，還可以自定義編輯曲線，無!需!代!碼!

好了，這個軟件的介紹差不多到這里，我想作為一個設(shè)計師特別希望自己能夠真正獨立“精益”一把，不需要依賴開發(fā)，能夠把你的設(shè)計原型100%還原成產(chǎn)品，哪怕只是一個細(xì)微的動效。

我非?？春眠@個軟件，配上Sketch簡直可以說無敵(當(dāng)然還有一些bug希望在后續(xù)版本中能夠改善)，最后，這個軟件是付費的，專業(yè)版要人民幣600多，暫時沒看到破解的方法(如果真的想要，還是找得到的)，不過作為有節(jié)操的設(shè)計師，在用完試用期之后，我想我會付費去繼續(xù)使用的。