新晋神器！超厉害的原型设计新玩具Kite Compositor 深度测评

随着前几年可交互设计软件一番大战之后，很多红极一时的产品都由于各种原因慢慢淡出了设计师们的视野：

主打 H5 的 Hype 好像慢慢没声音了、Pixate 被 Google 收购之后不久就宣告死亡、同是 Google 家的 Form 也没有做起来、Facebook 的 Origami 更新到了 2.0 但至少在国内没什么市场。

目前，抛开 AE、C4D 这种更为专业的视频类软件不谈，市面上最火的三个动效原型制作工具分别是 Principle、Flinto 和 Framer Studio。关于他们的优缺点网上足够多了，我也不再多说。

今天要聊的是这两天慢慢在设计圈扩散的一个新玩具 —— Kite Compositor。没错，又是一款可交互原型动效设计软件，Only for Mac and iOS。

先从我的主观感受向大家介绍一下新朋友。

一言以蔽之，对这款工具的第一印象是：在单一的页面里通过时间轴的方式实现各种各样的动画，同时也支持 Javascript 手动编写代码来达到更高自由度的效果。

工具自身的交互模式上，更类似于一个单画板的 Principle 与 Framer 相结合。这注定了首先上手门槛不会很高，但又允许了解 Coding 的设计师进一步挖掘工具的潜力。

常规的图层可操作属性如尺寸、位置、颜色、透明度等都支持，比较特别的是还支持高斯模糊、阴影，尤其对阴影的原生操纵感觉还不错。

至少不用像 Principle 一样要自己切个阴影图贴进去；另外，还可以直接用画笔编辑图层形状。

常规的动画过程如设置开始结束时间、速度和动效曲线（Curve）等都有，比较特别的是它在位移上支持自由绘制路径动画。

这意味着你可以很容易地实现物体的曲线运动，而这在很多竞品中是没有的。

交互方式上，常规的点击、滑动、长按都支持，此外还支持键盘按键监控、鼠标监控。

多媒体和扩展性上，支持视频和GIF导出，也支持 Sketch 图层导入。

像 Framer 一样，Sketch 导入的图层是可编辑的，不像 Principle 只是变成一张图片。

大家比较关心的设计导出代码部分。

首先 Kite 可以通过自带的一个框架（kitekit）将动画直接集成到 App 中，听起来非常美好，所以明天上班打算和开发哥哥试一试。

另外， Kite 也支持直接导出 iOS 原生的动画参数代码，看示例感觉具体效果和 Origami 差不多，也就是能表达参数、属性，但是不能表达动画逻辑。

别的就不多说了，直接看我翻译的官方宣传文档，我把哪些特性没啥特别的，哪些特性挺牛逼的标注出来，然后大家玩玩看吧。

（挺牛逼的）路径编辑：通过画笔工具，设计师可以绘制动画路径，还可以编辑图层形状。

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

（谁都应该做到的）灵活的界面：易于上手但足够强大的界面可以帮助你处理各种设计需求。

（大概是个噱头）支持 Touchbar：通过新款 Mac 的 Touchbar 功能，可以在不使用鼠标的前提下方便地切换工具、控制时间轴等。

（很棒的）时间轴：灵活智能的内置时间轴功能让设计师可以自由地操纵、编辑动画关键帧，并精细地调整动画时间。

（还不错但有点复杂的）编辑器（Inspector）：一个强大的对象编辑器让你通过短短几次点击设置颜色、调整动画曲线或为图片添加滤镜。

（挺方便直观的）丰富的动画和图层库：可以直接拖动图层、动画或交互到画板中，还可以将常用的模块组件化后添加到库里，便于反复调用。

（没啥的）Mac 上设计，iOS 上查看：下载 Kit Compositer for iOS 之后，就可以在 iOS 设备上查看原生动画效果了。

（还不错的）Sketch 素材导入：轻松地从 Sketch 中导入可编辑的图层和素材（主要是文字和路径）。

（理所应当的）导出：可以将设计导出为视频或GIF文件。

（挺牛逼的）脚本：通过内置的 JavaScript 脚本引擎可以实现复杂的动画和交互，内置了 JS 控制台，可以以代码的方式快速设置动画、添加图层或改变属性等等。

（还不错，Principle 也是的）原生动画引擎：所有动画都基于 Apple 的原生动画技术 Core Animation，这保证了动画效果在设备上运行时的高帧率。

（没啥的）实时绘制：不像其他应用，Kite 通过 Core Animation 引擎实现了图形的实时绘制，这意味着不需要对任何交互效果做预处理，可以随时看到动画的效果。

（一般般的）扩展性：Kite 文件将数据扁平化存储，可以非常简单地修改其中的属性、数据等。同时，它也非常易于解析为 JSON 文件，供其他应用程序调用。

（看起来很屌，实际有待测试的）将动画集成至 App：通过 KiteKit Framework，开发者可以容易地将动画效果集成到 iOS 或 macOS 应用中。具体文档和示例可以参考：kitecomp/kitekit

（还可以的）丰富的模板：如下图所示，我们还提供了丰富的内建模板。

（很可能沦为鸡肋的）方便地将设计转化为代码：动效设计师可以精确地将动画曲线、持续时间、弹性动画和位置等等参数描述给工程师。Kite 中所用的参数与 iOS 或 macOS 代码中的参数一致。

（人人都有的）动画曲线编辑：除了给出常用的曲线外，也支持非常细节地调整。

（降低上手难度的）内建帮助系统：搞不懂怎么用的时候可以快速地调用内置的帮助功能。

这东西卖99刀，支持免费试用一段时间，文档也比较齐全。

自家官网也有很多 Showcase，帮助大家下载学习。

就这样啦，下载和官网：Kite Compositor

「新晋神器推荐」

1. 可能是最简单的3D建模软件PROJECT FELIX
2. 超全面！新晋设计神器FIGMA 深度评测
3. 这款图标神器，让你体验用完即走的畅快感

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量190万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com