origami 模块信息
显示类
图层（Layer）是一个显示类模块。它能在屏幕上生成一个矩形，可以调整它的长宽，绕X、Y、Z轴的旋转角度，叠加在上面的图片和遮罩图片，设置这个矩形的颜色、透明度和缩放等。如果要在画布上添加一个图片层，只需要将图片拖拽到画布上即可，Origami会自动将图片与一个图层连接好。
文字图层（Text Layer）是一个显示类模块。它让指定的文字显示在屏幕上。可以在左侧输入端口调整文字内容、字体、字号、位置、长宽、颜色、透明度等属性。
填充图层（Fill Layer）也是显示类模块。它的作用是生成一个全屏幕大小的颜色填充层，可以设置填充色和透明度。
图层组（Layer Group）是一个宏模块。它的作用是将若干模块的输出合并成一个图片，以便输入到其他拥有图片输入接口的模块中。上文的Hello Origami样例中，我们就用到了图层组模块来搭建手机屏幕的内容输出容器。
手机（Phone）是一个显示类模块。它可以将Screen Image输入端口的图片显示在一个手机的屏幕中，它会根据图片的长宽比自动调节手机是横放还是竖放。
手机尺寸（Phone Dimensions）是个普通模块。它的作用是输出手机屏幕的长和宽。输入端口可以选择手机类型：iPhone、Android、Windows Phone、iPad，以及旋转方向。输出端口自动生成对应的屏幕长宽数值，然后就可以将长和宽分别连接到图层组对应的输入模块。
交互触发类
交互2号（Interaction 2），之所以叫“2号”，是因为QC中本身就有一个“交互1号”的模块，Origami的开发者为了让这个交互模块更加适合移动开发，对它进行了再次封装，于是变成了交互2号。交互模块的使用比较特别，它的右上角有一个特殊的端口，将它连接到可交互的模块的左上角（比如按钮模块），它俩就形成了关联，对按钮进行的操作就会在交互2号的对应输出接口产生信号。交互2号的输出口含义：Down—鼠标按下；Click—鼠标点击；Tap—鼠标轻拍；Drag—拖动鼠标。点击和轻拍的判定区别是：轻拍要求按下的点和松开的点必须在同一个位置，即鼠标不移动；而点击只需要按下点和送开点都在控件内部即可。
按钮（Button）。将交互2号与按钮进行连接：交互2号右上角的接口连接到按钮左上角的接口。比如我们想让按钮被按下的时候，背景变成鲜红色：添加一个填充图层到画布上，注意将填充图层放在按钮的下方（提示：显示类模块右上角的数字），将填充图层的Color接口设置成红色，然后将交互2号的Down输出口连接到填充图层的Enable输入口。
滚动（Scroll）。用来实现iOS中的滚动视图，可以模拟网页、地图等边缘带有弹性反馈的滚动效果。滚动和交互2号一样，需要将右上角的端口连接到可交互模块的左上角。比如用一个网页截图来模拟滚动效果：第一步，打开Photoshop快速制作一张640×2000的图，在上面填满文字以便识别，保存后拖拽图片到QC的画布上；第二步，将滚动模块与图层进行交互连接，然后将图片的Image接口连接到滚动模块的Image输入口，以便滚动模块获取图片的长宽属性；第三步，把滚动模块的Y Position连接到Layer的Y Position上，如果需要制作地图样式，XY都可以滚动的话，只需把X Position也连上就可以了。
点击区（Hit Area）。在屏幕上生成一个点击热区，用来承载用户对这个热区进行交互操作。比如你做了一个界面，上面有四个按钮，不需要把四个按钮单独切图后放置在图层模块进行交互，只需使用四个点击区就可以了。点击区有一个设置模式（Setup Mode），当设置为True时，点击区会显示为透明的红色，以便你看到它们；在原型做好以后就可以把它设置为False隐藏。
计时器（Timer）。通过Turn On接口激活计时器，Duration设置持续时间，输出接口Time就会连续地输出当前流逝的时间，当时间到以后，Time输出口会置零，Done输出口会变成True。该模块可以用来实现让一个对话框在屏幕上显示若干时间然后消失的功能。
计数器2号（Counter 2）。它的功能是输出一个数字，当输入口发生跳变（从False到True）时，输出也会发生变化。输入口有：Increase、Decrease、Jump三类，Increase口每次跳变会让输出增加1，Decrease减小1，Jump的跳变则会让数字跳转成为Jump To所指定的数字。还有Maximum Count输入口用来指定输出数字的范围。计数器2号可以方便地用来做递增递减操作，用来实现for循环。
交互响应类
开关（Switch）。开关是一个对真假状态进行变化的模块：Flip输入口每次从False到True的跳变都会让输出口的真假状态发生变化，Turn On和Turn Off口分别将输出口状态置为True和False。
弹性动画（Bouncy Animation）。当输入口Number的数字发生变化时，输出口Progress的数字也会随着发生变化，这种变化的函数关系是具有“弹性”的：即Progress的数字变化总是比Number慢那么一点点，而且当Number骤停时，Progress也会在这个数字来回摆动几下最终停下来。有两个属性可以调节：摩擦系数（Friction）和弹簧松紧度（Tension）。摩擦系数越大，弹性动画就会表现得越“黏滞”，松紧度越大，弹性动画的回弹速度就会越快。这个模块的下游经常接上过渡模块，用来控制图像的弹性缩放或物体的弹性位移。
经典动画（Classic Animation）。输入/输出口与开关类似，不过两个输入属性不同。经典动画包含两个属性：持续时间（Duration）和运动曲线（Curve）。持续时间的作用不用多说，运动曲线分为5类：线性、二次方曲线、三次方曲线、指数曲线、正弦曲线。它们代表运动位移和时间之间的关系函数，交互设计师应该对这几种曲线非常熟悉。经典动画经常用来做iOS中的各种出入场动画，它们与iOS中的UIView动画是对应的。
索引开关（IndexSwitch）。左侧有若干输入口（输入口的数量可以在Patch Inspector中的设置面板中设定），右侧输出一个索引数。左侧第N个输入口发生了跳变，右侧就会输出数字N。这个模块经常用来制作App底部Tab的逻辑。
下面讲讲产生动画过程的4个模块，三个过渡和一个与之相反的模块。
过渡（Transition）。通过Progress输入口数字的变化，输出一个在Start Value和End Value之间的对应值。精准地描述是这样的：假设Progress为p，StartValue为s，End Value为e，那么输出值x=s+（e-s）*p。过渡在动画表现中非常重要，某个按钮点击触发0到1的跳变，通过过渡放大到开始值到结束值的变化，再对应到某个图层的位移或缩放上，即完成了一次交互触发到响应的过程。
颜色过渡（Color Transition）。和过渡类似，不过输出口变成了某个颜色，开始和结束值也变成颜色，可以通过Progress口控制两个颜色之间的连续变化。
图像过渡（Image Transition）。和颜色过渡类似，不过对象变成了图片。
进度（Progress）。进度是和过渡功能相反的一个模块。根据输入的Value（设为v），和Start Value（设为s）与End Value（设为e），判定并输出当前的Progress（设为x）。精确描述为：x=（v-s）/（e-s）。进度可以被用来中转两种过渡的关系：比如做一个亮点调节滑竿，将一个滑块的位移量对应到屏幕亮度上。
其他类
16进制颜色（Hex Color）。根据指定色值输出一个颜色，比如FFFFFF输出白色。
指针控制（Cursor Control）。可以改变指针的形状或隐藏指针。
浏览器（Browser Chrome）。将Viewer模拟成一个浏览器的样子，用来展示网站的原型（平时很少用到）。
速度（Velocity）。当输入口的数值发生变化时，输出口输出变化的值。比如输入口从12跳变成16时，Velocity会输出4。这个模块可用来检测速度，用来实现iOS 7通知中心面板那种“快速下拉再放手就展开，慢慢下拉松手就缩回去”这种效果。
评论