什么是 Material Design？
Material Design 是谷歌在 2014 年提出的一套设计规范，目的是让用户界面更加直观、自然、流畅。它是一个基于平面设计和传统印刷设计结合而成的 3D 式设计语言，旨在为设计师和开发人员提供一种新的设计思路和技术方案，以提供更优质的用户体验。
在 Material Design 中，动画是至关重要的元素之一。它们可以使应用程序更加人性化，让用户更快地了解您的应用程序，并提供更高效的交互。在这篇文章中，我们将探讨 Material Design 规范中的动画技巧。
Material Design 指南中的动画设计
Material Design 指南将动画分为 3 种类型：过渡动画、可见性动画和操作动画。下面我们将逐一介绍每种动画类型的设计技巧和示例。
过渡动画
过渡动画是在元素之间进行转换时发生的动画。在 Material Design 中，这些动画的主要目的是让用户感觉自然、流畅，从而提高用户体验。
在过渡动画中，有几个重要的设计原则需要遵循：
- 协调性：元素的进入和离开动画应该使用相同的特效。
- 保持连续：动画中的元素应尽可能保持连续。这将在用户之间创建更加自然的过渡。
- 自然速度：过度动画应该与用户操作自然连接，速度不要过快或过慢。
- 强调点：动画中应该有一个重点，以引起用户的注意。
下面是一个简单的例子。当用户点击屏幕上的按钮时，移动到下一页时，一个蓝色圆形会从右上角滑动到屏幕中央。
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Material Design</title>
<style>
#page1 {
width: 100%;
height: 100%;
background-color: #ffffff;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 36px;
}
#page2 {
width: 100%;
height: 100%;
background-color: #ffffff;
position: absolute;
top: 0px;
left: 0px;
z-index: 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 36px;
}
button {
font-size: 24px;
padding: 12px 24px;
background-color: #2196F3;
color: #ffffff;
border-radius: 4px;
border: none;
}
#circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #2196F3;
position: absolute;
top: -50px;
right: -50px;
z-index: 2;
animation: page2-circle 500ms ease;
}
@keyframes page2-circle {
0% {
top: -50px;
right: -50px;
}
100% {
top: calc(50% - 50px);
right: calc(50% - 50px);
}
}
</style>
</head>
<body>
<div id="page1">
<button onclick="switchPage()">转到下一页</button>
</div>
<div id="page2">
<h1>第二页</h1>
</div>
<div id="circle"></div>
<script>
function switchPage() {
document.getElementById('page1').style.zIndex = '0';
document.getElementById('page2').style.zIndex = '1';
}
</script>
</body>
</html>可见性动画
可见性动画是通过视图元素的操作来控制可见性。这些操作可以包括展开、折叠、显示、隐藏等。
在可见性动画中，有几个重要的设计原则需要遵循：
- 控制动画：动画的目的是为了使操作更加流畅和自然。不要单纯地为了动画而使用动画。
- 清晰的界限：动画的起点和终点必须很清楚，使用户很明显地知道操作的变化。
- 动效连续性：将动画与用户操作相关联，要确保动画不会积压或延迟，以便使用户操作的连续性更好。
下面是一个简单的例子。当用户点击按钮时，toggle 弹出框会从屏幕底部滑入。
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Material Design</title>
<style>
#toggle {
width: 200px;
height: 300px;
background-color: #ffffff;
position: absolute;
bottom: -300px;
left: calc(50% - 100px);
z-index: 2;
animation: toggle-enter 500ms ease;
}
button {
font-size: 24px;
padding: 12px 24px;
background-color: #2196F3;
color: #ffffff;
border-radius: 4px;
border: none;
}
@keyframes toggle-enter {
0% {
bottom: -300px;
}
100% {
bottom: 0px;
}
}
</style>
</head>
<body>
<button onclick="toggle()">Toggle</button>
<div id="toggle">
<h1>弹出框内容</h1>
<p>这是弹出框中的内容。当你单击 "Toggle" 按钮时，它会滑出并暴露这些内容。</p>
</div>
<script>
function toggle() {
var e = document.getElementById('toggle');
var vis = e.style.visibility;
e.style.visibility = (vis === 'visible' ? 'hidden' : 'visible');
}
</script>
</body>
</html>操作动画
操作动画是在用户与应用程序进行交互时发生的动画。在 Material Design 中，这些动画旨在告诉用户当前系统正在进行哪些操作。
在操作动画中，有几个重要的设计原则需要遵循：
- 轻快：应该尽可能快地完成动画，以使用户感到当前系统正在快速响应事件。
- 有意义：动画应该与操作相关联。
- 可预测性：动画应该准确地预测并解释系统当前的状态。
下面是一个简单的例子。我们将创建一个简单的下拉菜单，当点击菜单时，菜单项将运动到视野中并呈现。
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Material Design</title>
<style>
#menu {
width: 200px;
background-color: #ffffff;
position: absolute;
top: -250px;
right: 0px;
z-index: 2;
animation: menu-drop 200ms ease;
}
button {
font-size: 24px;
padding: 12px 24px;
background-color: #2196F3;
color: #ffffff;
border-radius: 4px;
border: none;
}
.menu-item {
padding: 12px 24px;
font-size: 20px;
cursor: pointer;
}
@keyframes menu-drop {
0% {
top: -250px;
}
100% {
top: 0px;
}
}
</style>
</head>
<body>
<button onclick="toggle()">菜单</button>
<div id="menu">
<div class="menu-item" onclick="alert('选项1被单击')">选项1</div>
<div class="menu-item" onclick="alert('选项2被单击')">选项2</div>
<div class="menu-item" onclick="alert('选项3被单击')">选项3</div>
</div>
<script>
function toggle() {
var e = document.getElementById('menu');
if (e.style.top === '-250px') {
e.style.top = '0px';
} else {
e.style.top = '-250px';
}
}
</script>
</body>
</html>总结
动画在 Material Design 中扮演着至关重要的角色。通过使用这些动画，设计师可以增强用户体验，使应用程序变得更自然、更流畅。本文介绍了 Material Design 指南中的 3 种动画类型的设计技巧，并给出了每种动画类型的简单示例。这些原则将有助于您设计更具有吸引力、现代感和流畅感的界面。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652d065e7d4982a6ebe843eb