From 4d4e727d3877bbe49f0f464674648439f42ff3dc Mon Sep 17 00:00:00 2001 From: jljsj33 Date: Mon, 2 Jul 2018 15:53:47 +0800 Subject: [PATCH] update 1.6 --- components/animate/index.md | 1 - components/banner-anim/index.md | 1 - components/icon-anim/index.md | 1 - components/queue-anim/index.md | 1 - components/scroll-anim/index.md | 1 - components/tween-one/demo/position.md | 2 +- components/tween-one/index.md | 1 - language/animate-term.md | 2 +- language/aware.md | 1 + language/basic.md | 59 +++++--- language/interact.md | 5 +- language/space.md | 15 +- language/time.md | 20 ++- language/transition.md | 1 + package.json | 8 +- src/theme/static/common.less | 4 +- src/theme/static/page.less | 89 +++++------ src/theme/static/responsive.less | 25 +--- src/theme/template/Content/Page.jsx | 173 ++++++++++++++-------- src/theme/template/Exhibition/Details.jsx | 4 +- src/theme/template/Exhibition/index.jsx | 4 +- src/theme/template/Layout/nav.js | 2 +- src/theme/template/other/Principle.jsx | 27 ++++ src/theme/template/other/principle.less | 25 ++++ src/theme/template/utils.jsx | 39 +++++ 25 files changed, 336 insertions(+), 175 deletions(-) create mode 100644 src/theme/template/other/Principle.jsx create mode 100644 src/theme/template/other/principle.less diff --git a/components/animate/index.md b/components/animate/index.md index e6a46574..6e372f5f 100644 --- a/components/animate/index.md +++ b/components/animate/index.md @@ -1,5 +1,4 @@ --- -category: Components order: 1 chinese: Css样式动画 english: Animate diff --git a/components/banner-anim/index.md b/components/banner-anim/index.md index 6cc47e50..ca276ce0 100644 --- a/components/banner-anim/index.md +++ b/components/banner-anim/index.md @@ -1,5 +1,4 @@ --- -category: Components order: 4 chinese: Banner动画 english: BannerAnim diff --git a/components/icon-anim/index.md b/components/icon-anim/index.md index 7a8f581a..c2d96ac5 100644 --- a/components/icon-anim/index.md +++ b/components/icon-anim/index.md @@ -1,5 +1,4 @@ --- -category: Components order: 5 chinese: Icon 动画 disabled: true diff --git a/components/queue-anim/index.md b/components/queue-anim/index.md index fbd55b1e..24523103 100644 --- a/components/queue-anim/index.md +++ b/components/queue-anim/index.md @@ -1,5 +1,4 @@ --- -category: Components chinese: 进出场动画 cols: 2 order: 2 diff --git a/components/scroll-anim/index.md b/components/scroll-anim/index.md index 3b8f8795..db93c8f6 100644 --- a/components/scroll-anim/index.md +++ b/components/scroll-anim/index.md @@ -1,5 +1,4 @@ --- -category: Components chinese: 页面滚动动画 order: 3 english: ScrollAnim diff --git a/components/tween-one/demo/position.md b/components/tween-one/demo/position.md index 71715cc6..ec621f6d 100644 --- a/components/tween-one/demo/position.md +++ b/components/tween-one/demo/position.md @@ -4,7 +4,7 @@ title: 基本动画效果 mouseEnter: true --- -鼠标经过或手指按下可查看位移效果。如 x, y, z, scale, rotate, blur, marign等, 更多参数参考 [动画述语里](language/animate-term); +鼠标经过或手指按下可查看位移效果。如 x, y, z, scale, rotate, blur, marign等, 更多参数参考 [动画术语](language/animate-term); ```jsx diff --git a/components/tween-one/index.md b/components/tween-one/index.md index af6511ba..255cc409 100644 --- a/components/tween-one/index.md +++ b/components/tween-one/index.md @@ -1,5 +1,4 @@ --- -category: Components chinese: 单元素动画 order: 0 english: TweenOne diff --git a/language/animate-term.md b/language/animate-term.md index 86fb787c..ab2898d4 100644 --- a/language/animate-term.md +++ b/language/animate-term.md @@ -39,7 +39,7 @@ english: animate term | borderWidth | `{ borderWidth: 2 }` 元素当前边框宽度到 2px，同样可用 `borderTopWidth` `borderRightWidth` `borderBottomWidth` `borderLeftWidth` | | borderRadius | `{ borderRadius: 5 }` 元素当前圆角到 5px, 同上, 同样可用 `上 左 下 右` | | borderColor | `{ borderColor: '#FFFFFF' }` 元素当前边框颜色到白色 | -|   boxShadow       | `{ boxShadow: '0 0 10px #000' }` 元素当前阴影模糊到 10px | +| boxShadow | `{ boxShadow: '0 0 10px #000' }` 元素当前阴影模糊到 10px | |   textShadow     | `{ textShadow: '0 0 10px #000' }` 元素当前文字内容阴影模糊到 10px | ## transform 参数 diff --git a/language/aware.md b/language/aware.md index 193bae7d..1da5d754 100644 --- a/language/aware.md +++ b/language/aware.md @@ -3,6 +3,7 @@ order: 5 chinese: 改善感知 disabled: true english: Aware +category: 设计语言 --- diff --git a/language/basic.md b/language/basic.md index d9c1b273..e979bc17 100644 --- a/language/basic.md +++ b/language/basic.md @@ -6,38 +6,63 @@ english: Basic Ant Motion 在界面里主要是来加强体验舒适度、描述层级关系、增加界面活力、反馈与意向等功能性的动效。 -## 主要原则 +### 动效重要性 -- 基本动画，动效的重要性与有意义的动效。 +- 让界面里的元素更加自然，贴近我们现实生活。 -- 时间栅格与缓动 +- 第一时间吸引注意力，突出重点。 -- 层级空间 +- 体现元素之间的层级与空间关系。 -- 巧用过渡 +- 提供反馈、体现意向性，增强用户操作感。 -- 增加示意 +### 有意义动效 -- 改善感知 +衡量一个动效是否有意义，我们以以下几个标准来考核： -## 动效重要性 +- 添加动效后是否会提高产品的可用性，必须带有明确的目的性，提升用户的舒适度，不做多余或炫技的动效。 -- 让界面里的元素更加自然，贴近我们现实生活。 +- 以提升产品界面的灵动性、独特的气质和带入感，独特的动效可增强用户对产品的认知和情绪的带入。 -- 第一时间吸引注意力，突出重点。 +- 添加动效后是否影响到性能，保持 FPS 的稳定性，要求在 30 以上，不出现大幅度波动丢帧或者卡顿现象, 动效过渡必须流畅。 -- 体现元素之间的层级与空间关系。 -- 提供反馈、体现意向性，增强用户操作感。 +## 主要原则 +在 Ant Design 的中后台产品，让我们联想到的三个条件: -## 有意义动效 +- 动效能够快速的完成; +- 确定性非常强; +- 幅度不能太大; -衡量一个动效是否有意义，我们以以下几个标准来考核： +所以在 Ant Design 的设计原则上再总结出三个动效原则: 自然，高效，克制。 -- 添加动效后是否影响到性能，保持 FPS 的稳定性，要求在 30 以上，不出现大幅度波动或者卡顿现象。 +```__react +import Principle from '../src/theme/template/other/Principle'; +ReactDOM.render(, mountNode); +``` -- 添加动效后是否会提高产品的可用性，必须带有明确的目的性，提升用户的舒适度，不做多余或炫技的动效。 +## 自然 -- 以提升产品界面的灵动性、独特的气质和带入感，独特的动效可增强用户对产品的认知和情绪的带入。 +自然原则里，根据现实物理原理，我们总结出了 4 个动效语言， 详细可点击左侧菜单查看。 + +- 时间栅格 + +- 层级空间 + +- 巧用过渡 + +- 增加示意 + +## 高效 + +在中后台里，我们在动画的过渡需要尽量节省时间，快速而确定性的去完成动画过渡效果，在理想的情况下，用户应当在 100 毫秒内得到操作的反馈，因为人体最快的潜意识动作 -- 一次眨眼的平均持续时间为 100 到 150 毫秒，100 毫秒的间隔给人的感觉就是瞬间。 + +所以在 Ant Design 组件里，我们同样采用了以 100 毫秒为单位，下图为 ant deisgn 的组件动画时间用时。 + + + +## 克制 +- 做最适合的动画，让元素在完成使命的同时尽量的不去做太多的修饰和干扰用户。 +- 在保证自然度的前提下，降底动效的幅度，在不经意间完成指定的效果。 \ 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 实现。 + +