隨著前幾年可交互設計軟件一番大戰(zhàn)之后，很多紅極一時的產(chǎn)品都由于各種原因慢慢淡出了設計師們的視野：

主打 H5 的 Hype 好像慢慢沒聲音了、Pixate 被 Google 收購之后不久就宣告死亡、同是 Google 家的 Form 也沒有做起來、Facebook 的 Origami 更新到了 2.0 但至少在國內(nèi)沒什么市場。

目前，拋開 AE、C4D 這種更為專業(yè)的視頻類軟件不談，市面上最火的三個動效原型制作工具分別是 Principle、Flinto 和 Framer Studio。關于他們的優(yōu)缺點網(wǎng)上足夠多了，我也不再多說。

今天要聊的是這兩天慢慢在設計圈擴散的一個新玩具 —— Kite Compositor。沒錯，又是一款可交互原型動效設計軟件，Only for Mac and iOS。

先從我的主觀感受向大家介紹一下新朋友。

一言以蔽之，對這款工具的第一印象是：在單一的頁面里通過時間軸的方式實現(xiàn)各種各樣的動畫，同時也支持 Javascript 手動編寫代碼來達到更高自由度的效果。

工具自身的交互模式上，更類似于一個單畫板的 Principle 與 Framer 相結(jié)合。這注定了首先上手門檻不會很高，但又允許了解 Coding 的設計師進一步挖掘工具的潛力。

常規(guī)的圖層可操作屬性如尺寸、位置、顏色、透明度等都支持，比較特別的是還支持高斯模糊、陰影，尤其對陰影的原生操縱感覺還不錯。

至少不用像 Principle 一樣要自己切個陰影圖貼進去；另外，還可以直接用畫筆編輯圖層形狀。

常規(guī)的動畫過程如設置開始結(jié)束時間、速度和動效曲線（Curve）等都有，比較特別的是它在位移上支持自由繪制路徑動畫。

這意味著你可以很容易地實現(xiàn)物體的曲線運動，而這在很多競品中是沒有的。

交互方式上，常規(guī)的點擊、滑動、長按都支持，此外還支持鍵盤按鍵監(jiān)控、鼠標監(jiān)控。

多媒體和擴展性上，支持視頻和GIF導出，也支持 Sketch 圖層導入。

像 Framer 一樣，Sketch 導入的圖層是可編輯的，不像 Principle 只是變成一張圖片。

大家比較關心的設計導出代碼部分。

首先 Kite 可以通過自帶的一個框架（kitekit）將動畫直接集成到 App 中，聽起來非常美好，所以明天上班打算和開發(fā)哥哥試一試。

另外， Kite 也支持直接導出 iOS 原生的動畫參數(shù)代碼，看示例感覺具體效果和 Origami 差不多，也就是能表達參數(shù)、屬性，但是不能表達動畫邏輯。

別的就不多說了，直接看我翻譯的官方宣傳文檔，我把哪些特性沒啥特別的，哪些特性挺牛逼的標注出來，然后大家玩玩看吧。

（挺牛逼的）路徑編輯：通過畫筆工具，設計師可以繪制動畫路徑，還可以編輯圖層形狀。

（沒啥的）演示模式：全屏展示你的設計，也可以自由設置展示的窗口尺寸。

（誰都應該做到的）靈活的界面：易于上手但足夠強大的界面可以幫助你處理各種設計需求。

（大概是個噱頭）支持 Touchbar：通過新款 Mac 的 Touchbar 功能，可以在不使用鼠標的前提下方便地切換工具、控制時間軸等。

（很棒的）時間軸：靈活智能的內(nèi)置時間軸功能讓設計師可以自由地操縱、編輯動畫關鍵幀，并精細地調(diào)整動畫時間。

（還不錯但有點復雜的）編輯器（Inspector）：一個強大的對象編輯器讓你通過短短幾次點擊設置顏色、調(diào)整動畫曲線或為圖片添加濾鏡。

（挺方便直觀的）豐富的動畫和圖層庫：可以直接拖動圖層、動畫或交互到畫板中，還可以將常用的模塊組件化后添加到庫里，便于反復調(diào)用。

（沒啥的）Mac 上設計，iOS 上查看：下載 Kit Compositer for iOS 之后，就可以在 iOS 設備上查看原生動畫效果了。

（還不錯的）Sketch 素材導入：輕松地從 Sketch 中導入可編輯的圖層和素材（主要是文字和路徑）。

（理所應當?shù)模С觯嚎梢詫⒃O計導出為視頻或GIF文件。

（挺牛逼的）腳本：通過內(nèi)置的 JavaScript 腳本引擎可以實現(xiàn)復雜的動畫和交互，內(nèi)置了 JS 控制臺，可以以代碼的方式快速設置動畫、添加圖層或改變屬性等等。

（還不錯，Principle 也是的）原生動畫引擎：所有動畫都基于 Apple 的原生動畫技術 Core Animation，這保證了動畫效果在設備上運行時的高幀率。

（沒啥的）實時繪制：不像其他應用，Kite 通過 Core Animation 引擎實現(xiàn)了圖形的實時繪制，這意味著不需要對任何交互效果做預處理，可以隨時看到動畫的效果。

（一般般的）擴展性：Kite 文件將數(shù)據(jù)扁平化存儲，可以非常簡單地修改其中的屬性、數(shù)據(jù)等。同時，它也非常易于解析為 JSON 文件，供其他應用程序調(diào)用。

（看起來很屌，實際有待測試的）將動畫集成至 App：通過 KiteKit Framework，開發(fā)者可以容易地將動畫效果集成到 iOS 或 macOS 應用中。具體文檔和示例可以參考：kitecomp/kitekit

（還可以的）豐富的模板：如下圖所示，我們還提供了豐富的內(nèi)建模板。

（很可能淪為雞肋的）方便地將設計轉(zhuǎn)化為代碼：動效設計師可以精確地將動畫曲線、持續(xù)時間、彈性動畫和位置等等參數(shù)描述給工程師。Kite 中所用的參數(shù)與 iOS 或 macOS 代碼中的參數(shù)一致。

（人人都有的）動畫曲線編輯：除了給出常用的曲線外，也支持非常細節(jié)地調(diào)整。

（降低上手難度的）內(nèi)建幫助系統(tǒng)：搞不懂怎么用的時候可以快速地調(diào)用內(nèi)置的幫助功能。

這東西賣99刀，支持免費試用一段時間，文檔也比較齊全。

自家官網(wǎng)也有很多 Showcase，幫助大家下載學習。

就這樣啦，下載和官網(wǎng)：Kite Compositor

「新晉神器推薦」

1. 可能是最簡單的3D建模軟件PROJECT FELIX
2. 超全面！新晉設計神器FIGMA 深度評測
3. 這款圖標神器，讓你體驗用完即走的暢快感

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

================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設計師學習平臺，專注分享網(wǎng)頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量190萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ，歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦，設計師必備導航：http://hao.uisdc.com