Material Design 是 Google 推出的一种视觉设计语言，它提供了一套具有层次感、真实感和物理感的设计风格，被广泛应用于 Android 和 Web 等平台的设计中。
在 Material Design 中，UI 转场动效是非常重要的一部分，它可以使用户体验更加流畅和自然。本文将介绍如何使用 Material Design 实现不一样的 UI 转场动效，让你的 Web 应用更加生动有趣。
前置知识
在学习本文前，你需要掌握以下知识：
- HTML、CSS、JavaScript 基础
- Vue.js 或 React.js 基础
实现方式
使用 Material Design 实现不一样的 UI 转场动效，我们需要用到以下两个库：
- Material Components for the Web，它是 Google 推出的 Material Design 风格的 Web 组件库。
- Framer Motion，它是一个强大的动画库，可以让我们轻松地实现各种复杂的动效。
接下来，我们将通过一个具体的示例来演示如何使用 Material Design 和 Framer Motion 实现不一样的 UI 转场动效。
示例说明
我们将实现一个简单的图片浏览器，用户可以点击图片进入详情页面，再点击返回按钮回到列表页面。我们将使用 Framer Motion 实现以下动效：
- 列表页面进入详情页面时，图片会在页面中央缓慢放大。
- 详情页面返回列表页面时，图片会在页面中央缓慢缩小，并且会带有一定的旋转效果。
示例代码
HTML
-- -------------------- ---- -------
---- ---------
---- ----------------- -------------------
----
--- ------------- ------ -- --------- ------------ ------------------ - ----- ------------ - ------
---- --------------- ------------------
-------- ---------- ---------
-----
-----
------
---- ------------------- ------------------
------- ------------------ - ------ ------------ - -----------------
----------- ----------------------- -------------------- -------------------- ---------------------------
---- ----------------------- --------------------------
-------------
------
------CSS
-- -------------------- ---- -------
---------- -
-- -
-------- -----
---------- -----
---------------- -------
------------ -------
------- ------
-------- --
------- --
-
-- -
-------- -----
--------------- -------
------------ -------
---------------- -------
------ ------
------- ------
------- -----
------- --------
--------- -------
-------------- -----
----------- - - ---- ------- -- -- -----
--- -
------ -----
------- -----
----------- ------
----------- --------- ---- -----
-
---- -
----------- -----
---------- -----
------------ -----
----------- -------
-
------- -
--- -
---------- -----------
-
-
-
-
------------ -
--------- ---------
------- ------
------ -
--------- ---------
---- -----
----- -----
---------- -----
------------ -----
------- -----
-------- -----
----------------- ------------
------- --------
-
---------------- -
-------- -----
---------------- -------
------------ -------
------ -----
------- -----
--------- -------
--------- ---------
---- --
----- --
--- -
------ -----
------- -----
----------- ------
-
-
-JavaScript
-- -------------------- ---- -------
------ --- ---- ------
------ - ------ - ---- ----------------
------ - --------- - ---- -------------------
------ - --------- - ---- -------------------
------ ---------------------------------------------------------------
------------------------ - ------
--- -----
--- -------
----- -
--------- -
- ---- ----------------------------------------- ------ --- -- --
- ---- ----------------------------------------- ------ --- -- --
- ---- ----------------------------------------- ------ --- -- --
- ---- ----------------------------------------- ------ --- -- --
- ---- ----------------------------------------- ------ --- -- --
- ---- ----------------------------------------- ------ --- -- --
- ---- ----------------------------------------- ------ --- -- --
- ---- ----------------------------------------- ------ --- -- --
- ---- ----------------------------------------- ------ --- -- --
--
----------- ------
------------- -----
--
--------- -
----- ------- - --------------------------------------- ----------------- ----------------------------
------------------------ -- -
--- ------------------
---
--
--------- -
--------- -
------ -
------ --
--
--
--------- -
------ -
------ --
------- ----
--
--
------------ -
------ -
--------- --
----- ------------
--
--
--
---实现步骤
引入 Material Components for the Web 和 Framer Motion 库。
在 HTML 文件中添加以下代码：
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@material/ripple/dist/mdc.ripple.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@material/dialog/dist/mdc.dialog.min.css"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.jsdelivr.net/npm/framer-motion"></script> <script src="https://cdn.jsdelivr.net/npm/@material/ripple"></script> <script src="https://cdn.jsdelivr.net/npm/@material/dialog"></script>
在 JavaScript 文件中添加以下代码：
import { motion } from 'framer-motion'; import { MDCRipple } from '@material/ripple'; import { MDCDialog } from '@material/dialog';编写 HTML 和 CSS 代码。
在 HTML 文件中添加列表页面和详情页面的代码。
在 CSS 文件中添加列表页面和详情页面的样式。
使用 Framer Motion 实现动效。
在 JavaScript 文件中添加以下代码：
-- -------------------- ---- ------- --------- - --------- - ------ - ------ -- -- -- --------- - ------ - ------ -- ------- ---- -- -- ------------ - ------ - --------- -- ----- ------------ -- -- --在 HTML 文件中使用
motion组件包裹需要实现动效的元素，并将initial、animate、transition三个属性绑定到motion组件上。<motion.div class="image-container" :initial={{initial}} :animate={{animate}} :transition={{transition}}> <img :src="selectedItem.src" :alt="selectedItem.title"> </motion.div>这样，我们就成功地使用 Material Design 和 Framer Motion 实现了不一样的 UI 转场动效。
总结
本文介绍了如何使用 Material Design 和 Framer Motion 实现不一样的 UI 转场动效，通过一个具体的示例演示了实现步骤，并提供了示例代码。希望本文能够对你学习前端动效有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650d3ac695b1f8cacd6f10a1