Origami入门教程8-视频4：Creating a New Post（中）

Posting（发布内容）#

点击发布按钮，我们想要把新内容插入首页内容的头部。回头看一下首页信息流的图层组，我们可以把它重命名为“Feed Strip”，显然，它需要增加长度，并把新内容容纳进来。所以，当新内容进来时，首页信息流的高度也要随之变化，而已知这个内容框的高度是900，所以首页信息流的高度也要增加900。把光标悬停在Feed Strip的Pixels High，按下键盘“t”，添加Transition模块。当按下了Post按钮，首页的高度要增加900，此时Transition模块的输入端口Progress数值一定是1，所以我们先把它设为1，End Value自然是2100+900。再双击Feed Strip图层组进入，把原来信息流的Anchor Point改成Bottom Center，使新内容进来后原来的页面定位到底部中心，再把新内容的位置Y Position调为909。这样，发布内容的位置就设好了。

调整新内容位置.png

Resizing the Scroll Content（调整滚动内容的大小）#

现在，我们来使首页信息流以动画方式来增加高度，把光标悬停在Pixels High Transition模块的Progress端口上，按下键盘“a”，添加Pop Animation模块。接着，需要一个开关来记住是否发布了新内容的状态。按下Post按钮后，才会出现新内容。按下键盘“shift+s”，添加Switch模块，把它插到Pop Animation的Number端口。不过，这时候会发现，新内容的图层覆盖了首页信息流，这是因为默认状态下，开关输出为0，导致Transition模块的Progress变成了0。最快的修复方法是，把新内容图层的顺序改为1，让它在原来的首页信息流的下面。

增加开关模块.png

然后，就是让“Post Button Up”来控制打开开关了。我们可以复制粘贴一个“Post Button Up”，然后把它插到开头的Turn On端口。现在来试一下效果，点击首页右下角添加按钮，进入内容发布页，点击右上角发布按钮，新内容出现了。不过，因为我们发现显示的时候，动画是在发布新内容页面图层的下方出现的，显然不正确。

Conditional Logic（条件逻辑）#

想要做到的效果是，新内容进来时，原来的首页会动态地向下移动。从实现的角度来考虑，实际上是当按下发布按钮且发布内容页离开屏幕后，首页的高度增加。如何判断发布内容页是否离开了屏幕呢？很简单，只要看它当前的Y Position是否小于真正离开屏幕时的Y Position就可以了。这时，我们需要使用Conditional Logic模块。按下键盘“c”，即可添加到文档里。把控制Composer图层Y Positon的Transition模块的Value插到First Value。我们看到，当真正离开屏幕时，发布内容页的Y Position是-1341，所以当First Value小于-1340时，就说明页面完全离开屏幕了，于是把Second Value设为-1340，Condition设为Lower Than。顺便把Conditional Logic模块重命名为“Composer is Off Screen”，把上面的开关命名为“Post Button Was Hit”。前面讲过，当按下发布按钮且发布内容页离开屏幕后，再开始动态地增大首页的高度，把光标悬停在Pop Animation的Number端口上，按下键盘“shift+a”，添加逻辑模块AND，再把Conditional Logic的Result插到它的输入口。这时，我们点击添加按钮，出现发布内容页，点击发布，新内容就会等到上一页面离开屏幕再动态地插入了。

添加条件逻辑模块.png

Fixing the Close Button（修复关闭按钮）#

再次添加按钮，出现发布内容页，点击关闭按钮，发现还会插入新内容，这是为什么呢？检查一下，因为当Switch被Post Button Up打开了之后，没有关闭，就一直处于打开状态。应该在首页点击添加按钮时，先把这个开关关掉。把添加按钮对应的Interaction2模块的Up端口插到Turn Off就OK了。

修复关闭按钮.png

Delay Patch（延迟模块）#

我们继续做些优化。眼尖的同学会发现，在首页点击添加按钮后，可以看到发布内容页滑上来的同时，底下的首页信息流也将向上滑动变回到原来的高度，在实际正常的交互中，应该给用户感觉到底部是不变化的，只有发布内容页向上滑。为了修复这一点，我们可以把首页信息流高度恢复到原来的动画稍微延迟一些，这样在发布内容页上滑出现的时候，看上去底部的页面是不动的。Pop Animation的输入是AND之后的结果，如果发布按钮被点击且发布内容页离开屏幕，这个结果是1，当在首页点击添加按钮时，结果是0。我们是希望只在点击添加按钮时，首页信息流的动画延迟出现，所以是从1减成0时有延迟。按下键盘“d”，添加Delay模块，把AND的结果插到它的Value输入口，再把它的Value输出口插到Pop Animation的Number端口。然后，把Style选择为Delay Decreasing，这样就只有当数值从1减为0时才会有延迟，延迟时间默认是0.5秒。这时，就得到想要的效果了。

添加延迟模块.png