Pixate中级教程！解析Material Design中交互动画效果之FAB

本文针对的对象为对Pixate有一定了解的中高级用户，Pixate是一款针对设计师设计的原型开发工具。无需任何代码，即可实现基于原生效果的动态原型设计。这次我将通过Material Design中一则经典的FAB（Floating Action Button）动画案例来分享我是如何利用Pixate来实现这个效果的。（由于本文涉及的对象是中高级用户，且篇幅有限，我仅提供制作思路和一些关键参数。）

如果你完全没有接触过Pixate可以看我写的另一篇关于Pixate的入门教程：《WINDOWS设计师也可以用！免费动效神器PIXATE初级教程（一）》。

进入正题，先看效果：

这是基于我目前正在制作的一款音乐播放器为功能原型的FAB案列：

当触发底部的“正在播放音乐“栏上的暂定按钮时，当前音乐暂停，且音乐栏将收拢形成一个圆形的Floating Button，当点击FAB所代表的播放按钮后，则FAB扩展为之前的“正在播放音乐“栏，继续播放音乐。

Google在其MaterialDesign Guideline中将其描述为：

Toolbar

The floating action button can transform into a toolbar upon press or from a toolbar upon scroll. The toolbar can contain related actions, text and search fields, or any other items that would be useful at hand.

参考了Guideline后，我绘制了这样的一个过渡动画参考：

通过上面的分镜草图可以看出，过去动画效果实际分为两部分：

“位移”和“展开”。而“展开”的范围也被限定为FAB圆形按钮的直径范围。

由此可以看出，设置FAB扩展的范围应是我们需要特别留意的。

而在Pixate的制作中，我们恰恰可以利用底部栏图层的Clipping属性+FAB资源本身的缩放属性来进行相应的效果制作：

（为了便于位置的对应和识别，我把底部栏设置为红色）

因为Clipping属性只是一次性的开关，而无法依据相关层级的活动属性来设定条件开启。所以一旦将FAB的展开范围固定后，则无法正常显示圆形FAB常住右下角的状态。

为此我们需要通过一个小障眼法来解决这个问题：

1. 复制出两个FAB

一个作为正常状态下的常住显示区域（FAB）；一个仅用作与扩展时的过渡动画效果（FAB Effect）。

2.设置FAB与FAB Effect交替

点击FAB位移至FAB Effect坐标并透明消失，此时FAB Effect显示并完成展开过度的动画效果。（收起时反之亦然）

（供参考的图层设置和位置布局）

接下来就是考验各位的耐性和细致，如何去调整两个FAB间交替时的Duration（动画周期)和Delay(延时)值了。

Tips：

1.最后在FAB和FAB Effect交互过度时，推荐使用ease in和ease out下的circular曲线属性来展示FAB的位移。

2.如果你够仔细会注意到我将播放按钮和FAB拆开为两个资源元素。因为这样在收起来成为圆形按钮时可以单独控制播放按钮显示过度和时间。目的主要是不被残影留存所影响而感觉转变比较生硬。并且会使得过度动画产生更生动。

希望以上我所提供的制作思路对你有所帮助。我也会在今后不定期的添加更多在Pixate上制作基于MaterialDesign的交互动画效果的心得分享。

谢谢！

 【动效神器Hype零基础入门教程系列】

先聊一下这个软件的强大功能，附上简单教程！
《Sketch神助攻！无代码做动效神器Hype3入门教程》

中国台湾设计师叫你用Hype做原型过场！
《无代码动效神器！教你用HYPE3做APP原型的基础过场（附神器）》

美丫姐手把手教你用Hype做Path菜单动画！
《比AE还方便！教你用HYPE无代码制作PATH扇形菜单动画》

作者：@Jaret_杰瑞特

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

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