这是日历教程的第二部分。第一部分将指导你设置工作区并添加视差图片。在第二部分中，我将介绍横向日历菜单、添加导航抽屉以及 FAB（浮动操作按钮）。
本教程大约需要 20–30 分钟。开始之前，我将假设你已经下载了基础版 ProtoPie（不包含交互）。
1. 添加横向日历菜单
我们期望的效果是：用户点击标题栏后，区域会纵向展开，使用户可以在月份之间横向滚动，再次点击即可关闭。
我们期望的结果
我们期望的结果将遵循典型的ProtoPie 概念模型
ProtoPie 概念模型
Header 对象 + Tap 触发器 + 响应（高度缩放到 74px，箭头旋转 180º，日历不透明度 100%）
先添加点击时纵向展开 Header 的操作。由于我们还希望用同一操作来纵向收起 Header，因此需要添加一个 Condition。该 Condition 的规则是：如果 Header 等于 74px（关闭状态），则将 Header 高度扩展到 400px。
添加 Tap 和 Condition
在左侧图层面板中选中 Header 菜单，添加 Tap 触发器和 Scale 响应。选择 Header-BG 图层，并将其新高度设为 400px。
为 Calendar Container 添加一个新的 Opacity 触发器，并将其不透明度设为 100%。
现在 Header 已可以展开并显示可横向滚动的日历，下一步是在点击 Header 时反向执行这些操作。通过 3 个触发器（Scale、Rotate 和 Opacity）完成，并将它们列在 Condition 之上。见下图。
滚动时更改标题中的月份名称
你的横向滚动日历将按这种结构排列。11 月从 x=375px 开始，12 月从 x=750px 开始
给 Calendar 容器添加 Detect 触发器，并在下拉菜单中选择 Scroll。添加第一个条件，再次在下拉菜单中选择 Scroll，值设为 0。然后我们就可以添加当滚动的 X 位置为 0 时要显示的内容，这里是 10 月。
添加两个不透明度操作：Oct（100% 不透明度）和 Nov（0% 不透明度）
对 11 月重复相同过程，条件值设为 375px；对 12 月设为 750px。
2. 添加导航抽屉
给 Burger 容器添加 Tap 触发器，并添加第一个 Move 响应，将其指定到 NavigationDrawer 容器，新 X 值设为 0。这样抽屉就能在点击时滑出。
在同一个 Burger 对象上添加 Opacity 触发器，并指定到 Overlay，将不透明度设为 70%。这样会形成白色遮罩效果，让用户在视觉上更聚焦于抽屉。
这样你应该会得到如下效果，我们只需要重新排列 Overlay 和 Navigation Drawer 的图层顺序，以获得分层效果。
使用 Bring to front（第 3 个选项）重新排列 Overlay 和 NavigationDrawer 图层。
需要注意的是，使用 Reorder 并将多个对象置于顶层时，原型将遵循从上到下的执行逻辑。见下例，先执行 Reorder Overlay，再执行 Reorder NavigationDrawer。
关闭菜单
给 Overlay 添加 Tap 触发器，并添加 Move 响应，指定到 NavigationDrawer。
3. 添加 FAB 按钮
i. 打开 FAB 控件
按钮位置
在这个原型中，我们使用了两个额外按钮，在按下 FAB 时它们会从 FAB 下方向上移动。
在 Open-Fab 触发器中添加两个 Move 操作（btn-2 和 btn-3），并为它们设置如下“Move To”Y 值。
btn-2 = Y -36px
btn-3 = Y -98px
淡入按钮
新增 4 个 Opacity 响应，并分别指定到每个按钮：所有按钮设为 100%，FAB 设为 0%。
ii. 关闭 FAB 控件
与打开 FAB 控件类似，我们只需将这些响应逐一反向重复。除了手动复制粘贴这些响应并分别修改操作外，没有更快捷的方法。
iii. 点击屏幕任意位置关闭 FAB 控件
一个简单步骤：复制 Close-Fab 点击触发器中直到 Rotate 为止的操作，并将其粘贴到 Overlay 的新 Tap 触发器中。这样用户就可以点击屏幕任意位置来关闭 FAB 控件。
就是这样，整体很简单，并且能为你构建自己的原型打下良好基础，或者只是开始熟悉 ProtoPie 应用。如果有任何问题或评论，欢迎在下方留言；如果你有想看的下一篇教程主题，也欢迎联系我。
