codecamp

环境

Material design 是一个包含光线、材料和投射阴影的三维环境。

所有的材料对象都包含 x、y、z 三个维度。

所有的材料对象都有一个 Z 轴厚度。

主光源投射出一个定向的阴影,而环境光从各个角度投射出连贯又柔和的阴影。

材料的厚度

1dp

阴影

阴影是不同高度的材料相互叠加所产生的。

3D 世界

材料所处的环境是一个 3D 空间,这意味着每个对象都有 x、y、z 三维坐标属性,z 轴垂直于显示平面,并延伸向用户视角,每个材料都有 z 轴厚度,标准是 1dp,相当于一个屏幕密度为 160 的设备上的一像素。

在网页上,z 轴被用来分层而不是为了视角。3D 空间通过操纵 y 轴进行仿真。

光线和阴影

在材料环境中,虚拟的光线照射使场景中的对象投射出阴影,直射光投射出一个定向的阴影,而环境光从各个角度投射出连贯又柔和的阴影。

材料环境中的所有阴影都是由这两种光投射产生的,阴影是光线照射不到的地方,因为各个元素在 z 轴上占据了不同大小的位置,遮住了这些光线。在网页上,阴影的实现是在 y 轴上使用多重阴影。下面的案例中,卡片的高度是 6dp。

www.mdui.org

直射光投射的阴影

www.mdui.org

环境光投射的阴影

www.mdui.org

直射光和环境光混合投影

概述
材料属性
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

无标题文章

无标题目录

无标题目录

无标题目录

无标题目录

无标题目录

无标题目录

无标题目录

无标题目录

无标题目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }