什么是 Material Design？
Material Design 是谷歌在 2014 年提出的一套设计规范，目的是让用户界面更加直观、自然、流畅。它是一个基于平面设计和传统印刷设计结合而成的 3D 式设计语言，旨在为设计师和开发人员提供一种新的设计思路和技术方案，以提供更优质的用户体验。
在 Material Design 中，动画是至关重要的元素之一。它们可以使应用程序更加人性化，让用户更快地了解您的应用程序，并提供更高效的交互。在这篇文章中，我们将探讨 Material Design 规范中的动画技巧。
Material Design 指南中的动画设计
Material Design 指南将动画分为 3 种类型：过渡动画、可见性动画和操作动画。下面我们将逐一介绍每种动画类型的设计技巧和示例。
过渡动画
过渡动画是在元素之间进行转换时发生的动画。在 Material Design 中，这些动画的主要目的是让用户感觉自然、流畅，从而提高用户体验。
在过渡动画中，有几个重要的设计原则需要遵循：
- 协调性：元素的进入和离开动画应该使用相同的特效。
- 保持连续：动画中的元素应尽可能保持连续。这将在用户之间创建更加自然的过渡。
- 自然速度：过度动画应该与用户操作自然连接，速度不要过快或过慢。
- 强调点：动画中应该有一个重点，以引起用户的注意。
下面是一个简单的例子。当用户点击屏幕上的按钮时，移动到下一页时，一个蓝色圆形会从右上角滑动到屏幕中央。
--------- -----
------
------
----- ----------------
--------------- --------------
-------
------ -
------ -----
------- -----
----------------- --------
--------- ---------
---- ----
----- ----
-------- --
-------- -----
---------------- -------
------------ -------
----------- -------
---------- -----
-
------ -
------ -----
------- -----
----------------- --------
--------- ---------
---- ----
----- ----
-------- --
-------- -----
---------------- -------
------------ -------
----------- -------
---------- -----
-
------ -
---------- -----
-------- ---- -----
----------------- --------
------ --------
-------------- ----
------- -----
-
------- -
------ ------
------- ------
-------------- ----
----------------- --------
--------- ---------
---- ------
------ ------
-------- --
---------- ------------ ----- -----
-
---------- ------------ -
-- -
---- ------
------ ------
-
---- -
---- -------- - ------
------ -------- - ------
-
-
--------
-------
------
---- -----------
------- -------------------------------------
------
---- -----------
------------
------
---- ------------------
--------
-------- ------------ -
--------------------------------------------- - ----
--------------------------------------------- - ----
-
---------
-------
-------可见性动画
可见性动画是通过视图元素的操作来控制可见性。这些操作可以包括展开、折叠、显示、隐藏等。
在可见性动画中，有几个重要的设计原则需要遵循：
- 控制动画：动画的目的是为了使操作更加流畅和自然。不要单纯地为了动画而使用动画。
- 清晰的界限：动画的起点和终点必须很清楚，使用户很明显地知道操作的变化。
- 动效连续性：将动画与用户操作相关联，要确保动画不会积压或延迟，以便使用户操作的连续性更好。
下面是一个简单的例子。当用户点击按钮时，toggle 弹出框会从屏幕底部滑入。
--------- -----
------
------
----- ----------------
--------------- --------------
-------
------- -
------ ------
------- ------
----------------- --------
--------- ---------
------- -------
----- -------- - -------
-------- --
---------- ------------ ----- -----
-
------ -
---------- -----
-------- ---- -----
----------------- --------
------ --------
-------------- ----
------- -----
-
---------- ------------ -
-- -
------- -------
-
---- -
------- ----
-
-
--------
-------
------
------- ----------------------------------
---- ------------
--------------
----------------- -------- --------------------
------
--------
-------- -------- -
--- - - ----------------------------------
--- --- - -------------------
------------------ - ---- --- --------- - -------- - -----------
-
---------
-------
-------操作动画
操作动画是在用户与应用程序进行交互时发生的动画。在 Material Design 中，这些动画旨在告诉用户当前系统正在进行哪些操作。
在操作动画中，有几个重要的设计原则需要遵循：
- 轻快：应该尽可能快地完成动画，以使用户感到当前系统正在快速响应事件。
- 有意义：动画应该与操作相关联。
- 可预测性：动画应该准确地预测并解释系统当前的状态。
下面是一个简单的例子。我们将创建一个简单的下拉菜单，当点击菜单时，菜单项将运动到视野中并呈现。
--------- -----
------
------
----- ----------------
--------------- --------------
-------
----- -
------ ------
----------------- --------
--------- ---------
---- -------
------ ----
-------- --
---------- --------- ----- -----
-
------ -
---------- -----
-------- ---- -----
----------------- --------
------ --------
-------------- ----
------- -----
-
---------- -
-------- ---- -----
---------- -----
------- --------
-
---------- --------- -
-- -
---- -------
-
---- -
---- ----
-
-
--------
-------
------
------- ------------------------------
---- ----------
---- ----------------- -----------------------------------
---- ----------------- -----------------------------------
---- ----------------- -----------------------------------
------
--------
-------- -------- -
--- - - --------------------------------
-- ------------ --- --------- -
----------- - ------
- ---- -
----------- - ---------
-
-
---------
-------
-------总结
动画在 Material Design 中扮演着至关重要的角色。通过使用这些动画，设计师可以增强用户体验，使应用程序变得更自然、更流畅。本文介绍了 Material Design 指南中的 3 种动画类型的设计技巧，并给出了每种动画类型的简单示例。这些原则将有助于您设计更具有吸引力、现代感和流畅感的界面。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652d065e7d4982a6ebe843eb