Quartz Composer:图形化的编程工具

01

Quartz Composer 是一款图形化的编程工具,专门用来生成各种动态视觉效果,包括可交互的界面原型。

Quartz Composer 的优势一来在于它生成的交互原型是可操作的,二来它能生成的动态效果灵活丰富,自由度相当高(它可以自定义曲线控制运动速度与轨迹),另外它虽然是编程工具,但基本不用写代码就可以实现生成动态效果与交互所需要的逻辑。(对于复杂的逻辑则可以通过 JavaScript 实现)

02

在 Quartz Composer 中可以通过 Timeline Patch 来自定义动态变化的轨迹。

与 Quartz Composer 对比起来,After Effects 等工具制作的交互演示动画是不可操作的,开发者仅看一段设定好的动画理解起来可能会有障碍。HTML/CSS/JS 实现的交互原型可操作,但动画效果不如 QC 丰富灵活,另外写代码经常需要除 bug,也增加了时间成本。(因此不需交互的动画就别用 QC 来做了,用 QC 来实现动画效果某种程度上相当于用代码把动画效果写出来,效率自然不如 AE 高。同理,如果熟悉 HTML/CSS 的话,用于网页的 CSS 动画也没必要用 QC 来设计)

简单来说可以把 Quartz Composer 想象成图形化的 jQuery,我们只需把封装好的代码模块(patch)组装起来,设好参数,便能生成各种动态效果。由于是个编程工具,入门 Quartz Composer 需要点编程基础,最好会写 JavaScript 方便实现复杂的逻辑(初期对各种 patch 不熟悉更常会用到)。

03

Quartz Composer 的基本原理就是把各种封装好的代码模块拼接起来。

我是这样上手的:

1. 简单了解 Quartz Composer。QCDesigners 上有比较简要的介绍:QC Designers,或者过一遍苹果的 Quartz Composer User Guide :
https://developer.apple.com/library/mac/documentation/GraphicsImaging/Conceptual/QuartzComposerUserGuide/QuartzComposerUserGuide.pdf

2. 完整地看了 David O Brien 的 Facebook Home 视频教程,并下载源文件研究了一遍。需注意他的教程是现学现卖的,有的地方实现的方法不太优雅,但不碍于了解 Quartz Composer 的运作方式与制作流程。
https://vimeo.com/channels/fbhomeqc
http://www.youtube.com/user/oledaveoh/videos

3. 浏览 Branch 上的讨论:quartz composer,其中 Facebook 设计师 Brandon Walkin 提供的示例文件非常值得参考。

4. 上面 Branch 讨论中还有个示例文件是相当好的,里面的注释非常完善,认真地过一遍就基本会用 Quartz Composer 了。
Dropbox – Quartz Composer iPhone Screen Tutorial

5. 自己尝试制作 Quartz Composition,了解基本 patch 的原理和运作方式。所有 patch 在 app 中都有说明,有的 patch 还带有 example 链接(如下图)。有精力的话建议把 QC 内自带的所有 example 找出来仔细研究,苹果自己的例子是最好的。它们藏在 /Applications/Quartz Composer.app/Contents/Resources/Examples/Patches(找到 Quartz Composer.app 点右键,选择「Show Package Content」)

04

较复杂的 patch 会自带实例。

6. 设计师 Hans van de Bruggen 建立了 QCDesigners 论坛,是目前最集中的 QC 讨论区。他还开发了插件集 jQC,尝试让交互原型的制作流程更轻松简单。因为 jQC 附带了详细的实例,所以是很好的自学素材,目前最新版本是 0.8:QC Designers

7. 这时 Quartz Composer 应该基本上手了,接下来主要靠自己在制作交互原型中学习和摸索了。

另外我之前在 Dribbble 上分享了个 Quartz 文件,展示了 iOS 7 的几个动态效果,也可以参考:
Dribbble – iOS 7 Chat View Interaction (Animation and Freebie) by Neway Lau

注:目前 Quartz 文件只能在 Mac 下运行,有人在 iOS 上模拟 Quartz Composer 环境(Quartz Composer for iOS),但开发仍处于初级阶段。另外把 QC 做出的动态效果直接移植成 iOS 代码的想法也是不现实的。

官方网站:http://quartzcomposer.com/

1 2 收藏

资源整理者简介:小小-1128

简介还没来得及写 :) 个人主页 · 贡献了3个资源


直接登录

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1439 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer