hype-path-menu-animation-1

@你丫才美工 :最近不知道为什么一个叫Hype3的软件突然火了起来,微博上也有很多粉丝来私信询问这个软件的功能和使用方式,所以今天就做一个Hype软件的不完全解析 >>>

(感谢本文案例及Hype3破解版下载的提供者waynexie,下载地址见文末)

欢迎同学们关注美丫姐的微信号:Ymeigong(文末附二维码,扫一下就关注咯)

Hype3专业版中文介绍

(感谢@折折熊 的翻译)

观看地址:http://v.qq.com

QQ0150521170910

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

  1. Hype 3 只有mac版本
  2. Hype 3 本质是动态原型制作工具,而不是做动态特效的
  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主要优点:

2ny20150521

另附台湾设计师@Akane_Lee 和 @折折熊 同学写的Hype 3教程:

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

1. Path扇形菜单的模拟

2. 响应式页面的制作

3. 物理量的运用

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

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

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

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

3ny20150521

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

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

下面开始进行有效步骤:

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

4ny20150521

5ny20150521

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

6ny20150521

8ny20150521

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

7ny20150521

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

9ny20150521

10ny20150521

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

11ny20150521

12ny20150521

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

13ny20150521

14ny20150521

15ny20150521

16ny20150521

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

17ny20150521

19ny20150521

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

18ny20150521

此处开始进入交互制作:

 

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

20ny20150521

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

21ny20150521

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

22ny20150521

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

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

23ny20150521

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

这里需要注意的是:

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

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

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

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

具体操作:

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

24ny20150521

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

25ny20150521

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

26ny20150521

16. 演示最终效果:

27ny20150521

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

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

Hype3中文破解版下载: http://pan.baidu.com  提取码: vt1g

myqr

【优设五月免费神器人气榜】

魅族设计师为你揭秘功能超强大的神器!
《免费了!切图标记外挂神器ASSISTOR PS深入解读(上)》

非常有实战效果的前端框架:
《超实用!MATERIAL DESIGN风格的前端框架免费下载》

苹果官方发布的规范设计模板打包下载:
《官方版来了!超实用的APPLE WATCH官方规范设计模板下载》

作者:@你丫才美工

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量95万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

点赞
收藏 5
继续阅读相关文章

发表评论 已发布 1

还可以输入 800 个字
 
 
载入中....
1 收藏