抛砖引玉，Hype动效设计教程

前几天玩了Hype感觉不错，做了几个小动画，群里小伙伴嚷嚷出教程，抽了点时间抛了砖，砸死谁不要找我。

先来冷静分析下Hype的优缺点，看看它适不适合用来做动效交互。

优点：1.原生中文界面，上手容易，学习曲线平滑。

          2.直接拖拽打关键帧不需要写代码，调节迅速。

          3.可以在手机演示并利用手机传感器做交互。

          4.分享方便：可生成网页，gif，影片。

          5.可细致调节动画，并附有动画曲线。

          6.软件体积小,付费软件有保障。

缺点：1.原本是做响应式网页的软件，不是专门做动效的软件。

          2.不支持遮罩动画，不支持锚点动画。

基于以上的分析我选择了Hype来做动效，响应式网页期望不用调节代码不现实，期望做出动效来导出代码给开发工程师用也不现实。我选择Hype做动效的原因只有一个：快速做出原型跟开发工程师沟通以让工程师更好的理解我的想法并评估开发成本。

下面来简单介绍一下Hype做动画的界面。

跟sketch的布局一样，典型的左中右布局，左边是具体的场景缩略图，中间是画布和时间抽，右侧是各元素的属性调整菜单。

废话不多说，上手太容易，让我们通过新浪微博的一个界面实例来了解下这个软件。先来看下完成后的效果：

通过分析我们知道上图中用了图形大小，旋转，位置，透明度，模糊变化。下面让我们一步一步来完成

1.在界面右侧调整元素属性，修改画布尺寸为640x1136（iPhone5s的尺寸）

2.添加素材到画布并且排好图层顺序，图中矩形加号等通过Hype矩形工具画出。

3.添加关键帧操作，

先把图中各个元素的位置摆好，文字是从屏幕上方进入屏幕，三个图形从按钮下方进入屏幕，橙色按钮和加号位置保持不变。

分析好后添加关键帧让各个元素动起来，先做位置变化，顺便说一下hype的动画制作。

上图中我先选中了图形1，然后按下录制按钮，移动时间轴，然后移动图形1的位置，再次点击录制按钮，这就完成了图形1位置变化的动画。动画生成后可以看到图形1下面的属性栏里原点（上）这一行出现了两个关键帧。原点（上）即表示图形1上下位置的变化。第一个关键帧图形1在下方，第二个关键帧图形1在上方，关键帧1到关键帧2之间自动添加完成了动画。

现在图形1只是完成了位置变化，还需要有透明度变化。下面看下透明度在这个基础上怎么添加：

在图形1开始的地方先把透明度降到0%，然后再结束的位置添加个关键帧，透明度加到100%，然后播放，中间动画自动生成。

通过图形1的变化来了解Hype制作动画的原理：

点击录制，移动时间轴，再次点击停止时间轴，产生时间段。

改变元素开始到结束的关键帧的属性（位置，颜色，旋转，大小，透明度，模糊度，阴影，3d等等）。

hype有丰富的属性调节

以上文字，图形1，图形2，图形3都可以用图形1的方法实现。

5.下面来看下橙色按钮和加号动画实现的方法

用Hype矩形工具画出橙色背景和加号按钮，因为加号是一体的所以成组。

接下来按照图形1的动画制作方法做出时间轴然后改变加号的旋转角度和橙色按钮颜色变化和大小变化

4.最后还剩下背景灰色图层的制作

用矩形工具画出矩形然后给与一个0%到90%透明度的变化，配合背景图层的模糊效果

上面这些步骤之后所有的动画就算粗糙的制作完了。

5.动效想要细腻就需要慢慢调节，Hype吸引我的另一个点就是动画曲线的调节机制，只要有足够的耐心完全可以做出非常细腻的动效。例如图形1的出现现在感觉很生硬，不符合现实中的物理规律，我们通过动画曲线来调节一下

Hype内置了多种缓动曲线，还可以自定义，所以你完全有理由做出细腻的动效。

另外Hype还有基于手机传感器级别的交互设置，这里就不介绍了。等做完之后我们还可以导出影片或者gif或者Html5发送给朋友观看，获得建议。

另 外下载手机版的hype可以实时在手机上观看，如果想要交互的话还可以在右上角的操作添加鼠标点击事件来完成交互。理论上Hype可以完成一整个app动 效的模拟演示。废话不多说，下面放出源文件和素材，感兴趣的同学下载来自己手动试一下，看会容易，做会难。这块砖我抛了出去希望你们拿起来打磨成玉。