UI不止眼前的界面，还有诗和动效的田野！轻松完成app简单动效神奇Hype

相信有很多UI的同学们不会做一些简单的app动效

却又十分想学习。

那么问题来了，怎么学？

今天就带大家认识一款做动效的软件hype3～

对于如今移动互联网的时代

简单的UI已经满足不了用户的胃口了

而好的动效能有效的让一款app活（bi）起（ge）来（gao）

那么怎么来展示自己想到的效果呢

宝宝今天就为大家介绍一款做动效的软件－－Hype3

先让我们来了解下这款软件

Hype 是 Mac App Store 新上架的一个 HTML5 创作工具，其长处是可以在网页上做出悦目的动画效果，无需 Flash 插件。开发该应用的公司 Tumult 由两个前苹果工程师创建，并获得了 Y-Combinator 的投资。

ps：宝宝懒，所以这是百度百科拉下来的－v－

言归正传

我们先来看下Hype3的界面

当当～相比ae是不是觉得很简单了呢

在让我们来看下他的布局

大概就分为五大类吧：场景，时间轴，素材元素，菜单工具及场景展示（名字都是宝宝理解的取的～）

今天用一个简单的例子做一个小教学吧 

先看效果

是一个车辆匹配页的效果

有点像花田或者boss直娉的匹配吧

首先我们打开Hype

在素材元素板块里面选择我们要的画布尺寸

这里我选择了iphone6的全屏尺寸

为画布填充一个红色

然后我准备了三张素材图

这是我用sketch做的三张匹配的图～～

把他拖进Hype的画布中

将他们对齐 并且一次上下流出4px

接着就可以开始制作动画啦

我们选中第一个匹配车辆的层并且点击图上的录制按钮

把时间线放到2秒位置

然后去拖动第一层的位置，并把透明度调整为0，因为动画拖动之后的匹配项就消失了～

接下来就是重复上面步骤依次处理第二第三层的车辆图

完成了之后就是酱紫的

最后要完成一个回弹的效果，我们把最后两项时间轴拉回0点3秒

然后把他们两搞会0秒时候的坐标，调整之前别忘记点录制哦。

最后就完成啦

其实这个软件最diro的就是能生成js代码，顺带帮我们切图

这款软件玩儿几小时就能上手

我也是刚刚学习这款软件，希望大家有作品一起学习！

在送一个作品

最后为大家介绍一个原型神器

原型专用浏览器 —— Frameless

官网：http://stakes.github.io/Frameless/
App Store：https://itunes.apple.com

只要输入Prototype网址，就可以像真的 App 一样，用手机做测试了

谢谢