用什麼軟體做交互動畫可以像 Photoshop 和 After Effects 那樣同 Sketch 搭配？

12-05

新增這幾天發布的 Origami 2.0 and Origami Live可以做到和 Sketch 整合使用，並且還能夠輸出代碼，我翻譯了一下官方的介紹。

翻譯：王鎮雷

就在一年以前，我們發布了 Origami ——一款免費的可交互界面設計工具。我們在 Facebook 使用 Origami 設計了很多的產品，包括 Instagram，Messenger，Paper，Slingshot，Hyperlapse 和 Rooms。而在發布之後我們收到來自設計師們最迫切的一個需求，便是希望能夠在 iPhone 和 iPad 上運行他們的 Origami 原型。

今天，我們興奮地發布了 Origami Live for iOS，還有全新版本的 Origami for Mac。Origami Live 作為一款 App，能夠將你設計的交互原型如實模擬在 iPhone 和 iPad 上，而 Origami 2.0 則添加了許多新的特性，如代碼輸出，強大的手勢支持，Sketch 整合，演說模式等等。

Origami Live

Origami Live 改變了我們在 Facebook 設計產品的方式。它允許設計師一邊在 Mac 上修改設計，一邊能夠實時地在 iPhone 或 iPad 上查看原型的效果。我們可以快速嘗試新的想法——使用多點觸控、硬體感測器等——並且可以將這些特性簡單地整合起來，並不需要寫一行代碼。然後，我們就可以把設備拿去給團隊成員或用戶體驗，看起來甚至就像一個真實的產品最終版一樣。

當我在 Paper 設計團隊時，我們幾乎將整個 App 都用 Origami 來製作成原型。它讓我們更加具有創意，也不斷地帶領團隊沉浸在新的設計中。比如我們想要提升用戶在 News Feed 中瀏覽圖片的體驗，大多數界面會將圖片適配到整個屏幕，但由於大多數的圖片都是橫屏的，這使得豎屏時它們看起來非常小，並且也難以展示細節，用戶常常需要點擊圖片或雙指將其放大才能看的清楚。對 Paper 來說，我們希望用戶能夠在信息流中無縫查看所有模式的圖片。

因此，我們思考，如果用戶能夠通過旋轉手機使得圖片也同樣翻轉會怎麼樣？幾分鐘後，我們就將設備的旋轉與圖片的位置綁定在了一起。我們可以快速地扭動原型以查看這種模式的工作細節。圖片應該順著轉動的方向轉動嗎，還是通過相反的方向？物理移動的量如何轉換成圖片在屏幕中轉動的量？如果設置得太靈敏，會使得圖片的旋轉過於劇烈，若太遲鈍，又將導致旋轉難以實現。我們可以通過設置一個滑動條來改變這個關聯值，一邊拖動滑鼠一邊嘗試旋轉設備，很快就能找到最合適的設置。

與此同時，我們還使用 Origami 去細化手機加速器、陀螺儀的數據使得最後圖片的變化變得更加順滑，其中太多的邏輯細節最終都運用在了 Paper 中。沒有 Origami 和 Origami Live，就沒有工程師和設計師無縫銜接。

Origami 2.0

代碼導出

當設計和構建一個 Origami 原型時，你正在創造一個屬於最終產品的高精度複製品。一旦決定了什麼我們中意的設計，就需要著手與工程師合作將其實現在真實產品上。

我們所做的第一步就是統一併開源了 Origami 和多個平台 App 之間的動畫引擎，包括 Pop for iOS，Rebound for Android 以及 Rebound JS for web。通過這種形式，產品開發能夠真正與原型設計相吻合，而不再是浪費大量的時間去做那些困難的逼近。

但是我們依然覺得在產品中實現原型的設計是那麼單調，比如做那些動畫的彈性效果、開始和結束的值等等。

在 Origami 2.0中，我們通過代碼導出功能解決了上述問題。只要單擊一個按鈕，你就可以將你的原型導出為可以用於 iOS、Android 和 web 的真實代碼。工程師們只要拷貝、粘貼這些代碼到工程中，即可快速精確實現你的原型設計。

演說模式

五年前我開始在 Facebook 工作時，經常拿著那些靜態的草圖去演講、分享我們正在設計的東西。我只能將草圖一頁一頁地放出來，滾動播放他們然後解釋如果按了這個按鈕將會發生什麼。

