Material Design 是一种由 Google 推出的设计语言，用于 Web 和移动应用的设计。它强调平面和微妙的动画效果，以及纯净、直观、有意义的设计。其中波浪动态效果是 Material Design 中一个非常重要且实现难度较大的动态效果，因此在本文中我们将详细介绍如何实现 Material Design 中的波浪动态效果。
波浪动态效果介绍
波浪动态效果是 Material Design 中的一种动态效果，它通常应用于按钮、输入框、卡片等 UI 元素中。波浪动态效果的作用是在用户点击这些 UI 元素时，为用户提供一个视觉反馈，让用户感知到自己的操作已经被识别并响应了。
实现波浪动态效果的难点在于如何在用户点击 UI 元素时，动态生成波浪的效果。通常，我们可以使用 CSS3 动画来实现波浪动态效果，但是这种方式需要使用到复杂的 keyframe 动画，并且无法实现动态的波浪样式。
因此，我们需要使用 JavaScript 来实现兼容性更好、更具灵活性的波浪动态效果。
实现波浪动态效果的步骤
实现波浪动态效果的步骤如下：
- 创建 HTML 结构
在 HTML 代码中创建需要应用波浪动态效果的 UI 元素，例如按钮。在按钮内部创建一个 span 元素，并设置其样式，用于显示波浪效果。
<button class="btn-wave"> 点击我 <span class="wave"></span> </button>
- 设置样式
在 CSS 中设置波浪的样式，包括颜色、边框、圆角等属性。在该样式中，我们要设置 span 元素的 position、width 和 height 属性，使波浪在按钮中完全填充。
-- -------------------- ---- ------- --------- - --------- --------- -------- ------------- -------- ---- ----- ----------------- -------- ------ ----- ---------- ----- ---------------- ----- ------- ----- -------------- ---- --------- ------- - ----- - --------- --------- ------ ----- ------- ----- ---- -- ----- -- -------- ---- ----------------- ----- -------------- ---- ---------- --------- --------------- ----- -
- 添加动态效果
使用 JavaScript 给按钮添加一个点击事件，当用户点击按钮时，会触发波浪动态效果。在该事件中，我们要生成一个新的 span 元素，并设置其样式为当前点击位置的波浪样式，然后将其添加到按钮中。
-- -------------------- ---- -------
----- ------- - ---------------------------------------
--------------------- -- -
----------------------------- ------- -- -
----- ------ - -------------------------------
---------------- - ---------
---------------- - ---------------- - ---------------------------
----------------- - ---------------- - ----------------------------
---------------------- - ------- -- ------ ----------
------------------------
------------- -- -
------------------------
-- ------
--
--在该 JavaScript 代码中，我们使用了 document.querySelectorAll() 方法获取所有带有 .btn-wave 类名的元素，并使用 forEach() 方法遍历这些元素，为它们添加一个点击事件。
在代码块中，我们首先创建一个新的 span 元素 ripple，将其样式设置为当前点击位置的波浪样式，然后将其添加到按钮中。通过设置 ripple.style.animation，我们可以使用 CSS3 动画实现波浪的动态效果。
最后，我们使用 setTimeout() 方法在波浪动态效果结束后将其从按钮中移除。
示例代码
完整的示例代码如下所示。
HTML:
<button class="btn-wave"> 点击我 <span class="wave"></span> </button>
CSS:
-- -------------------- ---- -------
--------- -
--------- ---------
-------- -------------
-------- ---- -----
----------------- --------
------ -----
---------- -----
---------------- -----
------- -----
-------------- ----
--------- -------
-
----- -
--------- ---------
------ -----
------- -----
---- --
----- --
-------- ----
----------------- -----
-------------- ----
---------- ---------
--------------- -----
-
---------- ------ -
---- -
---------- ---------
-------- --
-
-- -
---------- ---------
-------- --
-
-JavaScript:
-- -------------------- ---- -------
----- ------- - ---------------------------------------
--------------------- -- -
----------------------------- ------- -- -
----- ------ - -------------------------------
---------------- - ---------
---------------- - ---------------- - ---------------------------
----------------- - ---------------- - ----------------------------
---------------------- - ------- -- ------ ----------
------------------------
------------- -- -
------------------------
-- ------
--
--总结
本文中，我们介绍了 Material Design 中的波浪动态效果，并且使用 HTML、CSS 和 JavaScript 实现了该效果。通过这种方式，我们可以为用户提供更美观、更具动态性的 UI 交互效果，提升用户体验和用户满意度。如果您对本文中实现方式还有疑问或建议，欢迎在评论区留言讨论。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649cf74348841e98949aadff