Material Design 是 Google 推出的一种设计语言，它强调物理性和现实感，让用户感受到直观、自然和美感。在 Material Design 中，阴影和动画是非常重要的元素，它们可以让 UI 更加生动、有趣，提升用户体验。本文将介绍如何在 Material Design 中使用阴影和动画来打造更好的 UI 效果。
阴影
阴影是 Material Design 中非常重要的一个元素，它可以让 UI 元素更加立体、有深度感。在 Material Design 中，阴影分为两种类型：主要阴影和次要阴影。主要阴影是指 UI 元素之间的阴影，次要阴影是指 UI 元素内部的阴影。
主要阴影
主要阴影是指 UI 元素之间的阴影，它可以让 UI 元素之间产生深度感，让用户感觉到 UI 元素之间有层次感。在 Material Design 中，主要阴影有两种类型：拟物化阴影和平面化阴影。
拟物化阴影
拟物化阴影是指 UI 元素之间的阴影，它可以让 UI 元素看起来更加真实、有物理性。在 Material Design 中，拟物化阴影的大小和位置是固定的，它不会随着 UI 元素的移动而改变。拟物化阴影的大小和位置可以通过以下代码来设置：
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
上面的代码中，第一个参数是水平偏移量，第二个参数是垂直偏移量，第三个参数是阴影的模糊半径，第四个参数是阴影的颜色。
平面化阴影
平面化阴影是指 UI 元素之间的阴影，它可以让 UI 元素看起来更加扁平、简洁。在 Material Design 中，平面化阴影的大小和位置是随着 UI 元素的移动而改变的，它可以让 UI 元素之间产生动态效果。平面化阴影的大小和位置可以通过以下代码来设置：
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25), 0px 4px 8px rgba(0, 0, 0, 0.25);
上面的代码中，第一个参数是水平偏移量，第二个参数是垂直偏移量，第三个参数是阴影的模糊半径，第四个参数是阴影的颜色。这里使用了两个阴影，分别表示 UI 元素的主要阴影和次要阴影。
次要阴影
次要阴影是指 UI 元素内部的阴影，它可以让 UI 元素看起来更加立体、有深度感。在 Material Design 中，次要阴影的大小和位置是固定的，它不会随着 UI 元素的移动而改变。次要阴影的大小和位置可以通过以下代码来设置：
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.25);
上面的代码中，第一个参数是阴影的类型，inset 表示内部阴影，第二个参数是水平偏移量，第三个参数是垂直偏移量，第四个参数是阴影的模糊半径，第五个参数是阴影的颜色。
动画
动画是 Material Design 中非常重要的一个元素，它可以让 UI 更加生动、有趣，提升用户体验。在 Material Design 中，动画分为两种类型：进入动画和退出动画。进入动画是指 UI 元素进入屏幕时的动画，退出动画是指 UI 元素退出屏幕时的动画。
进入动画
进入动画是指 UI 元素进入屏幕时的动画，它可以让用户感受到 UI 元素的出现，增加用户的注意力。在 Material Design 中，进入动画有多种类型，比如：淡入、滑动、弹出等。进入动画的实现可以通过以下代码来设置：
animation-name: fadeIn; animation-duration: 1s;
上面的代码中，animation-name 表示动画的名称，animation-duration 表示动画的持续时间。
退出动画
退出动画是指 UI 元素退出屏幕时的动画，它可以让用户感受到 UI 元素的消失，增加用户的满足感。在 Material Design 中，退出动画有多种类型，比如：淡出、滑动、弹出等。退出动画的实现可以通过以下代码来设置：
animation-name: fadeOut; animation-duration: 1s;
上面的代码中，animation-name 表示动画的名称，animation-duration 表示动画的持续时间。
示例代码
下面是一个使用阴影和动画的 Material Design 示例代码：
-- -------------------- ---- -------
---- -------------
---- --------------------
---- ------
------
---- ------------------
---- ----
------
---- --------------------
---- ------
------
-------- -------------------- ---- ------- ----- - ----------------- -------- -------------- ---- ----------- --- --- --- ------- -- -- ------ --- --- --- ------- -- -- ------ --------------- ------- ------------------- --- - ------------ - ----------------- -------- -------- ---- - ---------- - -------- ---- - ------------ - ----------------- -------- -------- ---- ----------- ----- --- --- --- ------- -- -- ------ -
上面的代码中，使用了阴影和动画来实现一个卡片效果。卡片有一个白色背景、圆角边框和主要阴影。卡片内部有一个头部、主体和底部，头部和底部有次要阴影。卡片的进入动画是淡入效果，持续时间为 1 秒。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d94dd7a941bf71340e39e9
