Pixate是一款针对设计师设计的原型开发工具。无需任何代码，即可实现基于原生效果的动态原型设计。

本文针对对象为对Pixate有一定了解的用户。如果你完全没有接触过Pixate可以看我写的另一篇关于Pixate的入门教程。

这次我将通过Material Design中一则经典的FAB（Floating Action Button）动画案例来分享我是如何利用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的交互动画效果的心得分享。

谢谢！