编者注：为了让最终结果更接地气，这里修改了教程。很抱歉，由于风格相像，这里把主题的作者搞错了。

大家好，这是The Cream Creative，最近谷歌发布了新设计宣言——Material Design，其中强调了UI设计中的动效。这会进一步促进可交互动态原型的发展。作为动态设计师，很多时候很难将创意用文字或语言的形式讲给客户，而苹果的Quartz Composer结合Origami动画框架可以快速产生可交互原型，阐述童泰理念。

在这份教程中，我将解释如何使用Origami构建Flipboard概念原型，效果如下：

Flipboard设计概念来自雅虎天气应用，使用了视差滚动、高斯模糊、透明度变换等效果。

这是我们在QC中创建的一个Marco Patch，用来构建转场效果。

开始

首先创建一个Clear Patch

然后创建Layer Group和Phone Patch，Layer Group的Image输入到Phone的Screen Image

然后建立Phone Dimensions，Pixels Wide和Pixels High分别连接到Layer Group上对应的Port

双击Layer Group 宏模块.首先想要简历的是固定导航栏，可以将导航栏图像拖入到QC中（这里编者用的是Android手机模板，屏幕尺寸1280 x 720）

然后，再建立一个Layer Group和Layer，将Layer Group的Image输出到Layer 的Image上

双击Layer Group，进去后，在这里开始创作。首先拖入我们的Hero图像，这是我们进入应用后首先看到的头条信息，这个图像不动。

然后，我们添加可以滚动的那些图像,拖进QC后，建立Scroll Patch

用Scroll的Y Position连接Layer的Y Postion

图像的image接Scroll的image

（同时返回上一级，让导航栏的层级高于Layer Group的层级

另：我这张长图长1370px，屏幕尺寸1280px，因此上图上方我添加了1280px的透明区域，共长2650px，这是经验，想知道为什么，可以自己打开Scroll.qtz看看）

我们在刚打开应用时看到的鉴神那张图像，在滚动的时候效果有视差滚动、模糊、变黑等等。

视差滚动

我们先来处理视差滚动效果，创建Mathematical Expression，让首屏图像的滚动速度是图片流的0.45倍

我们可以先观测在初始点时scroll patch所输出的滚动量（在scroll所接的patch中按Cmd+2，观察对应Port的数值），我这里观察初始点的Scroll量是-685，所以公式为：

(a+685)*.45

你可以根据自己的情况优化公式

然后scroll的Y Position接Mathematical Expression的a

Mathematical Expression的result接首屏图像的Y Positon

效果：

变黑效果

建立Progress和Transition Patch。

然后如下图连线。

Progress patch开始0 结束200

Transition Patch开始1 结束0.7

意思就是滚动每增加200，透明度就降低0.3

查看视图，优化参数，获取你想要的结果。

效果：

模糊效果

原理同上，不过在图像和Layer之间，要加一个Gaussian Blur Patch

链接方法如下图：

Progress patch开始0 结束16

Transition Patch开始0 结束0.3

效果：

具体设计，具体参数，各位自行调节，以寻求最优效果(机器渣，模糊效果会很卡)

封面AE做了下，比较渣，见谅