Staggered Animation（交错动画）#

在讲交错动画之前，先补充一下视频里不知道为什么忽略没讲的部分，可能是剪辑时漏掉了。在点击了发布按钮后，新内容应该是在中心向四周从小到大地动态出现的，这显然需要通过Pop Animation的Progress来控制新内容图层的Opacity和Scale。怎么把外面的Pop Animation的Progress接到图层组里的新内容页面呢？很简单，把它直接插入Layer Group的输入，松开手，就会给图层组添加了Progress的输入口。双击进入图层组，会发现多了一个Progress模块，可以把它重命名为Expand Progress。把它插到Post图片的Opacity和Scale，就可以得到希望的效果。

接着开始交错动画。如果点击了发布按钮后，首页信息流先下滑空出白色区域，然后再动态地出现新内容，这样的交互是不是更有张力？马上来试一下。想要做到这一点，需要对Expand Progress进行延迟处理。这等于是在首页动画延迟后，再对它进行延迟，所以另外各添加一个Delay和Pop Animation模块，把原来Delay的Value输出口插到新的Delay的Value输入口上，再把新的Delay的Value输出口插到新的Pop Animation的Number上，最后把Progress输出口插到Layer Group的输入口。点击发布按钮，其实是从0变成了1，所以此时新的Delay模块的Style应该设为Delay Increasing。顺便可以把原来的Pop Animation命名为“Feed Sliding”，新的则命名为“Post Scaling”。交错动画的效果就实现了。

实现交错动画.png

Fixing the Navigation Bar Collapsing（修复导航栏折叠）#

添加新内容后，向上滑动首页，发现要滑动一定距离导航栏才开始折叠。这是因为之前我们设置折叠的Y Position数值只适用于没有增加高度的情况，现在增加了新内容后，高度增加了，自然就不对了。所以，只要对高度增加后再设置相应的数值就可以。复制一个Progress，把Scroll的Y Position插到它的Value输入口，我们可以看到，插入新内容后，值为-833，所以这个Progress的Star Value设为-833，End Value为-833+32。同时，把之前的Progress模块命名为“Shorter Feed”，现在这个命名为“Taller Feed”。
如果是原来的首页高度，使用“Shorter Feed”，否则使用“Taller Feed”。“Feed Sliding”可以告诉我们这一点，如果输出的值是0，那么是短的首页，如果输出值是1，那么是长的首页。这里，我们把这个输出值输入到一个新的Transition模块。当Transition的输入为0，那么输出是Star Value；当它的输入为1，则输出End Value。新增Transition模块，把“Feed Sliding”的Progress插到它的Progress端口，“Shorter Feed”的Progress插到Star Value，“Taller Feed”的Progress插到End Value，再Transition的Value插到Range的Value端口，就没问题了。

修复导航栏折叠.png

Final Polish（收尾工作）#

最后再来看看需要完善的地方。在首页点击右下解添加按钮，此时弹出发布页面，这个动画感觉弹跳得过于夸张，可以把它对应的Bounciness设为1，Speed改成5，就正常多了。
接下来是就是去掉点击区域的红色覆盖层。双击进入Composer，把Hit Area的Setup Mode的勾消掉就可以了。
还有一个问题，就是新内容显示在首页时，底部的内容不见了。双击进入Feed Strip检查一下，这是因为刚才我们把新内容的图片放在了旧首页黑图层的下方了。现在我们已经控制了新内容的Scale，所以不需要再把它放到下方也会显示正确，只需把它放到旧首页图层的上方，就解决问题。把它改为Layer3，再试一下，大功告成。

总结#

• 体会Switch模块的用法，当需要记住某个状态时，就要考虑使用它。
• 理解Interaction 2模块几个输出端口的具体用法。
• 图层组里的模块需要与外面的模块进行通信时，可以使用“Wireless Broadcast”和“Wireless Receiver”这对模块。
• 使用Delay模块可以实现有时间差的动画。
• 实现主要交互后，注意可能需要修复某些问题。

学习材料#

Origami入门教程7材料，提取密码: qzmm。这个视频的内容较多，大家可以下载练习一下，加深理解。

至此，Facebook官方出品的教学视频就讲解完了。之后会和大家一起探讨我自己做的小例子，欢迎继续关注。