教你用HYPE无代码制作PATH扇形菜单动画(2)

此处开始进入交互制作：

9. 让我们返回到原始面板，选择场景tab签，这个界面中会有一个时间轴的列表，当前是默认的“主时间轴”，但实际上操作动画是不能放在主要时间轴的，因为主时间轴代表：你点页面进去时候的默认效果，如果主时间轴上面是有动画效果的，那么久代表你一点进去之后，动画就一直在播放…播放…播放…。为了避免这种情况的出现，我们需要新建一个时间轴，点列表下面的带有框框的“+”号就可以出现，带框框的是复制当前时间轴，不带框框的是新建，在这里我们用复制就好啦。

10. 然后你的时间轴应该如下图所示，需要确保主时间轴是空的，这样才能保证点进页面的时候整体是静止的。

11. 看一下整体效果!到这里，我们的动画效果就基本准备好了。

12. Hype的交互制作逻辑是：先录制好你想要的动画，然后通过给按钮赋予动作(点击/拖动等)来执行这段动画。

下面选中中间的红色菜单按钮，这时候我们需要赋予按钮一个点击动画，把tab签切换到“操作”面板，点击“鼠标点按时”后面的加号，添加一个效果，具体设置可以参看红色框框之内的操作!设置完成之后，就可以在页面当中预览了!也可以在手机上面预览，当你点击红色按钮的时候，扇形菜单就会弹出!

13. 但是这时候你会发现动画效果还是跟Path有一些区别，我们没有收起来的样式，一直都是展开，展开。这样的动画师不完整的，下面我们要把这个动画给补充上去。

这里需要注意的是：

Hyp3目前有个不足就是(这里很绕)：一个按钮不能执行同一元素的多个动画。细心的朋友可能已经发现，在给按钮赋予动作的面板里边，有个“倒序播放”的选项。制作Path这段点击动画，正常的理解是，点击第一下，展开菜单。点击第二下，执行倒序动画即可。但在实际操作过程中我们发现，不管怎么点击。。怎么倒序。。点击后的效果都是展开，它无法做到倒叙。

所以，完成这段收起的动画，我们还得制作一个控制倒序的按钮。

现在，我们把两个按钮分别命名为A和B。

A是之前已做好的按钮，控制展开效果，B控制收起效果，并且在点击A之后，A按钮瞬间藏在页面之外，露出B按钮。当点击B之后，再控制A按钮回归原位。具体可以参看下图的红色区域，这些都是动画的关键内容。完成以上几步骤之后，你会得到一个按钮的下移动画时间轴。

具体操作：

1.复制按钮—>2.新建时间线—>3.录制按钮下移动画(下移的同时也保证透明度的降低)

14. 选中按钮A将按钮下移的动画也加入到点击效果里面去，如下图所示：

15. 编辑按钮B的点击动画，将刚才的两个动画时间线倒叙播放，显示效果相当于：菜单收起+A按钮回归原位。完成这最后一个步骤，就赶紧去浏览器看看你最新的效果吧!!Path菜单的整体动画就做完了~撒花~!

16. 演示最终效果：

(因为限制GIF大小，所以此图被压缩的有点厉害)

如果你跟着这个教程做完了，估计会发现这个案例存在一个小bug，那就是红色按钮点击后并没有像Path原版那样旋转，也就是“+”没有变成“×”。还真是抱歉，这确实是由于制作教程时粗心出现的错误。不过现在看来正好给大家留做课后练习，看大家能否结合今天的知识把这个菜单展开动效完整的还原出来~!