+
+## 克制
+- 做最适合的动画，让元素在完成使命的同时尽量的不去做太多的修饰和干扰用户。
+- 在保证自然度的前提下，降底动效的幅度，在不经意间完成指定的效果。
\ No newline at end of file
diff --git a/language/interact.md b/language/interact.md
index 2c2f9d33..78132c59 100644
--- a/language/interact.md
+++ b/language/interact.md
@@ -2,12 +2,9 @@
order: 4
chinese: 增强示意
english: Interact
+category: 设计语言
---
-
-
将用户操作可视化, 来增强用户对操作行为的感知度, 同时也能对元素内容的认知;
## 操作后所发生的事件
diff --git a/language/space.md b/language/space.md
index 78646a42..e9ce2b5d 100644
--- a/language/space.md
+++ b/language/space.md
@@ -2,15 +2,12 @@
order: 2
chinese: 层级空间
english: Space
+category: 设计语言
---
+现实空间里，物体存在远小近大的原则，运动则有远慢近快；例如汽车在公路上行驶，离汽车越近的物体，移动速度越接近汽车的速率。所以以汽车点为X轴原点，那离原点越远Z轴越大时，速度就越慢。
-
-动效设计中存在Z轴向的空间距离来影响动画效果
-
-现实空间里，物体存在远小近大的原则，运动则有远慢近快；
-
-如汽车在公路上行驶，离汽车越近的物体，移动速度越接近汽车的速率。所以以汽车点为X轴原点，那离原点越远Z轴越大时，速度就越慢。
+那么动效设计中同样存在这个原则，Z轴向的空间距离来影响动画效果，可以使用时间的快慢或幅度的大小来体现。
## 空间示意图
@@ -27,3 +24,9 @@ english: Space
如果 banner 里加入跟随鼠标移动,加入空间层次，有效的给每层元素不同的参数，就能摸拟现实的视差效果。
+
+### 动态效果
+
+此效果由 banner-anim 实现。
+
+
\ No newline at end of file
diff --git a/language/time.md b/language/time.md
index 717ce8ac..1d2d609b 100644
--- a/language/time.md
+++ b/language/time.md
@@ -1,13 +1,27 @@
---
order: 1
chinese: 时间栅格
-index: true
english: Time
+category: 设计语言
---
+时间栅格是将每个动画的 timeline 栅格化，在动画的指定时间里，每个时间段的一个拆分;
+比如：一秒有30帧的动画，那么这动画就是由 30 张图片组成，只是每张图片里的元素指定的参数不同, 如下图:
-物体运动在时间栅格中具有不同运动速率和出场，动画停止与启动都不是瞬间完成的，因它需要一段缓冲的时间来加速或减速，因此当物体突然移动或停止，会显的很不自然。
+
+
+
{!this.state.replay && preview(React, ReactDOM)}
diff --git a/src/theme/template/Exhibition/index.jsx b/src/theme/template/Exhibition/index.jsx
index 7fb60ac9..8cdd5cd4 100644
--- a/src/theme/template/Exhibition/index.jsx
+++ b/src/theme/template/Exhibition/index.jsx
@@ -29,8 +29,8 @@ export default class Exhibition extends React.Component {
{title}
); }); - return (
-
+ return (
+
(
+
+ {childrenToRender}
+
+ );
+ }
+}
diff --git a/src/theme/template/other/principle.less b/src/theme/template/other/principle.less
new file mode 100644
index 00000000..100fa50c
--- /dev/null
+++ b/src/theme/template/other/principle.less
@@ -0,0 +1,25 @@
+@import "../../static/custom";
+
+.principle-wrapper {
+ width: 100%;
+ .principle {
+ width: 100%;
+ min-height: 180px;
+ display: inline-block;
+ margin-right: 12.5%;
+ text-align: center;
+ font-size: 24px;
+ border-radius: 4px;
+ border: 1px solid @line-color;
+ &:last-child {
+ margin-right: 0;
+ }
+ h2 {
+ margin: 32px 0;
+ }
+ p {
+ font-size: 12px;
+ padding: 0 24px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/theme/template/utils.jsx b/src/theme/template/utils.jsx
index bfd9a6e6..efce3fe7 100644
--- a/src/theme/template/utils.jsx
+++ b/src/theme/template/utils.jsx
@@ -42,3 +42,42 @@ export function scrollClick(e) {
scrollTo(toTop);
}
}
+
+const themeConfig = {
+ categoryOrder: {
+ 基本原则: 0,
+ 设计语言: 1,
+ 动画术语: 2,
+ },
+};
+
+export function getMenuItems(moduleData) {
+ const menuMeta = moduleData.map(item => item.meta);
+ const menuItems = [];
+ const sortFn = (a, b) => (a.order || 0) - (b.order || 0);
+ menuMeta.sort(sortFn).forEach((meta) => {
+ if (!meta.category) {
+ menuItems.push(meta);
+ } else {
+ const category = meta.category;
+ let group = menuItems.filter(i => i.title === category)[0];
+ if (!group) {
+ group = {
+ type: 'category',
+ title: category,
+ children: [],
+ order: themeConfig.categoryOrder[category],
+ };
+ menuItems.push(group);
+ }
+ group.children.push(meta);
+ }
+ });
+ return menuItems.map((i) => {
+ const item = i;
+ if (item.children) {
+ item.children = item.children.sort(sortFn);
+ }
+ return item;
+ }).sort(sortFn);
+}
+
+
+ ));
+ return (
+ {item.title}
+{item.content}
+