前，你需要掌握復(fù)雜的軟件才能制作HTML5動畫，現(xiàn)在無需代碼，Hype可以把設(shè)計變成動畫，像設(shè)計幻燈片一樣輕松，趕快讓你的創(chuàng)意動起來！

Hype 4 Pro for Mac(HTML5動畫制作軟件)

立即下載

Mac上一款非常好用的HTML5動畫制作軟件Hype 4 Pro，其長處是可以在網(wǎng)頁上做出悅目的動畫效果，無需 Flash 插件。macdown提供Hype mac版，有需要的朋友歡迎下載體驗！

2020-07-1313.58 MB簡體中文

你會從一個空白的“場景”開始，它可以是一個網(wǎng)頁、一章電子書，或是一個橫幅廣告。

在 App 中添加文字、圖片、多媒體素材以及插畫后，你就可以將它們重新排列組合，也可以讓它們平滑地變成別的形狀。制作過程中的技術(shù)問題，《Hype》都會為你代勞。

而你要做的，就是盡情創(chuàng)作。例如，你可以為網(wǎng)站制作動態(tài)的介紹頁面；也可以設(shè)計一個小測驗，答對問題會有彩紙飄落的效果；你還可以在你用《iBooks Author》設(shè)計的電子童書中添加互動元素。當(dāng)然，《Hype》能做的還遠(yuǎn)遠(yuǎn)不止這些。下方為你羅列具體功能，看完你會驚訝，竟如此強大~

1、快速動畫設(shè)計：

? 簡單易用的、基于關(guān)鍵幀的動畫系統(tǒng)

? 記錄模式可監(jiān)測您的每次移動，從而根據(jù)需要自動創(chuàng)建關(guān)鍵幀

? 創(chuàng)作貝塞爾路徑的自然運動曲線

? 輕松在矢量形狀之間變換形狀（即便有不同數(shù)量的路徑點也能做到）

? 為組織和工作流制作場景

? 利用多個同時時間線的功能來運行動畫

2、添加互動性：

? 操作句柄啟動和時間線控制，場景切換，或是運行自定義的 JavaScript

? 可視化地構(gòu)建操作句柄來響應(yīng)輕觸、點按和動畫事件

3、創(chuàng)作絕妙的內(nèi)容：

? 基于 WebKit 的“所見即所得”式場景編輯

? 智能導(dǎo)引、排列和縮放工具

? 輕松集成視頻和音頻，得到出色的多媒體文稿

? 最前衛(wèi)的效果：模糊、圖像濾鏡、背景幕濾鏡、縮放、傾斜、倒影和 3D 變換

? 添加 Google 字體或使用自己的 Web 字體

? 設(shè)置輔助功能備用文本、角色和標(biāo)簽頁索引

? 支持 Retina 分辨率的圖像

4、完美契合移動設(shè)備：

? Hype 的 HTML5 輸出可在移動設(shè)備上高效運行

? 具有可調(diào)布局系統(tǒng)，可縮放內(nèi)容以適合屏幕大小

? 輕松添加掃動、觸摸和翻頁操作

? 將拖動事件綁定到時間線位置，實現(xiàn)豐富的交互效果

? 在 iPhone 和 iPad 上，利用免費的 Hype Reflect 伙伴 iOS 應(yīng)用程序預(yù)覽您的項目

? Hype Reflect 的鏡像模式可在您編輯的時候?qū)崟r顯示出編輯的效果

5、可編碼進(jìn)行擴展：

? 編輯任何元素的 InnerHTML

? 集成的 JavaScript 編輯器用于編寫由用戶操作觸發(fā)的功能

? 使用 API 控制場景、時間線以及更多內(nèi)容

6、導(dǎo)出為 HTML：

? 輸出最新的 HTML5、CSS3 樣式和 JavaScript

? 內(nèi)容可在包括從 IE 6 到最新版的 Chrome 在內(nèi)的所有瀏覽器上運行

? 自包含目錄包括您文稿的所有資源和代碼

? 通過復(fù)制和粘貼 HTML 的 3 行添加到現(xiàn)有頁面中

7、特別適合廣告：

? 最小文稿僅 24 KB（自托管、經(jīng)壓縮）或在使用官方 CDN 時僅為 1.5 KB

