首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 生活随笔 > 正文

    [教你用HYPE无代码制作PATH扇形菜单动画]能自定义扇形快速菜单桌面

    时间：2020-05-20来源：山茶花美文网 本文已影响 人 山茶花美文网手机站

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

    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主要优点：

    教你用HYPE无代码制作PATH扇形菜单动画1

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

    1. Path扇形菜单的模拟

    2. 响应式页面的制作

    3. 物理量的运用

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

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

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

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

    教你用HYPE无代码制作PATH扇形菜单动画2

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

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

    下面开始进行有效步骤：

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

    教你用HYPE无代码制作PATH扇形菜单动画3 教你用HYPE无代码制作PATH扇形菜单动画4

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

    教你用HYPE无代码制作PATH扇形菜单动画5 教你用HYPE无代码制作PATH扇形菜单动画6

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

    教你用HYPE无代码制作PATH扇形菜单动画7

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

    教你用HYPE无代码制作PATH扇形菜单动画8 教你用HYPE无代码制作PATH扇形菜单动画9

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

    教你用HYPE无代码制作PATH扇形菜单动画10 教你用HYPE无代码制作PATH扇形菜单动画11

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

    教你用HYPE无代码制作PATH扇形菜单动画12 教你用HYPE无代码制作PATH扇形菜单动画13 教你用HYPE无代码制作PATH扇形菜单动画14 教你用HYPE无代码制作PATH扇形菜单动画15

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

    教你用HYPE无代码制作PATH扇形菜单动画16 教你用HYPE无代码制作PATH扇形菜单动画17

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

    教你用HYPE无代码制作PATH扇形菜单动画18

    • [教你用HYPE无代码制作PATH扇形菜单动画]能自定义扇形快速菜单桌面 相关文章:
    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文[教你用HYPE无代码制作PATH扇形菜单动画]能自定义扇形快速菜单桌面由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.