如何在 Material Design 中实现类似于 iOS 的图标震动效果-JavaScript中文网-JavaScript教程资源分享门户

Material Design 是谷歌在设计语言方面提出的一套概念，它以具有意义的动画和流畅、有意义的转场为特色。相对于 iOS 的设计语言，Material Design 声明了更多的自由度，更多的关键动画类别可以由开发者自由探索。而对于我们前端开发者来说，探索这些动画特效是一件很有趣的事情，也能提升我们的技能水平。本篇文章将介绍如何在 Material Design 中实现类似于 iOS 的图标震动效果。

效果示例

在 iOS 中，当用户长按一个图标时，图标会产生一种震动效果来提示用户该应用处于可编辑状态，如下图所示：

为了实现类似的效果，在 Material Design 中，我们通过简单的 CSS 动画和 JavaScript 代码来模拟 iOS 动态图标核心逻辑。

实现步骤

1. HTML 结构

我们需要有一个放置应用图标的容器，如下所示：

<div class="icon-wrapper">
  <div class="icon">
    <img src="path/to/image.png">
  </div>
</div>

2. CSS 样式

接下来，我们为容器 .icon-wrapper 和应用图标 .icon 设置样式。

// javascriptcn.com 代码示例
.icon-wrapper {
  position: relative;
  animation: shake 0.82s ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  pointer-events: none;
}

.icon {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  transition: all .2s ease-in-out;
}

包含以下重点信息：

.icon-wrapper 样式：为容器设置 position: relative;，animation-fill-mode: forwards; 后容器会停留在动画最后一帧。
.icon 样式：设置 position: absolute;，transition 用于过渡动画，取代 animation 实现震动。

3. JavaScript 代码

上述样式将 .icon-wrapper 容器定义格式清楚了，但还需要在容器上添加鼠标事件（当用户长按图标时）。JavaScript 代码用于检测用户是否长按图标。

// javascriptcn.com 代码示例
const iconWrapper = document.querySelector('.icon-wrapper');

let timer = null;
let isDragging = false;

iconWrapper.addEventListener('mousedown', () => {

  // 开启长按计时器
  timer = setTimeout(() => {
    if (!isDragging) {
      isDragging = true;
      iconWrapper.classList.add('dragging');
    }
  }, 100);

});

iconWrapper.addEventListener('mouseup', () => {

  // 清除定时器
  clearTimeout(timer);

  // 执行拖动逻辑
  if (isDragging) {
    isDragging = false;
    iconWrapper.classList.remove('dragging');
  }

});

重点解读：

.icon-wrapper 表示图标容器的元素。
timer 计时器。
isDragging 表示用户是否长按并开始拖拽。
mousedown 检测用户是否长按开始。如果是，开启计时器，这里是 100 毫秒。
mouseup 如果用户在 100 毫秒内松开了鼠标，则不会进入拖拽状态；否则，开启拖拽状态。

4. 完整代码

下面是完整的 HTML、CSS 和 JavaScript 代码示例。

HTML

<div class="icon-wrapper">
  <div class="icon">
    <img src="path/to/image.png">
  </div>
</div>

CSS

// javascriptcn.com 代码示例
.icon-wrapper {
  position: relative;
  animation: shake 0.82s ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  pointer-events: none;
}

.icon {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  transition: all .2s ease-in-out;
}

.dragging {
  transform: scale(1.2);
}

JavaScript

// javascriptcn.com 代码示例
const iconWrapper = document.querySelector('.icon-wrapper');

let timer = null;
let isDragging = false;

iconWrapper.addEventListener('mousedown', () => {

  // 开启长按计时器
  timer = setTimeout(() => {
    if (!isDragging) {
      isDragging = true;
      iconWrapper.classList.add('dragging');
    }
  }, 100);

});

iconWrapper.addEventListener('mouseup', () => {

  // 清除定时器
  clearTimeout(timer);

  // 执行拖动逻辑
  if (isDragging) {
    isDragging = false;
    iconWrapper.classList.remove('dragging');
  }

});

总结

在 Material Design 中，我们通过简单的 CSS 动画和 JavaScript 代码来实现了类似 iOS 的图标震动效果。这种互动特效提示用户当前的操作状态，增强用户体验，也可以提升应用品质。希望这篇文章对你的前端开发工作有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6528460a7d4982a6ebac80c1