比AE还方便!教你用Hype无代码制作Path扇形菜单动画 - 优设网 - UISDC

比AE还方便!教你用Hype无代码制作Path扇形菜单动画

2015/05/21 51339评论区

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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/hype-path-menu-animation

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 设计师干货 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 平面设计 设计趋势 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里