如何实现Material Design的动画效果?

时间:2015-05-28 02:02:33

标签: material-design

我对这个概念很陌生,仍然试图理解它。我期待谷歌会提供类似bootstrap的东西,它与CSS和JavaScript捆绑在一起,让你通过简单地放一些CSS类来实现设计。

但事实证明,在材料设计主页上,资源都是图形文件,那么我们是否需要编写自己的JavasSript来应用动画效果?如果每个人都编写自己的JavaScript,它怎么能保持一致?我错过了什么吗?

3 个答案:

答案 0 :(得分:1)

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

<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 ,我链接的库是使用Angular JS的材质设计实现。该团队得到了Google的支持,许多开发人员现在都在为Google工作,或者过去曾在Google工作,但我不确定它是否是Google的官方产品。

您链接到的

Material Design 似乎是一个反应库,它链接到这个解释它的github https://github.com/callemall/material-ui,但它只是使用不同的JS库来实现组件(React vs Angular)。您在评论中链接到的页面似乎是各种风格指南。我没有看到任何地方为它获得预建的css / js。这些组件看起来与Angular Material中的组件相同。

聚合物是一个Web组件polyfill。因此,您可以立即开始构建自己的Web组件,它不是预制组件库。 https://css-tricks.com/modular-future-web-components/

答案 1 :(得分:1)

您使用的标签的摘录可以回答您的问题:

  

材料设计是谷歌针对Android 5.0 Lollipop推出的跨平台和设备进行视觉,动作和交互设计的指南。

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

他们如何保持一致?嗯,这就是规范的用途。开发材料设计组件的人员应遵循材料设计规范,否则 - 不是材料设计。

查找更多信息:

答案 2 :(得分:0)

以前的答案很有用,但是这里有一个更明确的答案OP:

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

直到最近,将MD应用到您的应用中的唯一方法是使用第三方库(有很多)或者只是手动调整您的设计以符合MD规范。

Google现在有一个官方实施,可下载名为Material Components。您可以使用它,或者仍然可以选择任何一个第三方库。

MD库往往分为3组:

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

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

3个仅限CSS的实现,它可以让您在视觉效果方面走得很远但在交互方面有明显的局限性。

Google自己搜索&#34; Material Design图书馆&#34;你可以找到它们。