Skip to content

Commit

Permalink
support #1126 animationDurationUpdate
Browse files Browse the repository at this point in the history
  • Loading branch information
@kener
kener committed Jan 9, 2015
1 parent feaf7d7 commit da3749f
Show file tree
Hide file tree
Showing 8 changed files with 47 additions and 22 deletions.
14 changes: 11 additions & 3 deletions doc/doc-en.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,9 @@
<li><a href="#AddDataAnimation">addDataAnimation</a></li>
<li><a href="#AnimationThreshold">animationThreshold</a></li>
<li><a href="#AnimationDuration">animationDuration</a></li>
<li>
<a href="#animationDurationUpdate">animationDurationUpdate</a>
</li>
<li><a href="#AnimationEasing">animationEasing</a></li>
</ul>
<li><a href="#GraphDataStructure">Graph data structure</a></li>
Expand Down Expand Up @@ -888,7 +891,10 @@ <h4>option<a name="Option"> </a></h4>
<a href="#Animation" title="">animation</a>, and other related properties like
<a href="#AddDataAnimation" title="">addDataAnimation</a>,
<a href="#AnimationThreshold" title="">animationThreshold</a>,
<a href="#AnimationDuration" title="">animationDuration</a>,
<a href="#AnimationDuration" title="">animationDuration</a>,
<a href="#animationDurationUpdate" title="">
animationDurationUpdate
</a>
<a href="#AnimationEasing" title="">animationEasing</a>).
</td>
</tr>
Expand Down Expand Up @@ -1758,7 +1764,6 @@ <h4>dataRange<a name="DataRange"> </a></h4>
<td> 5 </td>
<td> the number of segments. Defaults to 5. Linear gradient when set to 0. When calculable is true, it is equally split into 100 parts by default. </td>
</tr>

<tr>
<td> <b>{boolean | string}</b> selectedMode </td>
<td> true </td>
Expand Down Expand Up @@ -4251,7 +4256,10 @@ <h4>animationThreshold<a name="AnimationThreshold"> </a></h4>
<P> <b>{number}</b> 2500, threshold of animated elements. No animation if the graphic elements generated are over 2500. It is suggested to disable animation in IE8-. </P>

<h4>animationDuration<a name="AnimationDuration"> </a></h4>
<P> <b>{number}</b> 2000, duration of the animation, in ms. Supports multi-level control. </P>
<P> <b>{number}</b> 2000, duration of the enter animation, in ms. </P>

<h4>animationDurationUpdate<a name="animationDurationUpdate"> </a></h4>
<P> <b>{number}</b> 500，duration of the update animation, in ms.</P>

<h4>animationEasing<a name="AnimationEasing"> </a></h4>
<P> <b>{string}</b> 'BounceOut', easing effect of the main element. Supports multi-level control. See <a href="http://ecomfe.github.io/zrender/doc/doc.html#animation.easing" target="_blank">zrender.animation.easing</a>. Possible values are: <br/>
Expand Down
13 changes: 11 additions & 2 deletions doc/doc.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,9 @@
<li><a href="#AddDataAnimation">addDataAnimation</a></li>
<li><a href="#AnimationThreshold">animationThreshold</a></li>
<li><a href="#AnimationDuration">animationDuration</a></li>
<li>
<a href="#animationDurationUpdate">animationDurationUpdate</a>
</li>
<li><a href="#AnimationEasing">animationEasing</a></li>
</ul>
<li><a href="#图数据表示">图数据表示</a></li>
Expand Down Expand Up @@ -889,6 +892,9 @@ <h4>option<a name="Option"> </a></h4>
<a href="#AddDataAnimation" title="">addDataAnimation</a>，
<a href="#AnimationThreshold" title="">animationThreshold</a>，
<a href="#AnimationDuration" title="">animationDuration</a>，
<a href="#animationDurationUpdate" title="">
animationDurationUpdate
</a>，
<a href="#AnimationEasing" title="">animationEasing</a>）
</td>
</tr>
Expand Down Expand Up @@ -4250,10 +4256,13 @@ <h4>animationThreshold<a name="AnimationThreshold"> </a></h4>
<P> <b>{number}</b> 2500，动画元素阀值，产生的图形原素超过2500不出动画，建议IE8-关闭</P>

