Material Design 是谷歌在设计语言方面提出的一套概念，它以具有意义的动画和流畅、有意义的转场为特色。相对于 iOS 的设计语言，Material Design 声明了更多的自由度，更多的关键动画类别可以由开发者自由探索。而对于我们前端开发者来说，探索这些动画特效是一件很有趣的事情，也能提升我们的技能水平。本篇文章将介绍如何在 Material Design 中实现类似于 iOS 的图标震动效果。
效果示例
在 iOS 中，当用户长按一个图标时，图标会产生一种震动效果来提示用户该应用处于可编辑状态，如下图所示：
为了实现类似的效果，在 Material Design 中，我们通过简单的 CSS 动画和 JavaScript 代码来模拟 iOS 动态图标核心逻辑。
实现步骤
1. HTML 结构
我们需要有一个放置应用图标的容器，如下所示：
---- ---------------------
---- -------------
---- ------------------------
------
------2. CSS 样式
接下来，我们为容器 .icon-wrapper 和应用图标 .icon 设置样式。
------------- - --------- --------- ---------- ----- ----- ------------ -------------------- --------- -------------------------- --------- --------------- ----- - ----- - --------- --------- ---- ---- ----- ---- ------ ----- ------- ----- ----------- --- --- ------------ -
包含以下重点信息：
.icon-wrapper样式：为容器设置position: relative;，animation-fill-mode: forwards;后容器会停留在动画最后一帧。.icon样式：设置position: absolute;，transition用于过渡动画，取代animation实现震动。
3. JavaScript 代码
上述样式 将 .icon-wrapper 容器定义格式清楚了，但还需要在容器上添加鼠标事件（当用户长按图标时）。JavaScript 代码用于检测用户是否长按图标。
----- ----------- - ----------------------------------------
--- ----- - -----
--- ---------- - ------
----------------------------------------- -- -- -
-- -------
----- - ------------- -- -
-- ------------- -
---------- - -----
--------------------------------------
-
-- -----
---
--------------------------------------- -- -- -
-- -----
--------------------
-- ------
-- ------------ -
---------- - ------
-----------------------------------------
-
---重点解读：
.icon-wrapper表示图标容器的元素。timer计时器。isDragging表示用户是否长按并开始拖拽。mousedown检测用户是否长按开始。如果是，开启计时器，这里是 100 毫秒。mouseup如果用户在 100 毫秒内松开了鼠标，则不会进入拖拽状态；否则，开启拖拽状态。
4. 完整代码
下面是完整的 HTML、CSS 和 JavaScript 代码示例。
HTML
---- ---------------------
---- -------------
---- ------------------------
------
------CSS
------------- - --------- --------- ---------- ----- ----- ------------ -------------------- --------- -------------------------- --------- --------------- ----- - ----- - --------- --------- ---- ---- ----- ---- ------ ----- ------- ----- ----------- --- --- ------------ - --------- - ---------- ----------- -
JavaScript
----- ----------- - ----------------------------------------
--- ----- - -----
--- ---------- - ------
----------------------------------------- -- -- -
-- -------
----- - ------------- -- -
-- ------------- -
---------- - -----
--------------------------------------
-
-- -----
---
--------------------------------------- -- -- -
-- -----
--------------------
-- ------
-- ------------ -
---------- - ------
-----------------------------------------
-
---总结
在 Material Design 中，我们通过简单的 CSS 动画和 JavaScript 代码来实现了类似 iOS 的图标震动效果。这种互动特效提示用户当前的操作状态，增强用户体验，也可以提升应用品质。希望这篇文章对你的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6528460a7d4982a6ebac80c1