? 導(dǎo)出腳本插件擴展 Hype 以支持常見的廣告系統(tǒng)

? 高級導(dǎo)出對要交付的產(chǎn)品進(jìn)行微調(diào)

8、Hype 還可以導(dǎo)出：

? iBooks Author 小組件

? 視頻

? 動畫 GIF 和 PNG

HTML5動畫很難制作嗎？在以前也許，但是有了這款《Hype》，無需代碼，就可以把設(shè)計變成動畫，讓你的創(chuàng)意動起來。

起點學(xué)院】產(chǎn)品經(jīng)理實戰(zhàn)訓(xùn)練營，北京、上海、廣州、深圳、成都、杭州同時開課啦！

推薦語：@Akane_Lee ：這篇是最簡單的過場設(shè)定、最偷吃步驟、不需要技術(shù)，只要會寫簡報 PTT 或是 Keynote 就做的出來，所以連 Planner 和 PM 也保證上手無問題 >>>

動態(tài)效果、轉(zhuǎn)場動畫對UI的戲份越來越重…其實一直都很重只是大多用在游戲上，功能型 App 運用這種技巧最近越吃越兇，且制作真正能裝在手機、拿在手上操作的擬真 Prototype 對不會寫 Code 的設(shè)計師來說有難度。我找到好用的方式可以解決這個問題：Hype3＋Frameless。

會選 Hype3 的原因在《Note：Prototype 制作軟件》有提過，就不多說，直接從范例開始吧。

（好像得搭梯子才可以訪問，木有梯子同學(xué)可參見：《Sketch神助攻！無代碼做動效神器Hype3入門教程》）

Hype3

場景設(shè)定

示范： iPhone 內(nèi)建的音樂 App

1.打開 Hype3 ，官網(wǎng)下載的試用版可以用很久，還有簡中接口，先抓下來玩看看，喜歡再買。（這套定價也很便宜！）

2. 既然是 iPhone 的 Prototype，來改一下場景尺寸。我用的是 640x1136px，畫質(zhì)比較細(xì)。

3. 因為畫面是長型的，所以我把時間軸和圖層從下方挪到右邊去。

匯入圖檔

4. 手機截圖，直接扔進(jìn) Hype3 里。

（表示做自己的東西實可以直接拿 Mockup 的 jpg 或 png 圖直接上！）

設(shè)定動作范圍

5. 來做「動作觸發(fā)的范圍」，在圖上先拉個矩形。

6. 右邊選單設(shè)定無填色、無筆劃。

7. 下方 Tab Bar 第 2 顆的位置就有一塊透明的區(qū)域，也就是「動作觸發(fā)的范圍」。

8. 設(shè)定動作，雖然手機上不會有光標(biāo)，但我還是喜歡把可觸發(fā)的區(qū)域光標(biāo)換成手指，在 Browser 預(yù)覽時可以快速確認(rèn)自己Link設(shè)對了沒有。

9. 記得，所有場景、圖層什么的，要重新命名成有意義的名字，當(dāng)頁數(shù)和組件一多時才不容易出錯。

10. 像 Keynote 一樣，可以一次做了好幾個組件，選起來好拷貝到其他場景貼上。

（圖層前后會影響操作和組件顯示，如果有時候發(fā)現(xiàn)某個地方怎么點都沒效果、或是看不到，檢查下圖層順序。）

過場方式

11. 點著個 BTN、播放中的頁面是由右往左推進(jìn)。

12. 所以記得把過場動效改成「推動」（由右往左）。

13. 秒數(shù)我習(xí)慣設(shè) 0.3s，依個人感覺不同，請自己試看看。

14. 這個 Btn 點下去、會由下往上出現(xiàn)歌曲列表頁。記得設(shè)定「推動」（由下往上）。

15. 點了「完成」后，頁面會由上往下。

（當(dāng)很多頁面都有一樣的回前頁、Tab 的Link要處理時，可以先做完一頁，剩下 Copy、Past 就好。）

匯出 HTML 檔

選 HTML5、活頁夾，檔名命名好。

會出現(xiàn)一個 HTML 檔和一個文件夾。把這兩個檔傳到服務(wù)器上，就可以用手機開網(wǎng)址測試了。

