KITE COMPOSITOR for mac

KITE COMPOSITOR for mac是最近非常熱門(mén)的一款原型設(shè)計(jì)工具，這款工具的上手門(mén)檻不高，但又允許了解Coding的設(shè)計(jì)師進(jìn)一步挖掘工具的潛力。Kite Compositor不光可以完美的構(gòu)建MacOS和iOS動(dòng)畫(huà)和原型，也直觀地拖放圖層來(lái)創(chuàng)建復(fù)雜的界面所見(jiàn)即所得的畫(huà)布。

軟件介紹：

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

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

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

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

這意味著你可以很容易地實(shí)現(xiàn)物體的曲線運(yùn)動(dòng)，而這在很多競(jìng)品中是沒(méi)有的。

交互方式上，常規(guī)的點(diǎn)擊、滑動(dòng)、長(zhǎng)按都支持，此外還支持鍵盤(pán)按鍵監(jiān)控、鼠標(biāo)監(jiān)控。

多媒體和擴(kuò)展性上，支持視頻和GIF導(dǎo)出，也支持 Sketch 圖層導(dǎo)入。

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

大家比較關(guān)心的設(shè)計(jì)導(dǎo)出代碼部分。

首先 Kite 可以通過(guò)自帶的一個(gè)框架（kitekit）將動(dòng)畫(huà)直接集成到 App 中，聽(tīng)起來(lái)非常美好，所以明天上班打算和開(kāi)發(fā)哥哥試一試。

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

使用體驗(yàn)：

路徑編輯：通過(guò)畫(huà)筆工具，設(shè)計(jì)師可以繪制動(dòng)畫(huà)路徑，還可以編輯圖層形狀。

（沒(méi)啥的）演示模式：全屏展示你的設(shè)計(jì)，也可以自由設(shè)置展示的窗口尺寸。

（誰(shuí)都應(yīng)該做到的）靈活的界面：易于上手但足夠強(qiáng)大的界面可以幫助你處理各種設(shè)計(jì)需求。

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

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

（還不錯(cuò)但有點(diǎn)復(fù)雜的）編輯器（Inspector）：一個(gè)強(qiáng)大的對(duì)象編輯器讓你通過(guò)短短幾次點(diǎn)擊設(shè)置顏色、調(diào)整動(dòng)畫(huà)曲線或?yàn)閳D片添加濾鏡。

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

（沒(méi)啥的）Mac 上設(shè)計(jì)，iOS 上查看：下載 Kit Compositer for iOS 之后，就可以在 iOS 設(shè)備上查看原生動(dòng)畫(huà)效果了。

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

（理所應(yīng)當(dāng)?shù)模��?dǎo)出：可以將設(shè)計(jì)導(dǎo)出為視頻或GIF文件。

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

（還不錯(cuò)，Principle 也是的）原生動(dòng)畫(huà)引擎：所有動(dòng)畫(huà)都基于 Apple 的原生動(dòng)畫(huà)技術(shù) Core Animation，這保證了動(dòng)畫(huà)效果在設(shè)備上運(yùn)行時(shí)的高幀率。

（沒(méi)啥的）實(shí)時(shí)繪制：不像其他應(yīng)用，Kite 通過(guò) Core Animation 引擎實(shí)現(xiàn)了圖形的實(shí)時(shí)繪制，這意味著不需要對(duì)任何交互效果做預(yù)處理，可以隨時(shí)看到動(dòng)畫(huà)的效果。

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

（看起來(lái)很屌，實(shí)際有待測(cè)試的）將動(dòng)畫(huà)集成至 App：通過(guò) KiteKit Framework，開(kāi)發(fā)者可以容易地將動(dòng)畫(huà)效果集成到 iOS 或 macOS 應(yīng)用中。具體文檔和示例可以參考：kitecomp/kitekit

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

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

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

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