搜索
Hype九九自拍 首頁 學習 教程 查看內容

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

2015-12-1 10:45| 發布者: MIke| 查看: 5578| 評論: 1|原作者: 折折熊

它適合哪些人?用AE、Flash等動畫視頻工具做App動效視頻(或GIF)演示的;用FrameJS、Origami、Form等工具寫代碼生成App可互動性動效演示的;用Axure、Justinmind搭建網站或者APP演示的,特別是在響應式頁面方面;想 ...

它適合哪些人?

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

它的好處:

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

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

Hype3專業版中文介紹:

你可以去看看它的,或者直接去。

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

一、整體界面

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

二、頂部菜單

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

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

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

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

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

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

三、畫布區域

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

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

四、右側面板

是主要參數的設置區域,主要8個面板,文稿、場景、度量、元素、排印、操作、物理量和身份:

具體參數就大家自己去試試看,很容易上手,我只來談談幾個特點:

1、文稿:

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

2、文稿

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

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

QQ20150411225046

 

 

3、度量

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

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

QQ20150411225124

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

4、元素

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

5、排印

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

 

6、操作

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

7、物理量

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

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

五、時間軸

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

之所以這么做,我想是因為它的屬性非常多,點擊屬性右側的向下剪頭就可以發現:

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

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

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

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

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

3

鮮花

握手

雷人

路過

雞蛋

剛表態過的朋友 (3 人)

發表評論

最新評論

引用 st9014 2016-7-8 09:58
謝謝您,辛苦了

查看全部評論(1)

為廣大Hype愛好者提供一個學習交流的平臺

正在努力制作Hype教程,盡可能為大家帶來最新的體驗!

Copyright © 2015 Comsenz Inc. Powered by Discuz! X3.1

返回頂部