mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 19:19:26 +08:00
updata spec motion
This commit is contained in:
jljsj
parent
b8ef693afc
commit
e80a0d843b
@ -1,7 +1,7 @@
|
||||
# 缓动函数
|
||||
# 自然运动
|
||||
|
||||
- category: 动画
|
||||
- order: 1
|
||||
- order: 0
|
||||
|
||||
---
|
||||
|
||||
@ -20,9 +20,11 @@
|
||||
|
||||
动画停止与启动都不是瞬间完成的，因它需要一段缓冲的时间来加速或减速，因此，当动画有突然启动，停止或改变方向，都会显得很不自然。
|
||||
|
||||
> 以下图形，红色线与圆环为不推荐示例，蓝色为推荐示例。
|
||||
|
||||
#### 自然缓动
|
||||
|
||||
不要用直线缓动Linear做物体出入动画的缓动；注：Linear函数可做循环动画函数。
|
||||
不要用直线缓动Linear做物体位移或出入动画的缓动；注：Linear函数可做循环动画函数。
|
||||
|
||||
如下图所示，在没有缓动的情况下启动与停止都显得突兀，感觉动画还没结束就停止了，所以在物体运动中避免直线运动。
|
||||
|
||||
@ -32,17 +34,17 @@
|
||||
|
||||
<script>
|
||||
$(function (){
|
||||
new Motion("#J-Linear",{lineData:[{open:[],end:[],stroke:"#f2666c"},{open:[0.455,0.03,0.515,0.955],end:[0.455,0.03,0.515,0.955],stroke:"#71B5DE",openEaseName:"easeInOutQuad",endEaseName:"easeInOutQuad"},],mask:false});
|
||||
new Motion("#J-Linear",{lineData:[{stroke:"#f2666c"},{stroke:"#71B5DE",openEaseName:"easeInOutQuad",endEaseName:"easeInOutQuad"},],mask:false});
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
上图所示缓动函数：红 `Linear`，蓝 `easeInOutQuad`。
|
||||
上图所示缓动函数：红 `Linear`，蓝 `ease-in-out`。
|
||||
|
||||
|
||||
#### 出入动画
|
||||
|
||||
不要做单向动画，进场后不做出场，直接消失元素或回到原点，会让整个画面不协调，反相只出不进也一样。
|
||||
不要做单向动画，进场后不做出场，直接消失元素或回到原点，会造成整体效果不协调和用户视觉上的闪现或其它不好的效果。
|
||||
|
||||
所以有动画的进场必须要有动画的出场，包括导航上的动画。
|
||||
|
||||
@ -51,13 +53,13 @@ new Motion("#J-Linear",{lineData:[{open:[],end:[],stroke:"#f2666c"},{open:[0.455
|
||||
<script>
|
||||
$(function (){
|
||||
new Motion("#J-Symmetric",{lineData:[
|
||||
{open:[0.455,0.03,0.515,0.955],end:[],openEaseName:"easeInOutQuad",endEaseName:"null",stroke:"#f2666c"},
|
||||
{open:[0.645,0.045,0.355,1],end:[0.645,0.045,0.355,1],stroke:"#71B5DE",openEaseName:"easeInOutCubic",endEaseName:"easeInOutCubic"}],
|
||||
{openEaseName:"easeInOutQuad",endEaseName:"null",stroke:"#f2666c"},
|
||||
{stroke:"#71B5DE",openEaseName:"easeInOutCubic",endEaseName:"easeInOutCubic"}],
|
||||
mask:false,exposure:"top"});
|
||||
})
|
||||
</script>
|
||||
|
||||
上图所示缓动函数：红 `easeInOutQuad`，蓝 `easeInOutCubic`。
|
||||
上图所示缓动函数：红 `ease-in-out`，蓝 `ease-in-out-cubic`。
|
||||
|
||||
|
||||
##### 场外出入
|
||||
@ -72,14 +74,14 @@ mask:false,exposure:"top"});
|
||||
|
||||
<script>
|
||||
$(function (){
|
||||
new Motion("#J-Entry"，{lineData:[
|
||||
{open:[0.25,0.46,0.45,0.94]，end:[0.25,0.46,0.45,0.94]，openEaseName:"easeOutQuad"，endEaseName:"easeOutQuad"，stroke:"#f2666c"}，
|
||||
{open:[0.215,0.61,0.355,1]，end:[0.55,0.055,0.675,0.19]，stroke:"#71B5DE"，openEaseName:"easeOutCubic"，endEaseName:"easeInCubic"}]，
|
||||
mask:true，exposure:"bottom"});
|
||||
new Motion("#J-Entry",{lineData:[
|
||||
{openEaseName:"easeOutQuad",endEaseName:"easeOutQuad",stroke:"#f2666c"},
|
||||
{stroke:"#71B5DE",openEaseName:"easeOutCubic",endEaseName:"easeInCubic"}],
|
||||
mask:true,exposure:"bottom"});
|
||||
})
|
||||
</script>
|
||||
|
||||
上图所示缓动函数：红 `easeOutQuad` `easeOutQuad`，蓝 `easeOutCubic` `easeInCubic`。
|
||||
上图所示缓动函数：红 `ease-out` `ease-out`，蓝 `ease-out-cubic` `ease-in-cubic`。
|
||||
|
||||
示例组件：[Message 全局提示](/components/message/)，[Dropdown 下拉菜单](/components/dropdown/)。
|
||||
|
||||
@ -91,35 +93,36 @@ mask:true，exposure:"bottom"});
|
||||
|
||||
2. 如球类物体掉地上的后，反弹几次后停止。
|
||||
|
||||
- 曲线图用的是3次贝塞尔曲线，没法表示Bounce，所以用line替换。
|
||||
- 弹性动画最好结合alpha。
|
||||
|
||||
> 慎用Bounce或Elastic，这两种适用在特殊元素下，一般back即可满足页面上元素的弹动;
|
||||
|
||||
<div id="J-Back"></div>
|
||||
|
||||
<script>
|
||||
$(function (){
|
||||
new Motion("#J-Back",{lineData:[
|
||||
{open:[,end:[0.455,0.03,0.515,0.955],openEaseName:"easeOutBounce",endEaseName:"easeInOutQuad",stroke:"#70f266"},
|
||||
{open:[0.175,0.885,0.32,1.275],end:[0.6,-0.28,0.735,0.045],stroke:"#71B5DE",openEaseName:"easeOutBack",endEaseName:"easeInBack"}],
|
||||
{openEaseName:"easeOutBounce",endEaseName:"easeOutElastic",stroke:"#70f266"},
|
||||
{stroke:"#71B5DE",openEaseName:"easeOutBack",endEaseName:"easeInOutBack"}],
|
||||
mask:false,exposure:"top"});
|
||||
})
|
||||
</script>
|
||||
|
||||
上图所示缓动函数：红 `easeOutBounce` `easeInOutQuad`，蓝 `easeOutBack` `easeInBack`。
|
||||
上图所示缓动函数：绿 `easeOutBounce` `easeOutElastic`(css需自配)， 蓝 `ease-out-back` `ease-in-back`。
|
||||
|
||||
|
||||
## 缓动函数
|
||||
|
||||
Ant Design 提供了一套缓动函数规范动画行为。
|
||||
Ant Design 提供了一套缓动函数规范动画行为供组件使用。
|
||||
|
||||
|名称 |参数 |说明与适用 |
|
||||
|名称 |参数 |说明 |
|
||||
|-------------------|------------------------------------------|---------------------------|
|
||||
|@ease-out | `cubic-bezier(0.215,0.61,0.355,1);` |默认后缓动；适合元素展开时； |
|
||||
|@ease-in | `cubic-bezier(0.55,0.055,0.675,0.19);`|默认前缓动；适合元素关闭时； |
|
||||
|@ease-in-out | `cubic-bezier(0.645,0.045,0.355,1);` |默认前后缓动；适合元素移动； |
|
||||
|@ease-out-back | `cubic-bezier(0.18,0.89,0.32,1.28);` |结束回动；适合弹出框出现时； |
|
||||
|@ease-in-back | `cubic-bezier(0.6,-0.3,0.74,0.05);` |开始回动；适合弹出框关闭； |
|
||||
|@ease-out | `cubic-bezier(0.215,0.61,0.355,1);` |默认后缓动； |
|
||||
|@ease-in | `cubic-bezier(0.55,0.055,0.675,0.19);`|默认前缓动； |
|
||||
|@ease-in-out | `cubic-bezier(0.645,0.045,0.355,1);` |默认前后缓动； |
|
||||
|@ease-out-back | `cubic-bezier(0.18,0.89,0.32,1.28);` |结束回动； |
|
||||
|@ease-in-back | `cubic-bezier(0.6,-0.3,0.74,0.05);` |开始回动； |
|
||||
|@ease-in-out-back | `cubic-bezier(0.68,-0.55,0.27,1.55);` |前后回动； |
|
||||
|@ease-out-circ | `cubic-bezier(0.08,0.82,0.17,1);` |圆形后缓动；适合元素展开时； |
|
||||
|@ease-in-circ | `cubic-bezier(0.6,0.04,0.98,0.34);` |圆形前缓动；适合元素关闭时； |
|
||||
|@ease-in-out-circ | `cubic-bezier(0.78,0.14,0.15,0.86);` |圆形缓动；适合元素移动； |
|
||||
|@ease-out-circ | `cubic-bezier(0.08,0.82,0.17,1);` |圆形后缓动； |
|
||||
|@ease-in-circ | `cubic-bezier(0.6,0.04,0.98,0.34);` |圆形前缓动； |
|
||||
|@ease-in-out-circ | `cubic-bezier(0.78,0.14,0.15,0.86);` |圆形前后缓动； |
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# 组件动画
|
||||
|
||||
- category: 动画
|
||||
- order: 0
|
||||
- order: 2
|
||||
|
||||
---
|
||||
|
||||
@ -206,7 +206,7 @@ var Test = React.createClass({
|
||||
}));
|
||||
return <div>
|
||||
<div className="motion-container">
|
||||
<div ref="demo" className="motion-example">栗子</div>
|
||||
<div ref="demo" className="motion-example"></div>
|
||||
</div>
|
||||
<div className="motion-select">
|
||||
<select onChange={this.handleChange}>{options}</select>
|
||||
@ -220,22 +220,22 @@ React.render(<Test/>, document.getElementById('components-motion-demo-basic'));
|
||||
|
||||
<style>
|
||||
.motion-container {
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
height: 190px;
|
||||
line-height: 190px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.motion-example {
|
||||
background: #4AAFDE;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
line-height: 140px;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
line-height: 180px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
display: inline-block !important;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
background: url(https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg) center/230px;
|
||||
}
|
||||
.motion-select {
|
||||
text-align: center;
|
||||
|
||||
@ -1,14 +1,10 @@
|
||||
# 转场动画
|
||||
# 转换动画
|
||||
|
||||
- category: 动画
|
||||
- order: 1
|
||||
|
||||
---
|
||||
|
||||
### 单页面转场动画
|
||||
|
||||
从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。
|
||||
|
||||
### 视觉连贯性三元素
|
||||
|
||||
- Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
|
||||
@ -18,29 +14,35 @@
|
||||
- Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
|
||||
|
||||
|
||||
### 转场动画
|
||||
## 转场动画
|
||||
|
||||
大页面转场可采用左出右入的形式。
|
||||
从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。
|
||||
|
||||
小的信息元素排布或块状较多的情况下，最好根据一定的路径层次依次进场，区分维度层级，来凸显量级，间隔时间为动画时间的三分之一。
|
||||
- 大页面转场可采用左出右入的形式。
|
||||
|
||||
如不是单页面，页面动画可以为只右入和间隔性出现。
|
||||
- 小的信息元素排布或块状较多的情况下，根据一定的路径层次依次进场，区分维度层级，来凸显量级，来指引用户的视觉轨迹。
|
||||
|
||||
<script src="/static/TweenMax.min.js"></script>
|
||||
<script src="/static/motion.js"></script>
|
||||
|
||||
<div class="video-player">
|
||||
<video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T1QZ4gXdJeXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/rmsweb/T1BIdgXkloXXXXXXXX.mp4" type="video/mp4"></video>
|
||||
<video preload loop><source src="https://t.alipayobjects.com/images/rmsweb/T14q0hXbBdXXXXXXXX.webm" type="video/webm"><source src="https://t.alipayobjects.com/images/T1qWNhXkpeXXXXXXXX.mp4" type="video/mp4"></video>
|
||||
</div>
|
||||
|
||||
> 参考我们的进场组件案例。查看[进场动画组件](/components/enter-animation/)
|
||||
|
||||
## 响应互动
|
||||
|
||||
响应交互一般是指我们在浏览页面时，点击元素时动画给我们视觉上的反馈，每个交互动效都能给我们带来不同视觉效果。
|
||||
|
||||
比如：按钮上的 hover 或 click 效果，随着你的鼠标事件而改变自身或增加元素在按钮上，或者折叠面板和弹出框，点击后给你呈现新加入的信息元素。
|
||||
|
||||
### 可折叠面板
|
||||
|
||||
对于信息元素内容区域的延伸，显示信息元素和进一步内容对象之间的直接连接。
|
||||
|
||||
1.被展开的信息区域内容按照一定的路劲依次进场。
|
||||
- 被展开的信息区域内容按照一定的路径依次进场。
|
||||
|
||||
2.信息元素在收起时照收齐点移动，在视觉上跟随关闭物体。
|
||||
|
||||
<link rel="stylesheet" href="/static/motionDemo.css">
|
||||
<div class="video-player">
|
||||
|
||||
1390
static/motion.js
1390
static/motion.js
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user