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

在本节的视频Rooms Part 3： Creating a New Post里，我们将在上次课程的基础上，继续制作创建新内容的交互。因为视频较长，将会分成上、中、下三次课程和大家一起学习。最后希望达到的效果是：点击首页右下角的添加按钮，从下往上弹出发表新内容的页面，在这个页面上，点击关闭按钮，可以回到首页；点击发表，则新内容会以柔和的动画插进首页的头部。

首先，请下载Origami入门教程7材料，提取密码: qzmm。我们先给添加按钮加动画。一般来说，按下按钮后，按钮应该有一定的变化，我们这里希望按下添加按钮，它会动态地变小一些。先添加Interaction 2模块，把它插到添加按钮的Layer上，使它只作用在添加按钮的图层上。想要有动画很简单，把光标悬停在Interaction 2模块的Down端口上，按下键盘“a”，就添加了Pop Animation模块。此外，我们需要控制一下按钮大小变化的范围，显然，添加Transition模块就可以了。把光标悬停在Pop Animation模块的Progress端口上，按下键盘“t”，即添加成功。接下来，把Transition模块的Value插到添加按钮Layer的Scale端口上。没按下按钮的时候，Down输出是0，也就是Transition模块的Progress值为0，此时按钮应该以最大的尺寸显示，所以Transition的Star Value应该设为1。按下按钮后，Down输出是1，也就是Transition模块的Progress值为1，此时希望按钮变小一些，可以把End Value设为0.8。这样，按下按钮后，它会动态地变为原来大小的80%。如果觉得动画的弹力不够，把Pop Animation模块的bounciness改大一些就可以了。这里设为10，感觉还不错。

给添加按钮做动画.png

Creating a New Post（添加发布窗口）#

现在我们开始添加发布窗口。先把材料里的Composer.png拖进文档里。我们希望是，当点击了添加按钮后，这个页面才显示，所以肯定需要控制Y Position的数值。把光标移到这个图片对应的Layer模块的Y Position端口，按下键盘“t”，添加Transition模块。没有点击按钮的时候，需要把这个页面移到下方看不到的地方，调整Star Value的数值，这里设为-1341就差不多了。当按下添加按钮时，页面应该出现，因为这时Progress输入为1，所以End Value要设为0，最后输出才会为0，显示整个页面。当显示这个页面时，也需要动画效果，所以光标悬停在Transition模块的Progress端口，按下键盘“a”，添加Pop Animation模块。根据我们的需求，是否点击添加按钮会有不同的状态，显然，我们需要一个开关来判断手指是不是在屏幕上，当手指离开了屏幕，才弹出这个页面。把光标悬停在Pop Animation模块的Number端口，按下键盘“shift+s”，添加Switch模块。为了之后能更清晰地理解它，我们可以对它重命名为“Composer is Visible”。接下来，就让按钮打开这个开关。

在控制开关之前，我们来深入认识一下Interaction 2模块的几个输出端口。Down端口在按下图层时会输出1，否则输出0，用在需要判断按下状态的情况；Up端口在图层被松开时会输出1，适用于使用按钮的情况；Tap端口在图层在固定位置轻按时会输出1，适用于按钮处在可滚动图层上的情况;Drag端口则在被按下直到松开的整个过程中都会输出1。这里，我们只需要使用Up端口。把它插到Switch模块的Flip端口，然后再点击添加按钮，松手后，发布页面就从下往上弹出来了。

点击添加按钮弹出发布页面.png

Going Back（返回）#

点击发布页面左上角的交叉按钮和右上角的Post按钮，都希望可以返回到首页信息流。这就要求点击这两个按钮后，可以把Switch模块代表的开关关闭掉。显然，我们需要在这两个按钮上添加Hit Area。因为点击区域和这个页面是永远一起显示的，所以需要把它们放在图层组里。把光标悬停在Composer这个Image上，按下键盘“g”，把这个Layer Group再双击进入图层组，按下键盘“h”，添加Hit Area。将Anchor Point设为Top Left，Width和Height分别调节为139和187。再复制粘贴一个Hit Area，Anchor Point设为Top Right。这样，两个点击区域都设置完成了。接着，把光标悬停在Hit Area的输入口，按下键盘“i”，分别都添加上Interaction 2模块。

我们希望把Up口与外面的Switch模块相连，按之前课程讲过的，可以对准Up口按下键盘“p”，把这个端口放到外面去。在这里，向大家介绍另一种有用的方法。在Origami里，有一个新模块叫“Wireless Broadcast”，它能够以无线方式把数值传递到文档里任一模块。把光标悬停在Up端口，按下键盘“w”。双击它重命名为“Close Button Up”。同样的方法，添加“Post Button Up”。

添加无线发送器.png

返回上一层，我们看不到哪里有显示跟这个无线模块有关的东西。按下键盘“shift+w”，发现添加了一个“Wireless Receiver”模块，用它就能接收刚才设置的两个发送器的数值。按下键盘“command+2”，进入它的设置，选择需要接收的发送器名字。先选择“Close Button Up”发送器，把它插到Switch模块的Off端口。此时在右边的手机屏幕上点击左上角交叉按钮，页面就从上往下收回了。

添加无线接收器.png

Logic Patch（逻辑模块）#

同样，我们再设一个“Wireless Receiver”模块来接收Post Button Up的数值。不过，当尝试把它插到Switch模块的Off端口时会发现，刚才连接“Close Button Up”接收器的线不见了。这是因为不允许同时有2根线插到同一个端口。解决这个问题的方法就是使用Logic Patch（逻辑模块）。按下键盘“shift+a”，就成功添加了一个逻辑模块。双击此模块，可以发现，它有AND、OR、NOT也就是与、或、非等多种逻辑可选，我们用得最多也就是这三种了。我们是想按下关闭或者发布按钮，这个页面都往下弹走，所以这里应该选择OR。把这两个接收器插入到逻辑模块的输入口，再把逻辑模块的输出口插到Switch模块的Off端口，就可以了。

添加逻辑模块.png