如今，我們希望能夠將高保真、具備動畫效果和交互功能的原型展示出去。當我們展示時，一塊巨大的屏幕顯示一台被握住的手機或平板，然後配合我們解說設計的細節與交互——點擊、滑動和輕掃等等。聽眾能夠身臨其境地感受這些設計是如何運作的，並且理解最終產品會是什麼樣子。

在 Origami 2.0中，我們發布了這個功能。設計師可以隨時進入全屏，展示一個處於真實場景下的原型——比如山頂、地鐵站和碧昂斯的演唱會什麼的，我特別中意那個在獨木舟上使用手機的背景。整個過程中，你可以通過Origami Live 操縱手機和平板，同時顯示器上也會同步呈現你所進行的操作。

Sketch 整合

使用最新的 Sketch 插件可以令你的原型與最終的視覺效果保持同步。Origami 2.0 允許用戶將 Origami 和 Sketch 的圖層連接起來。只要點擊一個按鈕，你就可以把整個 Sketch 中的設計更新到 Origami 文件中，只要一瞬間，並且整個原型還是在運行中的——所以你甚至可以在使用原型的過程中去更新界面。如果你使用 Photoshop，Origami 依然支持實時連接到 PS 文件。

學習資源

另外一個關於 Origami 的反饋信息是它太難學了。在我們的網站上並沒有提供太多的幫助信息來協助設計師使用和學習 Origami。通過這個版本，我們讓 Origami 更容易學習，新網站提供了一些列的教學視頻，幫助用戶快速掌握 Origami 的高級特性。

我們還提供了一個樣例頁面，大量的樣例能夠展示如何實現那些精緻的交互和界面。如果你你還在思索學點什麼，這是個好去處。只要把他們下載下來，看看是怎麼實現的。

還沒完，我們還提供了關於 Origami 的詳細文檔，介紹其每一個控制項和功能的使用。

Origami 2.0 帶著大量新特性、強大的功能和更平緩的學習曲線來了，一個簡單的快捷鍵就可以創造出令人驚嘆的效果。一切，從下載 Origami 開始。

我們期待著你的創造。

謝邀~~

用過Framer - Prototype Interaction and Animation，特別適合移動端，用起來比quartz composer簡單，如果會js，還能免費使用它開源的Framer.js。

如果說與Sketch的配合,除了Framer,InVision也不錯
詳見:
InVision now supports Sketch files. High fives.

根據現實情況選擇吧

快速動畫原型用 Pixate： The Next Generation of Mobile Interaction Design
懂 Swift/OC 用 Xcode
會 JS 用: Framer - Prototype Interaction and Animation

不用整天糾結工具了，隨便選擇一個順手的，能真實表達需求和原型就可以了。

PS. 最近 Pixate 推出了免費版，很看好。

目前來看應該是 Silver Flows ，直接以插件的形式在 Sketch 里做 Mobile 交互原型。

介紹：

Introducing Silver : Lightweight Mobile Prototyping in Sketch 3

該工具即將進入公測階段，拭目以待。

相關問題：
Sketch 有哪些插件值得推薦？ - 肖順利的回答

10月更新，我現在推薦Principle啦。Principle - Animated Design
看看我做的幾個小動畫，整個軟體操作起來非常便捷，支持在手機端實時的像真實軟體一樣操作。非常方便。結合Sketch一起就更方便啦。

http://leonwu-.lofter.com/post/210420_831103c
http://leonwu-.lofter.com/post/210420_84751bc

知乎不支持GIF勒。

------------------------------------------------------------

Hype3 專業版中文介紹—在線播放—優酷網，視頻高清在線觀看視頻
當然是Hype啦。
開啟錄製就可以做動畫啦，非常簡單。

flinto，一個快捷鍵直接將所有畫布導入進去了。簡單易懂。

principle

工具的選擇跟職位有關，從產品經理角度，能快速表達說明問題就好，研究了高大上的OC，後來又用了hype, 谷歌的Pixate，後來發現還是 Principle比較合適，能快速的表達讓團隊明白什麼自己什麼意思，並且動畫很順。

如果說切合度的話，使用Principle更加合適，支持你在sketch裡面做完以後直接拖到Prin裡面，簡單的說，它可以實現的是「動」。URL：Principle - Animated Design

嚴重不同意上面最多贊同的答案，sketch完美交互搭檔一定是hype 3，沒有之一。
毋庸置疑！
絕無僅有！
史上最強！
直接複製sketch的元素，可在hype 上粘貼；
比ps跟ae之間的搭配更容易、更親密、更傻瓜式。