Sketch神助攻！無代碼做動效神器Hype3入門教程

@折折熊 ：Hype這個關鍵詞在百度上搜索都不一定知道它到底是什么，但自從我用上之后，就愛上它了，就像當年喜歡上Sketch一樣 >>>

它適合哪些人？

1. 用AE、Flash等動畫視頻工具做App動效視頻（或GIF）演示的；
2. 用FrameJS、Origami、Form等工具寫代碼生成App可互動性動效演示的；
3. 用Axure、Justinmind搭建網(wǎng)站或者APP演示的，特別是在響應式頁面方面；
4. 想用HTML5實現(xiàn)各種可互動動畫、動效甚至游戲的設計師，卻苦于不會代碼的；
5. 甚至想直接做適合無線傳播的互動頁面（比如各種酷炫的活動頁面）的；

它的好處：

1. 無需代碼，像AE一樣使用時間軸就做可互動的動畫
2. PC、手機、pad端都可以直接訪問（以web的形式），也可以導出視頻或者GIF
3. 3.0版還有物理特性和彈性曲線，可以發(fā)揮更強大的動畫效果
4. 對中國人來講，它原生支持中文這一點也非常棒！
5. 還有很多自己去發(fā)現(xiàn)...

先看看它官網(wǎng)的視頻

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

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

一、整體界面

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

二、頂部菜單

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

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

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

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

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

中間成組什么我就不啰嗦了，關鍵部分來了，做好之后肯定要預覽，而這也是這個產(chǎn)品特點之處。它不僅支持直接一鍵在瀏覽器中預覽，而且還支持手機上直接預覽，就這點就秒殺了只能在電腦上用鼠標模擬的Origami。當然這個你需要在手機上先裝個App，名字叫Hype Reflect，這個App界面有點落后，但能用就不錯了。

三、畫布區(qū)域

默認是600px x 400px的大小（當然它天生支持Retina屏，所以在Retina下它自動是兩倍尺寸）

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

四、右側面板

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

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

1、文稿：

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

2、文稿

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

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

3、度量

它有3D旋轉，所以可以做出各種空間動效。

轉換原點其實就是中心點的位置

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

4、元素

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

5、排印

有意思的是你可以通過添加更多字體，去直接下載google提供的字體，當然這些都是英文的。

6、操作

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

7、物理量

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

下圖中的黃框，更是叼炸天的，可以利用手機的重力感應去控制，勾選之后，手機預覽妥妥的！

五、時間軸

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

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

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

可能就是因為“這么麻煩”，所以它有個“錄像”的功能，我認為這個非常屌！

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

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

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

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

靜電的Sketch教程合集持續(xù)更新中：

1. 《SKETCH設計教室！從零開始學APP設計利器SKETCH（一）》
2. 《SKETCH設計教室！從零開始學APP設計利器SKETCH（二）》
3. 《SKETCH設計教室！帶你了解超好用的SKETCH插件》
4. 《想要一稿過不加班？SKETCH絕配神器MIRROR搶先體驗》
5. 《超能陸戰(zhàn)隊！手把手教你用SKETCH繪制萌萌噠的大白》

靜電的Xcode教程合集持續(xù)更新中：

1. 《搞定一像素不求人！為設計師量身打造的XCODE教程（1）》
2. 《搞定一像素不求人！為設計師量身打造的XCODE教程（2）》
3. 《零代碼搞定交互動畫！為設計師量身打造的XCODE教程（3）》
4. 《搞定Tab bar交互！為設計師量身打造的XCODE教程（4）》

原文地址：zhuanlan.zhihu

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設計師學習平臺，專注分享網(wǎng)頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量93萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ，歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設計 微信號：【youshege】優(yōu)設哥的全拼
您也可以通過掃描下方二維碼快速添加：