如果想預(yù)覽自己做的如何，工具欄上有個 Chrome 或 Safari 的 icon，按下去就是了。不過它不是實時的，每次修改存盤就要再點一次這 icon 重新產(chǎn)生預(yù)覽，直接點 Browser 重新整理看到的會是修改前的樣子。

原型專用瀏覽器 —— Frameless

這是個連「狀態(tài)欄」都沒有，真正全屏幕的瀏覽器。免費！

輸入你的Prototype網(wǎng)址，就可以像真的 App 一樣，用手機做測試了。

祝順利！

作者： @Akane_Lee

來源：優(yōu)設(shè)網(wǎng)

原文地址：blog.akanelee.me

5制作軟件Hype的矢量形狀工具支持直線、曲線、鉛筆工具的手繪線以及多邊形的創(chuàng)建。

圖1：Hype的矢量形狀工具創(chuàng)建的形狀

此外，矩形、圓角矩形和橢圓形可以轉(zhuǎn)換為矢量形狀。

圖2：矩形、圓角矩形和橢圓形

使用Hype矢量形狀工具創(chuàng)建這些由直線或曲線連接的形狀，可以輕松為這些形狀設(shè)置動畫，并定義邊框和填充顏色等屬性（如圖1所示）。可以使用這款H5制作軟件的動畫系統(tǒng)輕松對構(gòu)成矢量形狀的點、曲線和直線進(jìn)行動畫處理。添加和刪?除錨點，調(diào)整曲線和點的位置，并平滑過渡這些基于SVG格式的動畫，而無需代碼。

在這里給大家介紹一下什么是SVG格式：這是一種圖像文件格式，它的英文全稱為Scalable Vector Graphics，意思為可縮放的矢量圖形。

圖3：SVG格式

這是基于XML，由World Wide Web Consortium（W3C）聯(lián)盟進(jìn)行開發(fā)的。嚴(yán)格來說這應(yīng)該是一種開放標(biāo)準(zhǔn)的矢量圖形語言，有利于你設(shè)計高分辨率的Web圖形頁面。用戶可以直接用代碼來描繪SVG圖像，可以用任何文字處理工具打開SVG圖像，通過改變部分代碼來使圖像具有交互功能，并可以隨時插入到HTML中通過瀏覽器來觀看。

Hype提供了用于創(chuàng)建SVG對象的用戶界面，將該格式集成到了功能強大的動畫系統(tǒng)中。用戶可以直接在Hype的場景中修改點和曲線，調(diào)整位置，調(diào)整大小和縮放形狀。

圖3：創(chuàng)建SVG對象的用戶界面

接下來給大家介紹一下矢量形狀基礎(chǔ)：

矢量形狀由錨點和控制點組成。錨點定義形狀的頂點，控制點修改曲線。每個矢量形狀都有一條路徑。路徑有可選的邊框（在SVG格式中稱為筆觸）和可選的邊框?qū)挾取Ｐ螤羁梢允情_放的，也可以是封閉的。封閉的形狀可構(gòu)成三角形、長方形、圓形等圖形，而開放的形狀則代表起點終點不連接的曲線或直線。

圖5：矢量形狀的組成部分

那么我們該如何創(chuàng)建矢量形狀呢？

第一步，依次單擊“元素”>“矢量形狀”，此時您的光標(biāo)將變?yōu)殇摴P工具。

圖6：矢量形狀

第二步，單擊并拖動鼠標(biāo)將開始創(chuàng)建一條線，再次單擊將創(chuàng)建另外一個點。完成形狀的描繪后，想要退出矢量模式，按esc、enter或在“矢量形狀“檢查器中單擊“完成”即可。

圖7：完成矢量形狀的繪制

您可以選擇在矢量創(chuàng)建過程中設(shè)置顏色和邊框?qū)挾戎惖膶傩裕部梢栽谠貦z查器中進(jìn)行相關(guān)設(shè)置。

圖8：矢量形狀和元素檢查器

以上就是小編對于這款H5制作軟件矢量形狀工具的詳細(xì)介紹，對此感興趣的小伙伴們可以進(jìn)行嘗試。