首先需要对这个软件进行一个说明：

　　Hype 3 只有mac版本

　　Hype 3 本质是动态原型制作工具，而不是做动态特效的

　　Hype 3 制作动效，不需要代码

　　为什么要学习这个软件

　　1. Hype除能创建流畅的动效外，其最大优势就在于它的可交互性。之前有做App的交互效果拿给朋友看，演示操作一目了然，大大降低沟通成本。

　　2. 动效设计是未来的一个趋势，Hype软件现在才是第3版，未来还有无限升级迭代的可能，如有精力，值得一试。

　　Hype 3适用于以下场景：

　　1. UI设计师向开发演示常规或创新性的交互效果(一些基本的转场效果，只需简单操作即可实现。)

　　2. 制作网页视差滚动效果。

　　3. 制作简单的展示类H5页面，比如：你现在不会代码，但是需要制作一个能在朋友圈广泛传播的H5，H5的交互动作也不是很复杂，这时候你就可以使用Hype 3一个人搞定了。

　　4. 制作小游戏，因为Hype 3 里面有一个“物理量”的功能比较牛逼，可以帮助实现一些小游戏的效果。后面会有提到…

　　5. 结合代码还是会有无限可能的…(作为代码小白，这块就不敢于大家深聊了，因为在Hype 3里面操作是可以触发代码效果的，但是这些代码需要自己去定义，期待能够有懂这一块的童鞋深入研究)

　　以下是waynexie 童鞋整理的Hype3主要优点：

　　那么这次，我们要借助waynexie提供的案例，来制作3个效果：

　　1. Path扇形菜单的模拟

　　2. 响应式页面的制作

　　3. 物理量的运用

　　为了给大家共同探讨的时间，这次我们就先来练习Path菜单的制作，后两个就留到下集再讲。

　　先我们来看一下Path的实际效果：

　　不好意思没找到Path的原始动态，在网上扒了一个Dribbble上面用户自己做的twitter的效果图，大家看看就好，反正一个意思!我们一会就要用Hype模拟这个效果!是不是想想就有点小激动呢!

　　(图片来源：https://dribbble.com 作者：Claudio Guglieri )

　　首先我们打开Hype 3，导入一张Path的截图(这里面可以换成你的各种App截图啦，大家随意)

　　这里面的Path图在PS做了模糊效果，并且加了一个遮罩，这些大家都不必在意，不是今天的重点!

　　下面开始进行有效步骤：

　　1. 新建一个圆形按钮，在元素标签下调整参数，使按钮更像Path的原生按钮。

　　2. 同样的方式创建分类按钮，由于Hype不支持复杂图形的绘制，所以这里icon的内容需要在PS里面绘制好了之后直接导入图片在Hype中来。下图就是展示了这次要用的两个元素了，将按钮放置菜单按钮之上(其实顺序应该是在下面，这里是为了方便观看)

　　3. 开始录制单个元素的时间线了，Hype的录制工具超级方便!看到那个闪动的红点了吗，按下它，然后把右侧的时间轴拖到适合的位置!(这一步超重要，一定要先拖时间线，再去拖动元素，这样才能保证动画的录制。)Hype的时间线操作跟AE有所不同，它不需要打关键帧。

　　4. 动画录制上之后，关键帧之间会出现蓝色的线条，对应的时间线也会变蓝，如下图所示(记得关闭录制哦!)

　　5. 这个时候的动画已经完成了一个，我们可以来看看效果!但是看上去还是很生硬啊!一点都不Q弹!人家Path的明明那么动感!!!怎么办!!这个时候Hype的另一大好处来了，就是强大的动态曲线库，而且曲线还能实时预览及调整，相当方便!

　　6. 选取适合的动效曲线，这里推荐“弹性”曲线，在弹性曲线的基础上进行一点小小的调整。下图是调整前后的比较~

　　7. 选中ICON图层，按Ctrl+d复制图层，然后选中当前元素的时间轴，对运动轨迹进行调整，就是下图所示的一个蓝色的圆点线条，调整顶端锚点位置即可。然后用相同方法制作其他三个ICON的动画。最后，因为ICON不是同时弹出的，所以需要在时间线上做简单的调整，如图：

　　8. 完成上述操作之后，你就可以得到一个基本的动画了!然而这并没有什么X用，要知道今天我们要做的是一个可以人机交互的页面，并不是一个动态gif图就Ok了，所以我们的任务现在才刚刚开始，马上你就会了解到怎么在Hype里面合理操作时间轴，并且以此做出可交互动画!

　　此处开始进入交互制作：

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

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

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

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

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