Material设计的动画效果如何实现?

How to implement the animation effects of Material Design?

我对这个概念很陌生,仍在努力理解它。我期待 google 会提供类似 bootstrap 的东西,它与 CSS 和 JavaScript 捆绑在一起,让你通过简单地输入一些 CSS class.

但是在material设计主页上发现,资源都是图形文件,需要自己写JavasSript来应用动画效果吗?而如果每个人都写自己的JavaScript,怎么可能一致呢?我错过了什么吗?

我认为您下载了错误的文件。有一个 JS 文件和一个 CSS 文件。您可以在此处查看演示:https://material.angularjs.org,看看有什么可能。它类似于 bootstrap,但使用指令而不是 类(您的站点也需要 angular)

<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.js"></script>

<link href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css" rel="stylesheet" type="text/css">

Angular Material,我 linked 的库是使用 Angular JS 实现的 material 设计。该团队得到 Google 的支持,许多开发人员现在或过去曾为 Google 工作,但我不确定它是否是官方 Google 产品。

Material 设计 你 link 似乎是一个反应库,它 link 到这个 github这解释了它,https://github.com/callemall/material-ui,但它只是使用不同的 JS 库来实现组件(React vs Angular)。您在评论中 link 访问的页面似乎是某种风格指南。我看不到任何地方可以为它预建 css/js。不过,这些组件似乎与 Angular Material 中的组件相同。

Polymer 是一个网络组件 polyfill。这样您就可以立即开始构建自己的 Web 组件,它不是预制组件库。 https://css-tricks.com/modular-future-web-components/

您在问题中使用的标签的摘录回答了您的问题:

Material design is Google's guide for visual, motion, and interaction design across platforms and devices, introduced with Android 5.0 Lollipop.

Material 设计是由 Google 制定的规范,它定义了应用程序 UI 和用户体验应该如何。它不仅适用于 Web 应用程序开发。例如,Google material 设计正在 Andriod 应用程序中使用。所以是的,我们必须编写自定义代码来为我们正在使用的技术实现 UI 和 UX。幸运的是,有许多库实现了 material 设计规范。

它们如何保持一致?好吧,这就是规范的用途。开发 material 设计组件的任何人都应遵循 material 设计规范,否则 - 它不是 material 设计。

查找更多信息:

以前的答案很重要,但是这里有一个更清晰的 OP 答案:

Material Design guidelines 只是每个人都应遵循的标准,无论他们使用的是何种技术(例如 C++、Javascript 甚至打印)。

直到最近,在您的应用中实现 MD 的唯一方法是使用第 3 方库(有很多)或手动调整您的设计以满足 MD 规范。

Google 现在有一个官方实现,带有可下载的,称为 Material Components。您可以使用它,也可以从任何一个第 3 方库中选择。

MD 库通常分为 3 组:

1 独立 MD 库,使用 JS 和 CSS,没有框架依赖性。官方Material Components就是一个例子

2 个 MD 库,用于流行的 JS 框架,如 Angular、React 和 jQuery。如果您的应用程序是围绕框架构建的,那么最好为其使用 MD 库。

3 CSS-only 实现,这让你在视觉上走得很远,但在交互方面有明显的局限性。

Google 自己搜索 "Material Design libraries" 就可以找到它们。