Origami入门教程6-视频3：Swipe-away Navigation

在本节的视频Rooms Part 2： Swipe-away Navigation里，我们将继续在上节课的基础上，学习制作由Facebook出品的《Rooms》App里的滑动页面效果。需要实现的具体效果是：点击首页信息流的海报，将从右往左滑动出详情页面，同时首页信息流变小且逐渐消失；在详情页面从左往右滑动，又能回到首页信息流，同时首页变大且逐渐出现。在首页时，也可以直接在右侧从右往左滑动出详情页面。

首先，请下载Origami入门教程6学习材料，提取密码: k3rf。继续打开上节课的QTZ文件，双击Layer Group进入后，添加Detail View图片，把详情页面先添加进去。想要实现滑动的效果，需要在Patch Library添加Swipe（滑动）模块。在Library搜索后，发现有2个Swipe，请选择属于Origami的那个模块。按下回车，添加进来。接着，把Swipe模块的Position输出口插到Detail View图片所对应的Layer的X Position。此时，就会发现，详情图片自动地往右滑动了一下。而且如果在详情页面从右往左滑动，会直接覆盖掉首页信息流。有些像我们要的效果了。

添加滑动模块.png

我们来仔细观察一下Swipe模块。Direction是X，所以横向滑动。End Position是600，还不太符合我们的要求，我们是希望滑动完成后右边不再出现其他页面，所以需要稍微调整一下，调到750就差不多了。

滑动效果出来了，接下来是实现从右往左滑动详情页面，首页变小且逐渐消失，反之首页变大且逐渐显示。首先，这是对首页的所有元素进行处理，所以自然最好先把这些模块全部放到一个Layer Group。先按下键盘“g”，创建Layer Group模块，然后选中首页信息流的所有模块，把它们剪切后，双击Layer Group进入，并粘贴到里面即可。不过这时会发现，右边Viewer的屏幕里没有任何显示了。返回到外层看一下，是因为Layer Group模块的Image输出口没有插到任何Layer模块上。把光标悬停在，Layer Group模块的Image，按下键盘“l”，添加Layer，即会把它们连接起来，现在屏幕就有显示了。

上下滚动屏幕，一切正常，不过从右往左滑动的时候，并没有出现详情页面。这是因为首页的Layer的在详情页面之上，把它覆盖了。把首页的Layer选成Layer2，就没问题了。

添加Layer.png

回忆一下上节课，控制画面是否显示是Opacity属性。把Swipe模块的Progress端口接到首对应Layer的Opacity端口，再尝试从右往左滑动出详情页面，发现此时首页会逐渐消失，如果从左往右滑动回到首页，首页又会逐渐显示，这就是我们想要的效果。

接下来，解决首页需要缩小或变大的问题，能不能把Swipe模块的Progress端口接到首对应Layer的Scale端口呢？你可以试一下，发现效果很夸张，Scalen改变得太大了。怎么办呢？马上应该想到使用Transition模块，来限制一下输出的数值。把鼠标悬停在Scale上，按下键盘“t”，添加Transition模块。把Swipe模块的Progress端口插到Transition的Progress端口。然后观察一下，当没有滑动出详情页面时，Transition的Progress的值是1，此时，s+1*（e-s）=1，还确定不了s和e的值。再看，当完全滑动出详情页面时，Progress的值大致为0，也就是s是当前首页的Scale值，我们不希望首页缩得太小，所以设为0.97即可。s确定了，也就是e-s=1-0.97，所以e为1。现在再左右滑动，效果就出来了。

添加过渡模块.png

现在，就剩下可以点击首页的大图滑动出详情页面的问题了。先把手机屏幕滑动回到首页，把Swipe的Jump to Start勾上，会发现详情页面自动从右往左滑动了进来，这就是点击后需要的效果。要点击，首先需要给首页的图片海报设置点击区域，同时，这个点击区域需要跟着一起滚动。显然，这个点击区域需要和Feed图片在一个Layer Group里才行。双击首页的Layer Group，把光标悬停在Feed图片上，按下键盘“g”，建立新的Layer Group。双击它进入里面，添加Hit Area模块。调节它的Y Position，以及Width、Height，使它完全覆盖住首页的大图。

添加点击区域.png

然后我们就可以考虑怎么把手势和点击区域联系起来了。之前用过Interaction2模块，这里讲一下它的特别之处。可以看到，它的右上角有一个特殊的端口，将它连接到可交互的模块的左上角（比如点击区域模块），两者就会产生关联，对点击区域进行的操作就会在交互2号的对应输出接口产生信号。就像是之前我们把Scroll或者Swipe跟某个Layer关联起来一样。把Interaction2模块的右上角端口插到Hit Area的左上角端口。

添加交互模块.png

然后，要想办法把Interaction2模块的Tap端口插到外面的Swipe的Jump to Start上。把光标悬停在Interaction2的Tap上，按下键盘“p”。返回到外层，发现其对应的Layer Group的输出口多了一个“Tap”。不过我们还需要再返回一层，同样的方法，再把光标悬停在输出口Tap上，按下键盘“p”。再返回一层，首页对应的Layer Group的输出口多了一个“Tap”。把它插到Swipe的Jump to Start端口。现在，当点击首页的大图时，就可以从右往左滑动出详情页面了。

连接Tap和Jump to Start.png

最后，美中不足是点击区域出现了红色的图层，很简单，在Hit Area模块把Setup Mode的勾取消掉就可以了。好啦，大功告成。

总结

• Swipe模块可以引入滑动
• Interaction2模块的右上角端口可以与可交互模块相关联
• 再次体会Layer Group的作用

学习材料

[Origami入门教程6学习材料](链接: http://pan.baidu.com/s/1pJIK56r)，提取密码: u7jr。这是本节课的图片素材和我自己制作的QTZ文件，有兴趣的朋友可以自行下载，再自己跟着步骤做一遍，加深理解。