前言
Material Design 是 Google 推出的一种新的设计语言，强调移动设备和 Web 应用的一致性界面设计，其中的各种 UI 组件和交互效果都备受称赞。本文将着重讲解 Material Design 风格应用的联动效果，帮助前端工程师更好地理解并实现这一设计风格的核心特点。
联动效果概述
联动效果一般指两端 UI 元素之间的动态交互，当一个元素滑动或点击时，另一个元素应该跟着发生相应的变化。在 Material Design 中，联动效果主要体现在两个重要的组件上：滑动卡片（Card）和浮动操作按钮（Floating Action Button，FAB）。
- 滑动卡片：用户通过滑动功能，可以浏览一系列相关内容，而滑动卡片就是这种功能的一种实现方式。当用户滑动卡片时，应该有相应的连续动画，同时标题栏上的标题和 FAB 按钮的位置也会随之变化。
- 浮动操作按钮：FAB 是 Material Design 中非常重要的一种操作按钮，它出现在主屏幕当前任务的位置上，能够快速提供用户最常用的操作项。当 FAB 按钮点击时，应该有相应的渐变动画，并在展开时呈现出额外的选项。
联动效果实现
下面以滑动卡片和浮动操作按钮为例，详细讲解如何实现 Material Design 风格应用的联动效果。
滑动卡片
滑动卡片的实现主要分为两个部分：
- 卡片 UI 布局
卡片 UI 由三部分组成：卡片内容、标题栏、FAB 按钮。需要设置卡片内容的高度，以保证当滑动到顶部时，标题栏与卡片内容顶部无空白。如下所示：
-- -------------------- ---- ------- ---- ------------- ---- ------------------------------ ---- ---------------------------- ---- -------------------------- ------ ------ ------------------ --------------- - ------ -------- ---- ---------------- ---------------- ------------------ - --------- ------------------ ---------------- - ------ ------------- - ------- ------------------ ------ ------- ----------- ------------ ----------------- ------------------ --------------- ---------------- ----------- ------------------------- ---------- - ----- ------------- ------------------ ------------ ----------- ------------------------- ---------- ----------- ------------ ----------------- ------------------ ----------- --------------- ------------------ ---------- -
- 滑动事件监听
为了实现联动效果，需要监听卡片的滑动事件。当卡片滑动时，计算出当前卡片位置的比例，使标题栏和 FAB 按钮随之变化。如下所示：
-- -------------------- ---- -------
--- ----------- - -----------------------------------
--- --------- - ---------------------------------
--- ------ - -------------------------------
-------------------------------------------------
-- ---------
--- ------- - ----------------------
--- ---- - ----------- ------- - -----------------
-- --------
----------------------- - -----
-- --- ------
---------------------- - ------------- - --------------- - -- - ----- - --- - ------
---滑动事件监听部分的代码中，CARD_MAX_OFFSET 和 FAB_MAX_OFFSET 分别表示卡片最大可滑动距离和 FAB 按钮滑动距离，具体数值可根据实际需求调整。
浮动操作按钮
浮动操作按钮的实现主要包括两个部分：
- 按钮的 UI 布局
-- -------------------- ---- -------
---- ----------------------
---- -------------------
---- ------------------------
------
--- --------------------
------------
------------
------------
------------
-----
------
---------------
---------------
------------
-----------
------------
-
------------
------------------
-----------
------------
------------------
-------------------------
------------------
-----------
---------------
-----------------
---------------
----------- --- ---- ------------
------------ --- ----- ------- -- -- ------ ----- ----- ------- -- -- ------
- ----- ----- ------- -- -- ----- ----- ----- ------- -- -- ------
- ----- --- ------- -- -- ------- ----- ----- ------- -- -- -----
- ----- ----- ------- -- -- ------- ----- ----- ------- -- -- ----
- ---- ---- ------- -- -- -----
-
-------------------
------------------------
-
----------
------------------
-----------
------------
------
-------
-----------------
-
-------------
------------------
------------
-----------
------------------
----------------------
----------------
-------------
----------------------
---------------------
---------
----------
----------- - ----- ----- ------- -- -- ------- ----- ----- ------- -- -- ------
- ----- ----- ------- -- -- ------ ----- ----- ------- -- -- ------
- ----- ------ ------- -- -- ------- ---- ---- ---------------
-fab-container 为浮动按钮容器，fab-button 表示浮动按钮，fab-icon 表示按钮图标，fab-options 为浮动选项列表。
- 按钮的动态效果
为了实现联动效果，需要为按钮添加点击事件监听，并在点击事件触发后为选项列表添加展开动画，同时让按钮旋转 45 度。具体实现代码如下：
-- -------------------- ---- -------
--- ------ - --------------------------------------
--- ---------- - ---------------------------------------
-------------------------------- -----------
-- ------
----------------------------------
-- ------
--------------------------- --- -----
------------------------ - ----
------------------------------ - -------
----------------------- - ------
-
---- -
------------------------ - ----
------------------------------ - ------
----------------------- - --------
-
---完整示例代码
为方便读者理解，这里给出完整的示例代码，供读者参考：
-- -------------------- ---- -------
-------
------
------------------
--------------- - ------
-------- ----
----------------
----------------
------------------
-
---------
------------------
---------------- - ------
-------------
-
-------
------------------
------
-------
-----------
------------
-----------------
------------------
---------------
----------------
-----------
-------------------------
----------
-
-----
-------------
------------------
------------
-----------
-------------------------
----------
-----------
------------
-----------------
------------------
-----------
---------------
------------------
----------
-
---------------
---------------
------------
-----------
------------
-
------------
------------------
-----------
------------
------------------
-------------------------
------------------
-----------
---------------
-----------------
---------------
----------- --- ---- ------------
------------ --- ----- ------- -- -- ------ ----- ----- ------- -- -- ------
- ----- ----- ------- -- -- ----- ----- ----- ------- -- -- ------
- ----- --- ------- -- -- ------- ----- ----- ------- -- -- -----
- ----- ----- ------- -- -- ------- ----- ----- ------- -- -- ----
- ---- ---- ------- -- -- -----
-
-------------------
------------------------
-
----------
------------------
-----------
------------
------
-------
-----------------
-
-------------
------------------
------------
-----------
------------------
----------------------
----------------
-------------
----------------------
---------------------
---------
----------
----------- - ----- ----- ------- -- -- ------- ----- ----- ------- -- -- ------
- ----- ----- ------- -- -- ------ ----- ----- ------- -- -- ------
- ----- ------ ------- -- -- ------- ---- ---- ---------------
-
--------
---- -------------
---- ------------------------------
---- ----------------------------
---- -------------------
------
---- ----------------------
---- -------------------
---- ------------------------
------
--- --------------------
------------
------------
------------
------------
-----
------
--------
-- ----
--- ----------- - -----------------------------------
--- --------- - ---------------------------------
--- ------ - -------------------------------
-------------------------------------------------
--- ------- - ----------------------
--- ---- - ----------- ------- - -----------------
----------------------- - -----
---------------------- - ------------- - --------------- - -- - ----- - --- - ------
---
-- ------
--- ------ - --------------------------------------
--- ---------- - ---------------------------------------
-------------------------------- -----------
----------------------------------
--------------------------- --- -----
------------------------ - ----
------------------------------ - -------
----------------------- - ------
-
---- -
------------------------ - ----
------------------------------ - ------
----------------------- - --------
-
---
---------总结
通过本文的讲解，我们了解了 Material Design 风格应用的联动效果的实现方法，并掌握了实现滑动卡片和浮动操作按钮的具体步骤。
联动效果是 Material Design 风格应用的重要组成部分，可以提高用户的使用体验和应用的交互效果。希望本文能为广大前端开发者提供一些指导和帮助，让我们一起打造更加优秀和美观的应用吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6498e6ec48841e98945d4f61