整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
前，你需要掌握復雜的軟件才能制作HTML5動畫，現在無需代碼，Hype可以把設計變成動畫，像設計幻燈片一樣輕松，趕快讓你的創意動起來！
Hype 4 Pro for Mac(HTML5動畫制作軟件)
立即下載
Mac上一款非常好用的HTML5動畫制作軟件Hype 4 Pro，其長處是可以在網頁上做出悅目的動畫效果，無需 Flash 插件。macdown提供Hype mac版，有需要的朋友歡迎下載體驗！
2020-07-1313.58 MB簡體中文
你會從一個空白的“場景”開始，它可以是一個網頁、一章電子書，或是一個橫幅廣告。
在 App 中添加文字、圖片、多媒體素材以及插畫后，你就可以將它們重新排列組合，也可以讓它們平滑地變成別的形狀。制作過程中的技術問題，《Hype》都會為你代勞。
而你要做的，就是盡情創作。例如，你可以為網站制作動態的介紹頁面；也可以設計一個小測驗，答對問題會有彩紙飄落的效果；你還可以在你用《iBooks Author》設計的電子童書中添加互動元素。當然，《Hype》能做的還遠遠不止這些。下方為你羅列具體功能，看完你會驚訝，竟如此強大~
1、快速動畫設計：
? 簡單易用的、基于關鍵幀的動畫系統
? 記錄模式可監測您的每次移動，從而根據需要自動創建關鍵幀
? 創作貝塞爾路徑的自然運動曲線
? 輕松在矢量形狀之間變換形狀（即便有不同數量的路徑點也能做到）
? 為組織和工作流制作場景
? 利用多個同時時間線的功能來運行動畫
2、添加互動性：
? 操作句柄啟動和時間線控制，場景切換，或是運行自定義的 JavaScript
? 可視化地構建操作句柄來響應輕觸、點按和動畫事件
3、創作絕妙的內容：
? 基于 WebKit 的“所見即所得”式場景編輯
? 智能導引、排列和縮放工具
? 輕松集成視頻和音頻，得到出色的多媒體文稿
? 最前衛的效果：模糊、圖像濾鏡、背景幕濾鏡、縮放、傾斜、倒影和 3D 變換
? 添加 Google 字體或使用自己的 Web 字體
? 設置輔助功能備用文本、角色和標簽頁索引
? 支持 Retina 分辨率的圖像
4、完美契合移動設備：
? Hype 的 HTML5 輸出可在移動設備上高效運行
? 具有可調布局系統，可縮放內容以適合屏幕大小
? 輕松添加掃動、觸摸和翻頁操作
? 將拖動事件綁定到時間線位置，實現豐富的交互效果
? 在 iPhone 和 iPad 上，利用免費的 Hype Reflect 伙伴 iOS 應用程序預覽您的項目
? Hype Reflect 的鏡像模式可在您編輯的時候實時顯示出編輯的效果
5、可編碼進行擴展：
? 編輯任何元素的 InnerHTML
? 集成的 JavaScript 編輯器用于編寫由用戶操作觸發的功能
? 使用 API 控制場景、時間線以及更多內容
6、導出為 HTML：
? 輸出最新的 HTML5、CSS3 樣式和 JavaScript
? 內容可在包括從 IE 6 到最新版的 Chrome 在內的所有瀏覽器上運行
? 自包含目錄包括您文稿的所有資源和代碼
? 通過復制和粘貼 HTML 的 3 行添加到現有頁面中
7、特別適合廣告：
? 最小文稿僅 24 KB（自托管、經壓縮）或在使用官方 CDN 時僅為 1.5 KB
? 導出腳本插件擴展 Hype 以支持常見的廣告系統
? 高級導出對要交付的產品進行微調
8、Hype 還可以導出：
? iBooks Author 小組件
? 視頻
? 動畫 GIF 和 PNG
HTML5動畫很難制作嗎？在以前也許，但是有了這款《Hype》，無需代碼，就可以把設計變成動畫，讓你的創意動起來。
起點學院】產品經理實戰訓練營，北京、上海、廣州、深圳、成都、杭州同時開課啦！
推薦語：@Akane_Lee ：這篇是最簡單的過場設定、最偷吃步驟、不需要技術，只要會寫簡報 PTT 或是 Keynote 就做的出來，所以連 Planner 和 PM 也保證上手無問題 >>>
動態效果、轉場動畫對UI的戲份越來越重…其實一直都很重只是大多用在游戲上，功能型 App 運用這種技巧最近越吃越兇，且制作真正能裝在手機、拿在手上操作的擬真 Prototype 對不會寫 Code 的設計師來說有難度。我找到好用的方式可以解決這個問題：Hype3＋Frameless。
會選 Hype3 的原因在《Note：Prototype 制作軟件》有提過，就不多說，直接從范例開始吧。
（好像得搭梯子才可以訪問，木有梯子同學可參見：《Sketch神助攻！無代碼做動效神器Hype3入門教程》）
示范： iPhone 內建的音樂 App
1.打開 Hype3 ，官網下載的試用版可以用很久，還有簡中接口，先抓下來玩看看，喜歡再買。（這套定價也很便宜！）
2. 既然是 iPhone 的 Prototype，來改一下場景尺寸。我用的是 640x1136px，畫質比較細。
3. 因為畫面是長型的，所以我把時間軸和圖層從下方挪到右邊去。
4. 手機截圖，直接扔進 Hype3 里。
（表示做自己的東西實可以直接拿 Mockup 的 jpg 或 png 圖直接上！）
5. 來做「動作觸發的范圍」，在圖上先拉個矩形。
6. 右邊選單設定無填色、無筆劃。
7. 下方 Tab Bar 第 2 顆的位置就有一塊透明的區域，也就是「動作觸發的范圍」。
8. 設定動作，雖然手機上不會有光標，但我還是喜歡把可觸發的區域光標換成手指，在 Browser 預覽時可以快速確認自己Link設對了沒有。
9. 記得，所有場景、圖層什么的，要重新命名成有意義的名字，當頁數和組件一多時才不容易出錯。
10. 像 Keynote 一樣，可以一次做了好幾個組件，選起來好拷貝到其他場景貼上。
（圖層前后會影響操作和組件顯示，如果有時候發現某個地方怎么點都沒效果、或是看不到，檢查下圖層順序。）
11. 點著個 BTN、播放中的頁面是由右往左推進。
12. 所以記得把過場動效改成「推動」（由右往左）。
13. 秒數我習慣設 0.3s，依個人感覺不同，請自己試看看。
14. 這個 Btn 點下去、會由下往上出現歌曲列表頁。記得設定「推動」（由下往上）。
15. 點了「完成」后，頁面會由上往下。
（當很多頁面都有一樣的回前頁、Tab 的Link要處理時，可以先做完一頁，剩下 Copy、Past 就好。）
選 HTML5、活頁夾，檔名命名好。
會出現一個 HTML 檔和一個文件夾。把這兩個檔傳到服務器上，就可以用手機開網址測試了。
如果想預覽自己做的如何，工具欄上有個 Chrome 或 Safari 的 icon，按下去就是了。不過它不是實時的，每次修改存盤就要再點一次這 icon 重新產生預覽，直接點 Browser 重新整理看到的會是修改前的樣子。
這是個連「狀態欄」都沒有，真正全屏幕的瀏覽器。免費！
輸入你的Prototype網址，就可以像真的 App 一樣，用手機做測試了。
祝順利！
作者： @Akane_Lee
來源：優設網
原文地址：blog.akanelee.me
5制作軟件Hype的矢量形狀工具支持直線、曲線、鉛筆工具的手繪線以及多邊形的創建。
圖1：Hype的矢量形狀工具創建的形狀
此外，矩形、圓角矩形和橢圓形可以轉換為矢量形狀。
圖2：矩形、圓角矩形和橢圓形
使用Hype矢量形狀工具創建這些由直線或曲線連接的形狀，可以輕松為這些形狀設置動畫，并定義邊框和填充顏色等屬性（如圖1所示）。可以使用這款H5制作軟件的動畫系統輕松對構成矢量形狀的點、曲線和直線進行動畫處理。添加和刪?除錨點，調整曲線和點的位置，并平滑過渡這些基于SVG格式的動畫，而無需代碼。
在這里給大家介紹一下什么是SVG格式：這是一種圖像文件格式，它的英文全稱為Scalable Vector Graphics，意思為可縮放的矢量圖形。
圖3：SVG格式
這是基于XML，由World Wide Web Consortium（W3C）聯盟進行開發的。嚴格來說這應該是一種開放標準的矢量圖形語言，有利于你設計高分辨率的Web圖形頁面。用戶可以直接用代碼來描繪SVG圖像，可以用任何文字處理工具打開SVG圖像，通過改變部分代碼來使圖像具有交互功能，并可以隨時插入到HTML中通過瀏覽器來觀看。
Hype提供了用于創建SVG對象的用戶界面，將該格式集成到了功能強大的動畫系統中。用戶可以直接在Hype的場景中修改點和曲線，調整位置，調整大小和縮放形狀。
圖3：創建SVG對象的用戶界面
接下來給大家介紹一下矢量形狀基礎：
矢量形狀由錨點和控制點組成。錨點定義形狀的頂點，控制點修改曲線。每個矢量形狀都有一條路徑。路徑有可選的邊框（在SVG格式中稱為筆觸）和可選的邊框寬度。形狀可以是開放的，也可以是封閉的。封閉的形狀可構成三角形、長方形、圓形等圖形，而開放的形狀則代表起點終點不連接的曲線或直線。
圖5：矢量形狀的組成部分
那么我們該如何創建矢量形狀呢？
第一步，依次單擊“元素”>“矢量形狀”，此時您的光標將變為鋼筆工具。
圖6：矢量形狀
第二步，單擊并拖動鼠標將開始創建一條線，再次單擊將創建另外一個點。完成形狀的描繪后，想要退出矢量模式，按esc、enter或在“矢量形狀“檢查器中單擊“完成”即可。
圖7：完成矢量形狀的繪制
您可以選擇在矢量創建過程中設置顏色和邊框寬度之類的屬性，也可以在元素檢查器中進行相關設置。
圖8：矢量形狀和元素檢查器
以上就是小編對于這款H5制作軟件矢量形狀工具的詳細介紹，對此感興趣的小伙伴們可以進行嘗試。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
