在现代的Web应用程序中，动态图标成为了设计师和开发者们非常关注的一个话题。Material Design提供了丰富的图标资源，我们可以轻易地使用它们在我们的应用程序中进行交互和导航。但当需要自定义一个动态的图标时，我们就需要更多的学习和技能。在这篇文章中，我们将学习如何用Material Design实现动态图标。
什么是动态图标
动态图标（也称为活动指示器）是在一个应用程序中，用户与界面的交互反应后，以动画展示的反馈的一个UI元素。这样做的好处是，可以提高用户的体验感和信任度，让用户感到应用程序在运行中。
Material Design的动态图标
使用Material Design的动态图标，我们需要把它们划分为两类：静态图标和动态图标。静态图标就是我们平时在Android、iOS、Web应用中看到的图形图标，这些图标不包含任何的动画和交互效果。而动态图标则相反，当用户发生交互事件时，这些图标会进行一定的动画展示，告诉用户它们在工作中，并提高用户的信任感。
在Material Design中实现动态图标有很多方式。我们可以使用CSS3、JavaScript、SVG等等来完成这个目标。 然而，最快最简单的方法是使用Font Awesome，一个流行的图标字体库，它包含了超过1,000个常用图标。使用这个库，我们可以通过添加类名、字体颜色和背景颜色来快速实现动态图标。
如何在Web应用中使用动态图标
接下来，我们将简单介绍如何使用Font Awesome在Web应用中创建一个简单的动态图标。在本例中，我们将使用CSS3动画。这个动画效果可以让图标在用户点击后反弹。
引入Font Awesome库
在你的HTML文件中引入Font Awesome库:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
创建HTML元素
接下来，我们将创建一个包含Font Awesome图标的HTML元素。它将作为我们的动态图标的容器。
<div class="icon-container"> <i class="fa fa-heart"></i> </div>
我们需要给这个元素一个样式，使其可以合适的展示我们的图标。
-- -------------------- ---- ------- --------------- - ------ ----- ------- ----- -------------- ---- ----------------- -------- -------- ----- ---------------- ------- ------------ ------- ------- -------- -
我们使用了flexbox这个布局方式，这样就可以将图标在容器中居中了。
添加CSS3动画
最后，我们将添加一个CSS3动画，使图标能够反弹。我们需要先给图标定义一个初始值。 然后，在用户点击之后，我们给图标添加一个动画，使它反弹到高度的一半。
-- -------------------- ---- -------
--------- -
---------- -----
------ -----
---------- --------- ---- ------------
-
---------- --------- -
-- -
---------- ---------
-
--- -
---------- -----------
-
--- -
---------- ---------
-
--- -
---------- -----------
-
---- -
---------- ---------
-
-
--------------- -
---------- -----
-
---------------- -
---------- ----------------
-这样，我们就完成了一个简单的动态图标了。当用户点击这个图标时，它会反弹一下，这样可以让用户感到应用程序在工作中。
结论
在本文中，我们介绍了什么是动态图标，以及如何使用Font Awesome在Web应用中创建一个简单的动态图标。如果你正在寻找一种快速简便的方法来实现动态图标，那么使用Font Awesome是一个好的选择。但是，如果你想要实现更高级的动态图标，那么你需要学习一些高级的技术，如JavaScript和SVG。无论你选择哪种方式，动态图标可以让你的用户感受到你的应用程序在工作中，从而增强用户的信任感。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e5434e9a7045d0d683177