早在推出 Home时，引起了很多设计师关注的强大原型工具Quartz Composer（简称QC）。这款工具无需编写代码，即可创造出精致且丰富的动画效果，给人留下了深刻的印象。和许多设计师一样，当时我也立志要学习这个强大的工具。虽然开始参考教学视频摸索，甚至尝试阅读Quartz Composer的官方指南来翻译学习，但我发现学习过程并非想象中那么简单。由于学习进展缓慢，我一直在寻找更好的学习方法和资源。
直到推出了Paper，并伴随着Origami这个插件的出现，QC的学习门槛瞬间降低了很多。我终于感觉自己开始入门了！特别是与Sketch软件的结合使用，制作原型真的方便了很多。为了分享我的学习心得，帮助更多零基础的同学入门Origami，我整理了一份入门篇文档。欢迎同样在研究Origami的同学一起探讨，如果有任何不对的地方，非常欢迎指正。
一、基本概念
首先来了解一下Quartz Composer中的“模块”（patch）。模块是QC里面最基本的元素，不同的模块实现不同的功能。要搭建一个原型，实际上就是把不同的模块像搭积木一样按照逻辑拼装起来。
模块大致可以分为两类：圆角和方角。圆角模块是最常见的，而方角的模块则被称为“宏”（Macro），双击可以进入详细编辑（我把它理解为文件夹）。模块之间还有颜色的区别，蓝色的模块是输出模块，在画布中可见；黑色模块是最常见的状态；紫色模块表示模块内部还有其他子模块。
模块与模块之间通过连线进行拼接，每个模块的左侧是输入接口，右侧是输出接口。通过将A模块的右侧输出点连接到B模块的左侧输入点，就可以将A模块的结果输出到B模块。
二、基本逻辑
每个动画首先有一个交互触发动作，然后通过一个开关来控制一个动作的两种状态。这两种状态对应着变换的两个数值，最终表现在图层上。数值变化前，可以通过添加一个弹性动画来控制动效。
以下是一个简单的图片放大缩小的例子：只需在数值变化的地方给图片大小设置一个初始值和结束值，就可以实现点击图片进行放大缩小的效果。
三、小试牛刀
在掌握了基本概念和基本逻辑之后，就可以开始动手试试了。首先新建一个Origami文件，会弹出左右两个窗口。左侧的patch可以控制右侧手机的样子、横屏还是竖屏等等，这是一个方角的宏（Macro）patch，双击它可以放入我们想要设计的内容。蓝色的patch是显示层。
四、Demo展示
按照开发教程的习惯，我们先来做一个“Hello Origami”的demo。通过编辑界面内的Fill Layer设置背景，然后输入Text Layer来添加文字。接下来，我们试着让案例交互起来，做一个点击窗口后文案颜色和背景颜色互换的demo。通过连接Color Transition、Switch等patch来实现颜色的切换效果，再通过Pop Animation来添加过渡效果。最后通过调整anchor point和单位等概念来完善动画的细节。
五、常用patch分类与快捷键
除了基础的显示类和交互触发类patch外，还有其他一些常用的patch类型如交互响应类等。这里也分享了一些常用快捷键来提高操作效率。特别值得一提的是Live Image这个patch可以在Sketch中自动切图并在Origami中使用，极大地提高了效率。另外据说Origami还可以一键导出代码给开发使用这也是一大亮点所在。这对于那些既想要利用Sketch进行设计又希望通过Origami实现交互效果的开发者来说无疑是一大！最后作者还分享了一些对他帮助最大的网址表示感谢！这份文档很多内容也参考了他们的工作成果！感谢他们的贡献！同时作者也分享了一些附录内容如附录案例等供读者参考学习！希望这份入门篇文档能够帮助更多的零基础同学顺利入门Origami并掌握这项技能！如有需要可以共同探讨指正交流分享经验成果等等感谢大家的时间与阅读支持！同时我也希望这份文档能够帮助到大家更好地理解Quartz Composer这一强大的原型设计工具并掌握其使用方法从而为自己的设计工作带来更多的可能性与创造力！同时在此特别推荐下文中的其他教程及文章它们能够帮助大家更好地理解和运用Origami从而为个人或团队带来更高效的工作流程和更出色的设计成果！
