简介
在 Android Material Design 中，Floating Action Button 是一种特别的按钮控件，它通常用于进行主要的动作，比如新增、创建、编辑、分享等。在实际开发中，动画效果是提升用户交互体验的重要方式之一。本文将介绍如何制作 Android Material Design Floating Action 按钮动画的最佳技巧，帮助前端工程师提升动画制作的技术。
知识储备
在进行本文的学习前，需要掌握 Android 布局、动画的基础知识，具体包括：
- RelativeLayout 和 CoordinatorLayout 的使用；
- View 动画和属性动画的使用；
- 了解 FabTransformationBehavior 类的使用。
基础实现
Floating Action Button 默认实现了一个简单的展开/收起动画，只需要设置其属性即可：
-- -------------------- ---- -------
----------------------------------------------------------------------
---------------------
-----------------------------------
------------------------------------
------------------------------
---------------------------
----------------------------------
-------------------------------------
--------------------
--------------------------------------------------------
-------------------
---------------------
------------------------------
------------------------------
-----------------------------------------------------------------------------------------------
------------------------------------------------------------------------------ --其中，app:layout_behavior、app:fabTransformationSheetBehavior 属性指定了在展开/收起时所采用的行为（Behavior），并且需要保证其所在的父布局为 CoordinatorLayout。
动画实现
在实际开发中，可能需要自定义 Floating Action Button 展开/收起的效果，那么就需要用到自定义 Behavior 和动画了。
自定义 Behavior
以展开为例，要实现自定义 Behavior 首先需要继承 FabTransformationBehavior 类，重写其中的 onExpanded() 方法，并且在其中进行自定义的动画。
-- -------------------- ---- -------
------ ----- -------------------- ------- ------------------------- -
------ ---------------------- -
--------
-
------ ---------------------------- -------- ------------ ------ -
-------------- -------
-
---------
--------- ---- ------------------------------- ---- -
----------------------
-- -----
--------- ---- - ---------------------------------------------- ---------------------
-------------------------
-
---------
--------- ---- -------------------------------- ---- -
-----------------------
-- -----
--------- ---- - ---------------------------------------------- -----------------------
-------------------------
-
-其中，onExpanded() 和 onCollapsed() 方法会在 Floating Action Button 的展开和收起时被调用，分别实现展开和收起的自定义动画。
自定义动画
在 FabExpansionBehavior 类中实现自定义的动画，本文采用了 View 动画的方式，具体实现过程如下。
首先，定义动画所需要的 XML 文件（R.anim.fab_scale_up 和 R.anim.fab_scale_down），这里以展开为例，展开动画的 XML 文件实现如下：
-- -------------------- ---- -------
----- ------------- ------------------
---- -----------------------------------------------------------
------
----------------------
------------------------
------------------------
--------------------
--------------------
----------------------
---------------------- --
------这里，scale 标签指定了缩放的效果，设置了从 0 缩放到原始比例的效果，其中 duration 属性指定了动画的时长，fromXScale 和 fromYScale 属性指定了起始的缩放比例，toXScale 和 toYScale 属性指定了结束的缩放比例，pivotX 和 pivotY 属性指定了动画缩放的中心位置。
接着，在 FabExpansionBehavior 类中，通过 AnimationUtils.loadAnimation() 方法加载动画资源文件，并且在 onExpanded() 和 onCollapsed() 方法中分别调用 startAnimation() 方法来播放动画。
至此，Floating Action Button 的自定义展开/收起动画就完成了，示例代码如下所示。
-- -------------------- ---- -------
------ ----- -------------------- ------- ------------------------- -
------ ---------------------- -
--------
-
------ ---------------------------- -------- ------------ ------ -
-------------- -------
-
---------
--------- ---- ------------------------------- ---- -
----------------------
-- -----
--------- ---- - ---------------------------------------------- ---------------------
-------------------------
-
---------
--------- ---- -------------------------------- ---- -
-----------------------
-- -----
--------- ---- - ---------------------------------------------- -----------------------
-------------------------
-
-总结
本文介绍了如何制作 Android Material Design Floating Action 按钮动画的最佳技巧，需要掌握 Android 布局、动画的基础知识，通过自定义 Behavior 和动画，可以实现更加丰富、个性化的展开/收起效果。对于前端工程师，本文提供了具有深度和学习以及指导意义的知识储备，方便开发更加优秀的 Android 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64acab7b48841e9894898125