Quartz Composer 如何入门?

关注者
3588
被浏览
194470

11 个回答

目前还在学习过程中,刚刚入门,忍不住还是写一篇我入门的节奏。

目前国内中文的教程还比较零星,大量的英文阅读压力还是挺大的,所以,我整理了一份适合英语水平一般的同学学习和进阶的教程,但是通篇的英文阅读肯定是逃不掉的,只能硬着头皮上了:
  1. 阅读这篇文章《次时代交互原型神器Origami档案》,算是相当基础的理论,看到后面肯定是云里雾里,没关系,大概读懂了就行,主要了解Origami的核心模块等。
  2. 阅读这篇实战性的文章《三分钟,Origami入门:构建一个iPhone弹性缩放动效》,同时结合第一篇文章理顺核心模块的定义和使用;这个过程关键是领会楼主的思路,尤其是作者总结出来的下面这张图对我影响很大,几乎绝大多数基础动画的实现都是基于这个思路和框架完成的;嗯,读完了之后,试着做脱稿做一遍。接着阅读《用 Quartz Composer 和 Origami 制作一个简单的按钮动画》,作者的设计思路和一些经验总结也是相当不错的;教你如何去思考,并且优雅的组织这些管道,有点代码规范的味道。
  3. 下载 Examples - Origami 上的四个样例,试着阅读管道链接的逻辑,你觉得你读懂了就行;然后我试着脱稿完成了这四个入门级别的样例的。
  4. 回头完整看了一遍 David O Brien 的 Facebook Home 视频教程,关键也是试着去理解 David 每一步操作的思路。
  5. 看了这么长时间别人做的样例,终于忍不住决定自己DIY一个...所以我借鉴了Tumblr 菜单做了一个,然后再此基础上又做了一些小创新,比如背景高斯模糊、旋转渐变出现等等;相当有成就感。
  6. 回头又去认真看了一遍《次时代交互原型神器Origami档案》;接着通篇大概阅读了下《Quartz Composer User Guide》,做到了对官方文档结构和目录的了解,方便后期遇到困难可以清楚的知道在哪里找到解决问题的办法

经历了上面的学习过程,应该已经算简单入门了,做些简单和常见的交互没有太大问题了,下面就是大量的实践和创新了。

另外,推荐阅读 MartinRGB的设计作品,他提供了大量高质量关于QC的翻译教程还有很多UI和UX方面的文章。扫了很久,发现国内只有M大神是专注这快的,当之无愧QC在国内的布道师,赞美!

而目前我的学习状态是:在网上找到所有我能够找到的.qtz文件(Dribbble Medium上有很多资源和教程...),直接照着viewer的交互动画脱稿临摹;意识到某个地方是难点或者新的知识点就去阅读源文件,结合《次时代交互原型神器Origami档案》和《Quartz Composer User Guide》立马熟悉和掌握那些第一次出现的模块使用方法,并配合Google随时稳固和强化知识结构。

最后,推荐一份老外整理的学习QC的入门轨迹教程。 wayfinder.co/pathways/5

更新:此文写于 Facebook Origami 诞生之前,当时用 Quartz Composer 还比较麻烦。Origami 让 Quartz Composer 易用性大大增强,上手更为容易,尤其是最新的 Origami 2,提供了详尽的教程和示例,基本上把官网(Origami — Design Prototyping)上所有页面的内容都认真学习一遍就可以入门了,剩下的就是自己通过练习来上手。

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

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

在 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 不熟悉更常会用到)。

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

我是这样上手的

1. 简单了解 Quartz Composer。QCDesigners 上有比较简要的介绍:QC Designers,或者过一遍苹果的 Quartz Composer User Guide :
developer.apple.com/lib

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

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」)

较复杂的 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 代码的想法也是不现实的。
为什么?