Origami入门教程5-视频2：Collapsible Navigation Bar

在本节的视频Rooms Part 1：Collapsible Navigation Bar里，我们将学习如何制作由Facebook出品的《Rooms》App里的可折叠导航栏效果。要实现的具体效果为：当向上滑动的页面的时候，导航栏向上变小，两侧的图标消失；当向下滑动的时候，导航栏向下拉大，两侧的图标重新出现。

现在，我们打开Quartz Composer。左上角File-New Origami File。在上方工具栏选择Window-Resize to Thirds，使Editor和Viewer一左一右整齐地排列显示。双击Layer Group，进入后开始编辑图片素材。下载Origami入门教程5材料，提取密码: umn5。先把里面App的主体图片Feed.png拖到文档中，再把导航栏图片Nav Bar.png拖到文档里。导航栏图片的位置应该处于顶部中间，双击Anchor Point属性右边的值，在出现的列表里选择“Top Center”，导航栏就自动地调整好了它的位置。

添加导航栏图片.png

接下来把Plus.png这个添加按钮拖到文档里，它应该处于屏幕画面的右下角。对准X Position右边的数值“0”，长按后，会变成可左右拖动图标，向左拖动可以减小数值，向右拖动则是增大数值。我们可以通过这种方法快速地改变数值。同时，对Y Position也做类似的调整，把这个添加按钮调到右下角。

调整添加按钮.png

Make it Scroll（让Feed画面滚动）

要使画面可以上下滚动，我们需要使用Scroll模块。按下Command+回车,打开Patch Library即可搜索得到。找到后，按下回车，添加Scroll模块。把Feed的Image端口插入到Scroll模块的Image作为输入，然后把Scroll的Y Position插入到用于显示Feed图片的Layer的Y Position。此时，你会发现，右边的手机屏幕可以滚动了。

添加滚动效果.png

继续在屏幕往上滚动至底部，会发现下面是黑色的，这是因为Fill Layer的填充颜色是黑色。长按Color属性右边的“Black”，然后长按着往左滑动，直接到变成“White”，就把Fill Layer改成白色了。

Start Collapsing（开始进行折叠）

现在，我们开始尝试把导航栏折叠起来。思路是：首先判断首页信息流是否往上滚动了32px->如果是，则输出数值1->用Transition把1转化为把导航栏缩短32px。初学的朋友可以先跳过这个思路，等到学习完毕再回头思考时，再慢慢理会这里的含义。

当往上滚动时，导航栏缩短32px，同时两边的图标也折叠消失了。所以，需要考虑的是，当往上滚动32px时，从目前所在的位置到将滚动到的位置的进程。为了解决这个问题，需要使用Progress（进度）模块。添加Progress的步骤就不再赘述了。

Progress是和Transition功能相反的一个模块。它的输入是一定范围内的数值，并输出代表着在由Start Value和End Value所定义的某个范围内数值的进度，这个输出的数值在0-1的范围内。具体来说，若Value设为v，Start Value设为s，End Value设为e，输出当前的Progress设为x，则x=（v-s）/（e-s）。实际上，可以把Start Value看作是最小值，End Value则为最大值，输入的Value可以调节由这2个值所决定的范围。输出的Progress则是在0到1之间的数值，描述了在最小值和最大值之间距离的百分比。

听上去有点复杂，我们直接来看例子。把Scroll的Y Position插到Progress的Value端口。把鼠标移到Scroll的Y Position停下，会看到数值是-383，也就是Progress的Value输入的数值是-383。Start Value则是Layer的Y Position目前的值，这里也是-383。因为需要知道在什么时候往上滚动了32px，所以End Value设成-383+32。结合公式x=（v-s）/（e-s）来看一下，当在目前不动的时候，因为v=s，Progress的输出是x=0，当往上滚动了32px后，v也变成了-383+32，所以v和e相同，Progress的输出是x=1。

设置进度模块.png

接下来，利用这个来改变导航栏的高度。如果直接用导航栏的Height属性，会把导航栏图片压扁。而我们想要的是如何能裁剪图片。为了做到这点，把导航栏图片放到Layer Group里。把光标对准Nav Bar的Image，按下键盘“g”，就会把它放到了Layer Group里。双击Layer Group，会发现里面有Nav Bar的Image。可以看到，Nav Bar的高度是128px。我们希望它有动画，能变成128-32px。回想一下之前学过的模块，应该引入Transition来完成。

把光标悬停在Layer Group的Pixels Height端口，按下键盘“t”，即可添加连接到这个端口的Transition模块。当Transition的Progress为0，应该是目前的高度128px，所以Start Value是128px。当Transition的Progress为1，为了最后的输出是128-32，按之前的公式，s+p*（e-s）=128+1*\（e-128）=128-32，显然，e=128-32。所以End Value应该设成128-32。

设置完毕后，我们的直观感觉自然是把Progress输出端口和Transition模块的输入端口相连，马上来试试看。

连接进度和过渡模块.png

