早在推出Home之际，想必强大的原型工具便映入诸多设计师眼帘，无需进行代码编写便能输出细腻且丰富多彩的动画，这实在是太厉害了，和众人相同，那时我也信誓旦旦立志要学会这个东西，于是着手参考教学视频展开摸索，甚至怀揣着翻译的想法，然而发现并非这般容易。于是学习QC这事便一直处于搁置状态，直至又推出了Paper，有了这个插件，QC的门槛顿时降低了许多，终于，感觉自己入门了！特别是跟联动，进行demo着实便利了不少。在此依据自身理解参照各类资料的归纳对梳理出了一份入门篇文档，确实能够助力零基础的同学入门，诚挚欢迎同样在钻研的同学一块儿探讨，若有错误之处恳请指正~。

基本概念

开始先说一下那个被称作“模块”（patch）的东西，模块属于 QC 里面最为基础的元素，各种各样不同的模块会达成不一样的功能，若要构建一个原型，实际上就是将不同的模块依照逻辑如同搭建积木那般进行拼装的一个过程。

模块可以简单区分为这样两类：圆角和方角。

圆角作为最为平常普通的模块，方角的模块被称作“宏”（Macro）那种，能够通过双击进入详细编辑的状态，（我将它理解成类似于文件夹的存在）。

模块存在颜色方面的差异，蓝色的模块属于输出类型，它于画布中能够被察觉，黑色的模块呈现为最为常见的状态，紫色的模块意味着模块内部存有别的子模块。

模块与模块之间，是以连线的形式进行拼接的，模块的左侧部分是输入接口，右侧部分是输出接口，把A模块右侧的输出点连接至B模块左侧的输入点，如此便能将A模块的结果输出至B模块。

基本逻辑

这位朋友，在一篇文章里分享了这个模型，这模型，我觉着特别到位，基本上每一条操作，都是如此这般的执行逻辑。

对于每个动画而言，最初存在一个交互触发动作，接着借助一个开关去操控一个动作的两种状态，这两种状态会对应变换两个数值，随后呈现在层上，并且在数值变化之前还会额外有一个弹性动画来把控动效。

以下呈现的是最为简易的那种图片放大缩小的示例，于数值产生变化的地方给予图片大小一个起始数值以及结束数值，如此便能够轻易地达成点击图片时放大缩小的那种效果了~~~~

小试牛刀

搞清楚基本概念和基本逻辑之后，就可以上手试试了。

我们先新建一个 file。

如下所示的图，会弹出两个窗口，一个在左一个在右，这属于默认的文件种类，据此也能够看出是为移动用途而产生的~ 第一个patch能够对右侧手机的样式进行控制，是横屏还是竖屏等情况，第二个patch呈现方角形状，即上述所提到的宏（Macro），双击它就能把我们想要设计的内容放置到手机当中去。第三个patch是具备蓝色的显示层。

当中每一个patch，能够通过双击这种方式去修改名字，在后续内容增多的情形下googie sketch up80，将名字起好这件事变得极其重要，能够见到每一个patch都拥有自身的输入以及输出参数，可以对其全部进行调整，尝试一下所展现出的效果~~~

处于窗口之际，存在诸多应用起来极为称手的快捷键能够用以对展示样式作出调整，举例而言，每逢我都会极为熟地去除拿着手机的那只手，于窗口处于激活之状态时，通过在键盘之上键入H，便得以把手去除掉，借助键盘键入=/-能够切换背景样式，凭借键盘键入F能够进行全屏展示，从而将手机框予以去除。

Demo1. Hello

我们先来做一个“Hello ”的演示示例，这是依照开发教程里最为习惯性的那种做法来进行的。

反复快速点击Layer Group，从而进而能够进入到界面容器之内的编辑状态，在此处存在着一个已然存在的patch它属于Fill Layer，这是一种用于填充的图层，其作用是专门用来进行背景方面的设置。

于编辑区域当中，当通过键盘输入T时，便出现了一个Text Layer。在此说明一下，能够调出所有patch库的快捷键是“ + enter”。（请称呼我为快捷键瘾君子~）

能瞧见区域已然有“text”呈现了，选定Text Layer 按下“+1”，能够呼出此layer的设置选项，便能够随意去调整尝试着看看了，我们于Text项当中写入“Hello ”，就达成Demo1啦~~~

Demo2，可交互的

后续我们要试着促使案例相互产生交互举动，去制作一个在点击窗口时，能够让文案颜色与背景颜色进行互换的演示示例。

于编辑窗口处，通过键盘输入I，则能够瞅见呈现出一个呈紫色之patch，此为一个涉及交互指令的patch，其进行交互指令的输出，down乃是鼠标处于按下的状态，up即为鼠标的单击状态，tap表示触碰，drag的意思是拖拽（暂且在此提及一下，当从手机进行操作之际，感觉up与tap是相同的，对此我也略有不解）。

于编辑窗口之中，按键输入“ + enter”，从而呼出Patch ，接着输入Color ，实际上仅看名字你们理应就明晰这究竟是个什么物件，没错就是该东西用于切换颜色。而后又于编辑窗口内，按键输入“shift + S”，进而获取patch，这乃是一个开关。

接连数个patch，我们便能切换Hello的颜色，以同样的办法，将背景同步切换一番，Demo2大功告成~~~~

以和切换颜色相同的道理而言，我们能够运用切换文本的大小。于Layer当中，scale乃是控制大小的元素，其按百分比进行变化，1代表100%，依此类推。在这个时候，你或许会觉得切换效果欠缺柔和度，显得很生硬，在编辑窗口那里，通过键盘输入A，会出现一个Pop，这是一种动画过渡的效果，把这个patch放置在颜色变化之前，便会产生过渡效果啦~~~~

如下图，就出来一个最简单的闪屏感觉的动画。

一些概念

关于坐标

于其中，每一个patch的point，其默认状态处于画布中心（0，0），我们能够针对每一个patch去定义它的point，举例来讲，倘若想要一个元素处于左上角，则能够设置它的point为top left，接着设置它占据的位于左上角的位置被设定为（100， - 100），像这样，便能够获取到一个距离顶部以及左边缘各自为100的位置。

关于单位

在哪里面，width、、通通都是以什么为单位呢；而和scale是百分制的情况，0这个数值到1这个数值分别对应的是0以及100%呀。

常用patch

此部分同样参照了网友的智慧，将它们依据类型进行较为简易的归类，显得颇为清晰。

显示类

交互触发类

交互响应类

其他

常用快捷键

大招来了 +

当中googie sketch up80，倘若对文件名称予以规范命名，那么就能借助插件自动切图，紧接着在其中，全部的图均可运用Live Image这个patch予以承载，如此一来，当你着手调整图片之际，运用快捷键”shift + + + o”，便能够一键同步到你的动态demo当中。

终极武器

你能够讲上述内容实际上我们均能够借由PS加上AE予以达成，但具备一个终极缘由促使你运用它去制作动画，那便是导出代码。

因为QC原本就是Xcode里面的一个可视化程序，所以它的运行逻辑实际上跟代码是一样的，做了一件事情是能够直达一键导出代码，听说能够让开发GG直接去使用！这个我也还没有去尝试过，假若真的能够很便利地导出代码直接给到开发去用，那么又能够省掉一个环节从而提高效率~

下图的案例是简单做了一个QQ音乐里面播放页弹出的动效~

附录

以下是那几个对我有着极大帮助的网址，这份文档之中诸多内容也都参照了它们，真的是万分感谢~~~

如有侵权请联系删除！