如何用JavaScript编写实现按钮涟漪动画效果的示例代码？

本文共计1781个文字，预计阅读时间需要8分钟。

目录+前言+分析+实现+总结+前言+不熟悉Material UI。这是一个React UI组件库，实现了Google的Material Design。Material Design设计规范中包含了大量关于点击的流畅效果。

目录

• 前言
• 分析
• 实现
• 总结

前言

不知道你们有没有使用过 Material UI。这是一个 React UI 组件库，它实现了 Google 的 Material Design。

Material Design 设计规范中包含了很多关于点击的涟漪效果，类似于一块石头跌落水中所产生的波浪效果。

以下是效果图

速度放慢之后的效果：

我们把 overflow: hidden 去掉之后：

本文就以 Material Design 中的涟漪效果作为目标，来使用原生的 JavaScript、CSS、HTML 来实现此效果。

分析

通过观察，我们可以发现点击的涟漪效果是在鼠标点击的点开始以一个正圆往外扩散。当圆形扩散到正好能将 Button 全部包围住的时候停止，在扩散的过程中颜色逐渐变浅直到消失，并且此效果可以叠加。

长按效果也是一个圆往外扩散，只不过是在长按结束之后，圆才会消失。

除了鼠标点击效果外，还有键盘焦点事件的效果。当使用键盘的 Tab 键切换到按钮上的时候，会有一个抖动的效果，类似于呼吸效果。