在手机屏幕向上滚动，发现导航栏图片的高度会不断减小，我们只是希望折叠32px。这显然不是我们想要的效果。这是为什么呢？仔细观察一下，向上滚动到一定程度的时候，Transition模块的输入口Progress数值超过1了。虽然只想把导航栏折叠32px，但如果数值不在0-1之间，就会超过32px了。为了保证数值在0-1之间，我们引入range（范围）模块。添加成功后，把Progress的输出端口插到Range的Value，把Range的Value插到Transition的输入口Progress。

添加范围模块.png

此时，再向上滚动屏幕，导航栏的高度只会折叠32px就不再减小，有点接近我们想要的效果了。唯一的小问题是，状态栏在向上滚到顶部的时候，会有部分离开了屏幕，没有显示出来 。可以通过进入Layer Group来修复这个问题。双击Layer Group，进入后，可以看到Layer的Anchor Point（锚点）是Center。什么是锚点呢？就是在定位图层时相对的那个在图层容器里的点。锚点是Center的话，导航栏图片无论怎样都会把自己相对定位到Layer Group的中心，所以往上滚动的时候，它会有部分直接滚到顶部以上去了。只需要把锚点改为“Top Center”，这个问题就解决了。现在，状态栏将一直在顶部，往上滚动导航栏也会折叠32px。

改变锚点.png

Animating Nav Bar Content（对导航栏内容进行动画处理）

接下来，我们先给导航栏增加内容，然后对它两边的图标进行动画处理。
把课程最后附件材料里的Title图片拖进Layer Group的里面，稍微调整一下这个图片对应Layer的Y Position， 使它在导航栏内基本居中。再把关闭按钮拖进来，把它对应Layer的锚点改为“Bottom Left”。然后添加更多按钮，把它对应Layer的锚点改为“Bottom Right”。

添加导航栏内容.png

这时，向上滚动手机屏幕，会发现导航栏两侧的图标覆盖了状态栏。我们实际想要的效果是，两侧的图标随着导航栏的折叠，逐渐地消失。为了达到这个效果，我们需要把外面对进度数值有限制的Range模块，接到这两个图标的Opacity（不透明度）端口，以控制它们的显示。

把Range的Clipped Value端口拉到Layer Group内部然后松手，就能增加它作为Layer Group的输入，我们把其命名为“Collapse Progress”。

增加折叠进度.png

双击Layer Group进入，可以看到Collapse Progress模块。把它插到两个图标Layer的Opacity端口，会发现，默认不显示导航栏的两侧图标，只有向上滚动才会显示，这跟我们想实现的效果刚好相反。把光标悬停在Collapse Progress，点击键盘“r”，就会添加Reverse Progress模块，它会帮助我们把效果再反过来。现在再往上滚动，导航栏两侧的图标就会逐渐消失，往下滚动，又会逐渐出现了，非常完美。

添加相反进度模块.png

接着，就是随着往上滚动，把标题变小。显然，应该对标题对应Layer的Scale属性作文章。因为Scale应该不是单纯的0或1，那么怎么才能把Collapse Progress的输出与Layer的Scale联系起来呢？当然是引入Transition模块。把光标悬停在Layer的Scale处，按下键盘“t”，添加Transition。把Collapse Progress的输出口插到Transition的Progress输入口处。此时会发现，当导航栏没有折叠时，Transition的Progress输入大致为0，折叠了之后数值大致为1。而我们希望是导航栏没有折叠时，标题的Scale较大，折叠了之后自然是Scale变小。所以回顾公式，输出为s+p*（e-s）（此公式请背得滚瓜烂熟），p为0时，输出需要是1，所以s为1；p为1时，输出比1小，所以e要比s也就是1小。可以直接在文档里调节e的数值，直到觉得效果不错为止。现在调到0.88，顺便把Y Position调到-13，效果还可以。终于大功告成啦！

调整标题的大小.png

总结

本次课程里，有两点需要加深了解：

• Progress模块：我们讲过，它的作用跟Transition的作用刚好相反，用最浅显易懂的方式来讲，Transition模块是用来把0和1数值变成各种其他数值的，而Progress模块则是把各种其他数值变回0和1。有时得到的数值超出了0-1的范围怎么办？使用Range模块把这个范围缩小到0-1之间。
• Transition模块的输入若为0，输出就是Star Value；输入若为1，输出就是End Value。而对于Progress模块，当它输入的值为Star Value，输出为0；输入的值为End Value，输出则为1。请熟记这点，这样就可以非常快速地设置它们对应的数值。
• Layer Group：它是宏模块，说白了就是里面可以有多个子模块，它的作用是将若干个子模块的输出渲染到同一张图片里。为什么我们要使用Layer Group呢？在本节课中，因为我们需要同时处理导航栏、里面的标题、两侧的图标，这么多的子模块需要同时处理并显示的时候，就需要使用到它。

学习材料

Origami入门教程5学习材料，提取密码: umn5。这是本节课的图片素材和我自己制作的QTZ文件，有兴趣的朋友可以自行下载，再自己跟着教程步骤亲自做一遍，一定受益匪浅。