Merge pull request #173 from ant-design/1.6.x

update 1.6

components/animate/index.md

@@ -1,5 +1,4 @@
 ---
-category: Components
 order: 1
 chinese: Css样式动画
 english: Animate

components/banner-anim/index.md

@@ -1,5 +1,4 @@
 ---
-category: Components
 order: 4
 chinese: Banner动画
 english: BannerAnim

components/icon-anim/index.md

@@ -1,5 +1,4 @@
 ---
-category: Components
 order: 5
 chinese: Icon 动画
 disabled: true

components/queue-anim/index.md

@@ -1,5 +1,4 @@
 ---
-category: Components
 chinese: 进出场动画
 cols: 2
 order: 2

components/scroll-anim/index.md

@@ -1,5 +1,4 @@
 ---
-category: Components
 chinese: 页面滚动动画
 order: 3
 english: ScrollAnim

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

components/tween-one/index.md

@@ -1,5 +1,4 @@
 ---
-category: Components
 chinese: 单元素动画
 order: 0
 english: TweenOne

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 参数

language/aware.md

@@ -3,6 +3,7 @@ order: 5
 chinese: 改善感知
 disabled: true
 english: Aware
+category: 设计语言
 ---
 
 

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(<Principle />, mountNode);
+```
 
-- 添加动效后是否会提高产品的可用性，必须带有明确的目的性，提升用户的舒适度，不做多余或炫技的动效。
+## 自然
 
-- 以提升产品界面的灵动性、独特的气质和带入感，独特的动效可增强用户对产品的认知和情绪的带入。
+自然原则里，根据现实物理原理，我们总结出了 4 个动效语言， 详细可点击左侧菜单查看。
+
+- 时间栅格
+
+- 层级空间
+
+- 巧用过渡
+
+- 增加示意
+
+## 高效
+
+在中后台里，我们在动画的过渡需要尽量节省时间，快速而确定性的去完成动画过渡效果，在理想的情况下，用户应当在 100 毫秒内得到操作的反馈，因为人体最快的潜意识动作 -- 一次眨眼的平均持续时间为 100 到 150 毫秒，100 毫秒的间隔给人的感觉就是瞬间。
+
+所以在 Ant Design 组件里，我们同样采用了以 100 毫秒为单位，下图为 ant deisgn 的组件动画时间用时。
+
+<img src="https://gw.alipayobjects.com/zos/rmsportal/wSdjxAkxbGkWwUZzqvLW.png" width="80%" style="margin-top: 32px"/>
+
+## 克制
 
+- 做最适合的动画，让元素在完成使命的同时尽量的不去做太多的修饰和干扰用户。
+- 在保证自然度的前提下，降底动效的幅度，在不经意间完成指定的效果。

language/interact.md

@@ -2,12 +2,9 @@
 order: 4
 chinese: 增强示意
 english: Interact
+category: 设计语言
 ---
 
-<script>
-console.log(121)
-</script>
-
 将用户操作可视化, 来增强用户对操作行为的感知度, 同时也能对元素内容的认知;
 
 ## 操作后所发生的事件

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 里加入跟随鼠标移动,加入空间层次，有效的给每层元素不同的参数，就能摸拟现实的视差效果。
 
 <img src="https://zos.alipayobjects.com/rmsportal/IIelDRtkjpRAuvX.png" width="100%" class="content-img"/>
+
+### 动态效果
+
+此效果由 banner-anim 实现。
+
+<video src="https://gw.alipayobjects.com/os/rmsportal/EvKNxwOYRGHOqkvwzQGi.mp4" loop="true" class="video"/>

language/time.md

@@ -1,13 +1,27 @@
 ---
 order: 1
 chinese: 时间栅格
-index: true
 english: Time
+category: 设计语言
 ---
 
+时间栅格是将每个动画的 timeline 栅格化，在动画的指定时间里，每个时间段的一个拆分;
 
+比如：一秒有30帧的动画，那么这动画就是由 30 张图片组成，只是每张图片里的元素指定的参数不同, 如下图:
 
-物体运动在时间栅格中具有不同运动速率和出场，动画停止与启动都不是瞬间完成的，因它需要一段缓冲的时间来加速或减速，因此当物体突然移动或停止，会显的很不自然。
+<div style="text-align: center;">
+  <img src="https://gw.alipayobjects.com/zos/rmsportal/eZpnsUOxqIQZrAVEgbPC.png" width="450">
+</div>
+
+结合自然运动的规律，那物体运动在时间栅格中具有不同运动速率和出场，动画停止与启动都不是瞬间完成的，当物体突然移动或停止，会显的很不自然，因它需要一段缓冲的时间来加速或减速，如下图： 
+
+<div style="text-align: center;">
+  <img src="https://gw.alipayobjects.com/zos/rmsportal/kbTlqDaubwgsBKFNoyGF.png" width="450">
+</div>
+
+## 自然运动效果
+
+具体效果，可查看以下示例，鼠标 hover 时自动播放动画。
 
 ```__react
 import EaseExplain from '../src/theme/template/other/EaseExplain';
@@ -48,6 +62,8 @@ ReactDOM.render(<EaseExplain
 </EaseExplain>, mountNode);
 ```
 
+> 需要注意：是离开可视窗口，如果在窗口中消失的，建议使用前后缓动，同理窗口中出现也一样。
+
 ```__react
 import QueueDemo from '../src/theme/template/other/QueueDemo';
 ReactDOM.render(<QueueDemo />, mountNode);

language/transition.md

@@ -2,6 +2,7 @@
 order: 3
 chinese: 巧用过渡
 english: Transition
+category: 设计语言
 ---
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ant-motion",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "dependencies": {
     "antd": "~3.6.2",
     "deepcopy": "^0.6.3",
@@ -14,11 +14,11 @@
     "raw-js-loader": "^1.4.0",
     "raw-loader": "^0.5.1",
     "rc-animate": "~2.4.4",
-    "rc-banner-anim": "~1.0.0",
-    "rc-drawer": "^1.2.0",
+    "rc-banner-anim": "~2.0.0",
+    "rc-drawer": "^1.5.0",
     "rc-queue-anim": "~1.6.0",
     "rc-scroll-anim": "~2.5.0",
-    "rc-tween-one": "~2.0.6",
+    "rc-tween-one": "~2.1.0",
     "react": "^16.4.0",
     "react-color": "^2.13.8",
     "react-copy-to-clipboard": "~5.0.0",

src/theme/static/common.less

@@ -118,13 +118,13 @@ body {
   width: 100%;
 }
 
-.content-wrapper>.tween-one-leaving,
+/* .content-wrapper>.tween-one-leaving,
 .page-content>.tween-one-leaving,
 .content-wrapper>.tween-one-entering,
 .page-content>.tween-one-entering {
   overflow: hidden;
   height: 100vh;
-}
+} */
 
 .home .queue-anim-leaving {
   position: relative !important;