array(2) { ["docs"]=> array(10) { [0]=> array(10) { ["id"]=> string(3) "428" ["text"]=> string(77) "Visual Studio 2017 单独启动MSDN帮助（Microsoft Help Viewer）的方法" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(8) "DonetRen" ["tagsname"]=> string(55) "Visual Studio 2017|MSDN帮助|C#程序|.NET|Help Viewer" ["tagsid"]=> string(23) "[401,402,403,"300",404]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400964" ["_id"]=> string(3) "428" } [1]=> array(10) { ["id"]=> string(3) "427" ["text"]=> string(42) "npm -v；报错 cannot find module "wrapp"" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "zzty" ["tagsname"]=> string(50) "node.js|npm|cannot find module "wrapp“|node" ["tagsid"]=> string(19) "[398,"239",399,400]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400760" ["_id"]=> string(3) "427" } [2]=> array(10) { ["id"]=> string(3) "426" ["text"]=> string(54) "说说css中pt、px、em、rem都扮演了什么角色" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(12) "zhengqiaoyin" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400640" ["_id"]=> string(3) "426" } [3]=> array(10) { ["id"]=> string(3) "425" ["text"]=> string(83) "深入学习JS执行--创建执行上下文（变量对象，作用域链，this）" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "Ry-yuan" ["tagsname"]=> string(33) "Javascript|Javascript执行过程" ["tagsid"]=> string(13) "["169","191"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511399901" ["_id"]=> string(3) "425" } [4]=> array(10) { ["id"]=> string(3) "424" ["text"]=> string(30) "C# 排序技术研究与对比" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "vveiliang" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(8) ".Net Dev" ["catesid"]=> string(5) "[199]" ["createtime"]=> string(10) "1511399150" ["_id"]=> string(3) "424" } [5]=> array(10) { ["id"]=> string(3) "423" ["text"]=> string(72) "【算法】小白的算法笔记：快速排序算法的编码和优化" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "penghuwan" ["tagsname"]=> string(6) "算法" ["tagsid"]=> string(7) "["344"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511398109" ["_id"]=> string(3) "423" } [6]=> array(10) { ["id"]=> string(3) "422" ["text"]=> string(64) "JavaScript数据可视化编程学习（二）Flotr2，雷达图" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "chengxs" ["tagsname"]=> string(28) "数据可视化|前端学习" ["tagsid"]=> string(9) "[396,397]" ["catesname"]=> string(18) "前端基本知识" ["catesid"]=> string(5) "[198]" ["createtime"]=> string(10) "1511397800" ["_id"]=> string(3) "422" } [7]=> array(10) { ["id"]=> string(3) "421" ["text"]=> string(36) "C#表达式目录树（Expression）" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "wwym" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(4) ".NET" ["catesid"]=> string(7) "["119"]" ["createtime"]=> string(10) "1511397474" ["_id"]=> string(3) "421" } [8]=> array(10) { ["id"]=> string(3) "420" ["text"]=> string(47) "数据结构 队列_队列实例：事件处理" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "idreamo" ["tagsname"]=> string(40) "C语言|数据结构|队列|事件处理" ["tagsid"]=> string(23) "["246","247","248",395]" ["catesname"]=> string(12) "数据结构" ["catesid"]=> string(7) "["133"]" ["createtime"]=> string(10) "1511397279" ["_id"]=> string(3) "420" } [9]=> array(10) { ["id"]=> string(3) "419" ["text"]=> string(47) "久等了,博客园官方Android客户端发布" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(3) "cmt" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511396549" ["_id"]=> string(3) "419" } } ["count"]=> int(200) } 222 实现动效太难了？试试 Material Design - 爱码网

实现动效太难了？试试 Material Design

实现动效太难了？试试 Material Design

作者 / Jonas Naimark, Motion Designer, Material Design Team

在之前的文章《剥茧抽丝做 UI 动效，其实很简单》中，我着重强调了 "设计" 一词，这是因为相比较 "实现"，"设计" 还是更简单和自由一些。但我们都知道，如果一个想法不能切实地实现出来，设计得再精巧也是没用的。

正如我们之前有介绍过的，Material Design 的灵感来自 "智能纸" 的隐喻 (我们称为 "量子纸" , Quantum Paper)。它们代表着一系列的表面，可以不断自行适应界面的需求进行变化，从而引导用户进行体验。我们已经使用高程系统 (即量子纸下方的阴影) 准确地渲染了光和影，从而部分实现了这个隐喻。但是，如何以巧妙而优雅的方式让这些表面与动效进行配合，则是一个更加艰巨的挑战。现在，Material 团队很高兴和大家分享一个新项目，来帮助大家更轻松地实现这种动效。

Material 动效系统

我们刚刚发布了新的设计指南和开发文档 (包括 Android 和 Flutter 代码版本)，用于满足最重要的应用动效场景: UI 转场。

  • 动效设计指南

    https://material.io/design/motion/the-motion-system.html

  • Android 开发文档

    https://github.com/material-components/material-components-android/blob/master/docs/theming/Motion.md

  • Flutter 开发文档

    https://pub.dev/packages/animations

强大的动效基础始于精良的转场，这也是可用性的基础特征。有四种过渡模式可以处理组件和全屏视图之间的动画: 容器变换、共享轴、淡入淡出和弹出效果。

下面是您可以实现的转场示例:

实现动效太难了？试试 Material Design

实现动效太难了？试试 Material Design

△ Material 动效系统实现的转场示例

动效系统还提供自定义选项，从而实现个性化的转场样式。您可以调整转场的持续时间、缓动和动画路径，以反映应用的风格。如果打算实现简单直白的风格，您可以使用较短的持续时间、标准缓动和线性路径。要获得更加生动和突出的风格，您可以使用较长的持续时间、更夸张的缓动和弧线路径。

实现动效太难了？试试 Material Design

△ 左侧: 简单直白；右侧: 生动突出

雕琢转场效果是使用动效对应用进行个性化的理想起点。请查阅我们的个性化指南以了解详情。

  • 个性化指南

    https://material.io/design/motion/customization.html

动效协同

实现动效有时候比较困难，部分原因在于能够帮助设计师与工程师协作的工具不是很多。我们都经历过这种情况: 我们挥舞着双手，哑着嗓子，试图向对方解释动效的设计思路。规范动效的过程非常棘手，但是很遗憾，这个过程对于弥合设计与实现之间的差距是很有必要的。这是 Material 团队想要简化动效实现过程中另一个颇具挑战性的课题。

更新过的动效指南以交互式时间轴的方式显示了动效的细节。其中包括理解和制作动画所需的所有基本信息。

实现动效太难了？试试 Material Design

△ 在 Direct 中创建的动效规范演示

这些演示是在一个名为 Direct 的网络应用中编写的，该应用由 Google 的动效设计师 John Schlemmer 创建。它已成为 Google 内部交流动效的常用工具。现在，我们很高兴地在我们的指南中公开分享这些动效规范，以帮助阐述动效设计的所有细节。如果您要使用 Direct 创建和托管自己的动效规范文件，可以在 GitHub 上获取其开源代码。

  • Direct

    https://github.com/material-motion/direct

这仅仅是个开始

实现动效太难了？试试 Material Design

您可能已经注意到，本文提及的内容在 Material Design 页面中被标记为 beta 版。这是因为，Material 团队希望尽早发布此版本，以确保我们在讨论更多功能之前，首先确保正确的技术和设计方法。做这项工作的可选方向很多，请大家务必多多分享您的反馈。希望这仅仅是个开始，我们今后将继续致力于让动效更加易于实现。

您的作品中有使用 Material Design 动效吗？有什么疑问或者建议？欢迎和我们分享。

实现动效太难了？试试 Material Design

推荐阅读

实现动效太难了？试试 Material Design

实现动效太难了？试试 Material Design

实现动效太难了？试试 Material Design

实现动效太难了？试试 Material Design 点击屏末 | 阅读原文 | 查看 Material Design 动效设计指南

实现动效太难了？试试 Material Design

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode