Merge pull request #189 from ant-design/update-language

Update language

language/animate-term.md

@@ -2,6 +2,7 @@
 order: 6
 chinese: 动画术语
 english: animate term
+category: 动效参数
 ---
 
 ## 动画基本参数术语说明
@@ -70,4 +71,8 @@ english: animate term
 |   saturate        | `{ saturate: 2 }` 饱和度到 200% |
 |   blur            | `{ blur: '20px' }` 模糊到 20px |
 
+## svg 参数
+
+任何数值为 number 的参数，此处不添加表格，如有需求可查看 [svg 教程](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial)；
+
 > 以上为 tween-one 里的动画可支持参数，如有其它样式可动画或以上有误，烦请 PR 来修改。。

language/basic.md

@@ -1,68 +1,25 @@
 ---
 order: 0
-chinese: 基本原则
-english: Basic
+chinese: 动效
+english: Motion
 ---
 
-Ant Motion 在界面里主要是来加强体验舒适度、描述层级关系、增加界面活力、反馈与意向等功能性的动效。
+界面动效能加强用户认知且增加活力。
 
-### 动效重要性
+## 动效价值
 
-- 让界面里的元素更加自然，贴近我们现实生活。
+- **增加体验舒适度：** 让用户认知过程更为自然。
 
-- 第一时间吸引注意力，突出重点。
+- **增加界面活力：**第一时间吸引注意力，突出重点。
 
-- 体现元素之间的层级与空间关系。
+- **描述层级关系：**体现元素之间的层级与空间关系。
 
-- 提供反馈、体现意向性，增强用户操作感。 
+- **提供反馈、明确意向：**助力交互体验。
 
-### 有意义动效
+## 衡量动效意义
 
-衡量一个动效是否有意义，我们以以下几个标准来考核：
+衡量一个动效是否有意义，我们可以通过以下几个标准来考核：
 
-- 添加动效后是否会提高产品的可用性，必须带有明确的目的性，提升用户的舒适度，不做多余或炫技的动效。
+- **一个动效的存在是否合理：**是否带有明确的目的性，助力交互体验，没有多余的动效。
 
-- 以提升产品界面的灵动性、独特的气质和带入感，独特的动效可增强用户对产品的认知和情绪的带入。
-
-- 添加动效后是否影响到性能，保持 FPS 的稳定性，要求在 30 以上，不出现大幅度波动丢帧或者卡顿现象, 动效过渡必须流畅。
-
-
-## 主要原则
-
-在 Ant Design 的中后台产品，让我们联想到的三个条件:
-
-- 动效能够快速的完成; 
-- 确定性非常强; 
-- 幅度不能太大; 
-
-所以在 Ant Design 的设计原则上再总结出三个动效原则: 自然，高效，克制。
-
-```__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/combined.md

@@ -0,0 +1,40 @@
+---
+order: 4
+chinese: 组合
+english: Combined
+---
+
+组合动效是将多种动画效果组合起来运用在单个元素或者界面中的表现方式，吸引用户的注意，让用户快速了解信息的主次关系。ant design 最常用的组合动效有以下三种：
+- 单元素组合动画
+- 多元素列队动画
+- 多元素聚散动画
+
+## 单元素组合动效
+
+单元素组合动画是指将多个动画参数附加于一个元素上，通过不同的动画参数帮助用户实现自然的认知过程。
+
+以下图片展开运用了缩放、位移与透明的动效组合来完成：
+
+<video src="https://gw.alipayobjects.com/os/rmsportal/YBANcCRaJoJHHfUDEfjI.mp4" loop="true" class="video-min"/>
+
+## 多元素队列动效
+
+队列一般指同个区块里多个元素的进场或出场，根据元素的排列顺序，有序的进入或依次的退出，实现更为自然的视觉过渡。
+
+### 1.单向布局
+
+由单例元素横向或纵向形成的布局，依次展示动效出场。
+
+<video src="https://gw.alipayobjects.com/os/rmsportal/axrzGRjObTxHUIruLfGT.mp4" loop="true" class="video"/>
+
+### 2.区块横纵布局
+
+由多行元素组合的一个区块性布局，将界面元素以左上角为起点右下角为终点，设置一个过渡自然的出场顺序
+
+<video src="https://gw.alipayobjects.com/os/rmsportal/wZScTzhmfLHRmDsiIHhf.mp4" loop="true" class="video"/>
+
+## 多元素聚散动效
+
+以中心点为主向外扩散或汇聚的一个效果，强调主体以及分支之间的关系，能够快速的让用户了解信息的关联性。
+
+<video src="https://gw.alipayobjects.com/os/rmsportal/RgdIUjMWWlAotyTDleDf.mp4" loop="true" class="video"/>

language/principle.md

@@ -0,0 +1,40 @@
+---
+order: 1
+chinese: 原则
+english: Principle
+---
+
+在企业级应用的产品设计中，使用动效和前台类产品有很大的不同，助力交互行为和增强信息认知显得尤为重要，在 ant design 设计价值观的基础之上，我们衍生出动效设计的三原则：
+
+<br/>
+
+```__react
+import Principle from '../src/theme/template/other/Principle';
+ReactDOM.render(<Principle />, mountNode);
+```
+
+<br/>
+
+## 自然
+
+自然的动效背后体现的是自然运动规律。这就要求动效在转换时保证视觉上的连惯性，让用户感知到这个动作是自然的，是能够引起共鸣的。
+
+以 button 的动效设计为例，设计师将其想像成一片树叶飘浮在水面之上，当你去触碰它时，叶子会下浮再反弹，然后出现涟漪效果。
+
+<video src="https://gw.alipayobjects.com/os/rmsportal/NTMlQdLIkPjOACXsdRrq.mp4" loop="true" class="video-min" />
+
+## 高效
+
+企业级应用追求的是高效的用户体验，与之对应的动效设计也应如此，尽量节省过渡的时间，快速完成过渡的动画效果。
+
+举个例子，在出场与进场的动效里，出场不用大张旗鼓的去吸引用户的注意力，而是做到简单清晰即可。所以我们的出场时间采用了更快的速度,同时也不设置队列依次出场的形式，只需要整块直接消失即可。
+
+<video src="https://gw.alipayobjects.com/os/rmsportal/wMKeLGnpDxhwfCsBqKNN.mp4" loop="true" class="video-min" />
+
+## 克制
+
+尽量避免夸张的动效，做有意义的事，不去做太多的修饰而干扰用户。
+
+如我们的 Menu，在展开时，注重的是菜单的内容，而右侧的 icon 切换并不是主要元素，不需要过度强调去分散用户的注意，所以只需在不经意间切换，明确指示变化即可。
+
+<video src="https://gw.alipayobjects.com/os/rmsportal/FeUCANmoDRwCSmIcnPNF.mp4" loop="true" class="video-min" />

language/space.md

@@ -1,32 +1,41 @@
 ---
-order: 2
-chinese: 层级空间
+order: 3
+chinese: 空间
 english: Space
-category: 设计语言
 ---
 
-现实空间里，物体存在远小近大的原则，运动则有远慢近快；例如汽车在公路上行驶，离汽车越近的物体，移动速度越接近汽车的速率。所以以汽车点为X轴原点，那离原点越远Z轴越大时，速度就越慢。
+现实空间里，物体存在远小近大的原则，运动则有远慢近快。在动效设计时，处理和空间相关的话题时，我们需要考虑两方面的因素：
 
-那么动效设计中同样存在这个原则，Z轴向的空间距离来影响动画效果，可以使用时间的快慢或幅度的大小来体现。
+- **视差：**例如汽车在公路上行驶，离汽车越近的物体，移动速度越接近汽车的速率。以行进中的汽车为例，汽车所在的点为 X 轴的基准点，离基准点越远时，速度就越慢。动效设计中同样存在这个原则，元素的空间距离会影响动画效果，从而影响动效设计的决策。
+- **大小：**遵循远处的物体小，近处的物体大的原则。
 
-## 空间示意图
-
-<img src="https://zos.alipayobjects.com/rmsportal/wjBQyXjKSMqJJlf.png" width="100%" class="content-img"/>
 
-## 层级与时间
+## 空间示意图
 
-以下时间为示例，组件动画时间按比例递增。
+<img src="https://zos.alipayobjects.com/rmsportal/wjBQyXjKSMqJJlf.png" width="80%" class="content-img"/>
 
-<img src="https://zos.alipayobjects.com/rmsportal/bVutyJfjzrRzFaV.jpg" width="100%" class="content-img"/>
 
-## banner视差示意图
+## 视差
 
-如果 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"/>
+
+<br/>
+
+
+以时间的差距来体现视差，详细查看动效展示里的[详细说明切换](/exhibition/demo/detail-switch)。
+
+<video src="https://gw.alipayobjects.com/os/rmsportal/GLOykZbKTlTDpzNDwNOq.mp4" loop="true" class="video"/>
+
+## 大小
+
+在下面这个案例中，包含两层抽屉式的的界面展开，遵循远小近大的原则，当近处层级出现时，底部的层级做适当的缩小，体现出空间感。
 
-<video src="https://gw.alipayobjects.com/os/rmsportal/EvKNxwOYRGHOqkvwzQGi.mp4" loop="true" class="video"/>
+<video src="https://gw.alipayobjects.com/os/rmsportal/qpTkwUkpOmlbaEVuHDgj.mp4" loop="true" class="video"/>