<h4>animationDuration<a name="AnimationDuration"> </a></h4>
<P> <b>{number}</b> 2000，动画时长，单位ms，支持多级控制</P>
<P> <b>{number}</b> 2000，进入动画时长，单位ms</P>

<h4>animationDurationUpdate<a name="animationDurationUpdate"> </a></h4>
<P> <b>{number}</b> 500，更新动画时长，单位ms</P>

<h4>animationEasing<a name="AnimationEasing"> </a></h4>
<P> <b>{string}</b> 'BounceOut'，主元素的缓动效果，支持多级控制，详见<a href="http://ecomfe.github.io/zrender/doc/doc.html#animation.easing" target="_blank">zrender.animation.easing</a>，可选有：<br/>
<P> <b>{string}</b> 'BounceOut'，主元素的缓动效果，详见<a href="http://ecomfe.github.io/zrender/doc/doc.html#animation.easing" target="_blank">zrender.animation.easing</a>，可选有：<br/>
'Linear',<br/>
'QuadraticIn', 'QuadraticOut', 'QuadraticInOut',<br/>
'CubicIn', 'CubicOut', 'CubicInOut',<br/>
Expand Down
2 changes: 1 addition & 1 deletion src/chart/bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -861,7 +861,7 @@ define(function (require) {
this.shapeList[i].position = [0, 0];
this.zr.animate(this.shapeList[i].id, '')
.when(
500,
this.query(this.option, 'animationDurationUpdate'),
{ position: [x, y] }
)
.start();
Expand Down
28 changes: 17 additions & 11 deletions src/chart/base.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1333,8 +1333,10 @@ define(function (require) {
var maxLenth = this.option.animationThreshold / (this.canvasSupported ? 2 : 4);
var lastShapeList = this.lastShapeList;
var shapeList = this.shapeList;
var duration = lastShapeList.length > 0
? 500 : this.query(this.option, 'animationDuration');
var isUpdate = lastShapeList.length > 0;
var duration = isUpdate
? this.query(this.option, 'animationDurationUpdate')
: this.query(this.option, 'animationDuration');
var easing = this.query(this.option, 'animationEasing');
var delay;
var key;
Expand Down Expand Up @@ -1377,7 +1379,9 @@ define(function (require) {
if (oldMap[key]) {
// 新旧都有 动画过渡
this.zr.delShape(oldMap[key].id);
this._animateMod(oldMap[key], newMap[key], duration, easing);
this._animateMod(
oldMap[key], newMap[key], duration, easing, 0, isUpdate
);
}
else {
// 新有旧没有 添加并动画过渡
Expand All @@ -1387,7 +1391,9 @@ define(function (require) {
&& key.indexOf('icon') !== 0
? duration / 2
: 0;
this._animateMod(false, newMap[key], duration, easing, delay);
this._animateMod(
false, newMap[key], duration, easing, delay, isUpdate
);
}
}
this.zr.refresh();
Expand Down Expand Up @@ -1422,7 +1428,7 @@ define(function (require) {
/**
* 动画过渡
*/
_animateMod: function (oldShape, newShape, duration, easing, delay) {
_animateMod: function (oldShape, newShape, duration, easing, delay, isUpdate) {
switch (newShape.type) {
case 'polyline' :
case 'half-smooth-polygon' :
Expand All @@ -1435,7 +1441,7 @@ define(function (require) {
ecAnimation.icon(this.zr, oldShape, newShape, duration, easing, delay);
break;
case 'candle' :
if (duration > 500) {
if (!isUpdate) {
ecAnimation.candle(this.zr, oldShape, newShape, duration, easing);
}
else {
Expand All @@ -1445,7 +1451,7 @@ define(function (require) {
case 'ring' :
case 'sector' :
case 'circle' :
if (duration > 500) {
if (!isUpdate) {
// 进入动画，加旋转
ecAnimation.ring(
this.zr,
Expand All @@ -1466,7 +1472,7 @@ define(function (require) {
ecAnimation.text(this.zr, oldShape, newShape, duration, easing);
break;
case 'polygon' :
if (duration > 500) {
if (!isUpdate) {
ecAnimation.polygon(this.zr, oldShape, newShape, duration, easing);
}
else {
Expand Down Expand Up @@ -1496,15 +1502,15 @@ define(function (require) {
* 标注动画
* @param {number} duration 时长
* @param {string=} easing 缓动效果
* @param {Array=} addShapeList 指定特效对象，不知道默认使用this.shapeList
* @param {Array=} addShapeList 指定特效对象，不指定默认使用this.shapeList
*/
animationMark: function (duration , easing, addShapeList) {
var shapeList = addShapeList || this.shapeList;
for (var i = 0, l = shapeList.length; i < l; i++) {
if (!shapeList[i]._mark) {
continue;
}
this._animateMod(false, shapeList[i], duration, easing);
this._animateMod(false, shapeList[i], duration, easing, 0, true);
}
this.animationEffect(addShapeList);
},
Expand Down Expand Up @@ -1561,7 +1567,7 @@ define(function (require) {
addMark: function (seriesIndex, markData, markType) {
var serie = this.series[seriesIndex];
if (this.selectedMap[serie.name]) {
var duration = 500;
var duration = this.query(this.option, 'animationDurationUpdate');
var easing = this.query(this.option, 'animationEasing');
// 备份，复用_buildMarkX
var oriMarkData = serie[markType].data;
Expand Down
2 changes: 1 addition & 1 deletion src/chart/k.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -475,7 +475,7 @@ define(function (require) {
y = 0;
this.zr.animate(this.shapeList[i].id, '')
.when(
500,
this.query(this.option, 'animationDurationUpdate'),
{ position: [ x, y ] }
)
.start();
Expand Down
2 changes: 1 addition & 1 deletion src/chart/line.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -850,7 +850,7 @@ define(function (require) {
this.shapeList[i].position = [0, 0];
this.zr.animate(this.shapeList[i].id, '')
.when(
500,
this.query(this.option, 'animationDurationUpdate'),
{ position: [ x, y ] }
)
.start();
Expand Down
3 changes: 2 additions & 1 deletion src/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1394,7 +1394,8 @@ define(function() {
animation: true, // 过渡动画是否开启
addDataAnimation: true, // 动态数据接口是否开启动画效果
animationThreshold: 2000, // 动画元素阀值，产生的图形原素超过2000不出动画
animationDuration: 2000,
animationDuration: 2000, // 过渡动画参数：进入
animationDurationUpdate: 500, // 过渡动画参数：更新
animationEasing: 'ExponentialOut' //BounceOut
};

Expand Down
5 changes: 3 additions & 2 deletions src/echarts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -879,7 +879,8 @@ define(function (require) {
'nameConnector', 'valueConnector',

// 动画相关
'animation', 'animationThreshold', 'animationDuration',
'animation', 'animationThreshold',
'animationDuration', 'animationDurationUpdate',
'animationEasing', 'addDataAnimation',

// 默认标志图形类型列表
Expand Down Expand Up @@ -1179,7 +1180,7 @@ define(function (require) {
{option: magicOption},
self
);
}, magicOption.addDataAnimation ? 500 : 0);
}, magicOption.addDataAnimation ? magicOption.animationDurationUpdate : 0);
return this;
},

Expand Down

0 comments on commit da3749f

Please sign in to comment.