{number} 2500, threshold of animated elements. No animation if the graphic elements generated are over 2500. It is suggested to disable animation in IE8-.
{number} 2000, duration of the animation, in ms. Supports multi-level control.
+{number} 2000, duration of the enter animation, in ms.
+ +{number} 500，duration of the update animation, in ms.
{string} 'BounceOut', easing effect of the main element. Supports multi-level control. See zrender.animation.easing. Possible values are:
diff --git a/doc/doc.html b/doc/doc.html
index 31781c7a9e..7d9a34acac 100644
--- a/doc/doc.html
+++ b/doc/doc.html
@@ -128,6 +128,9 @@
{number} 2500，动画元素阀值，产生的图形原素超过2500不出动画，建议IE8-关闭
{number} 2000，动画时长，单位ms，支持多级控制
+{number} 2000，进入动画时长，单位ms
+ +{number} 500，更新动画时长，单位ms
{string} 'BounceOut'，主元素的缓动效果，支持多级控制，详见zrender.animation.easing，可选有：
+
{string} 'BounceOut'，主元素的缓动效果，详见zrender.animation.easing，可选有：
'Linear',
'QuadraticIn', 'QuadraticOut', 'QuadraticInOut',
'CubicIn', 'CubicOut', 'CubicInOut',
diff --git a/src/chart/bar.js b/src/chart/bar.js
index f55aa6dc44..802045b97e 100644
--- a/src/chart/bar.js
+++ b/src/chart/bar.js
@@ -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();
diff --git a/src/chart/base.js b/src/chart/base.js
index 06a8dee13e..4df20f6edc 100644
--- a/src/chart/base.js
+++ b/src/chart/base.js
@@ -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;
@@ -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 {
// 新有旧没有 添加并动画过渡
@@ -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();
@@ -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' :
@@ -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 {
@@ -1445,7 +1451,7 @@ define(function (require) {
case 'ring' :
case 'sector' :
case 'circle' :
- if (duration > 500) {
+ if (!isUpdate) {
// 进入动画，加旋转
ecAnimation.ring(
this.zr,
@@ -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 {
@@ -1496,7 +1502,7 @@ 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;
@@ -1504,7 +1510,7 @@ define(function (require) {
if (!shapeList[i]._mark) {
continue;
}
- this._animateMod(false, shapeList[i], duration, easing);
+ this._animateMod(false, shapeList[i], duration, easing, 0, true);
}
this.animationEffect(addShapeList);
},
@@ -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;
diff --git a/src/chart/k.js b/src/chart/k.js
index 7e7730ee0d..2440ae2642 100644
--- a/src/chart/k.js
+++ b/src/chart/k.js
@@ -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();
diff --git a/src/chart/line.js b/src/chart/line.js
index 20f269a22f..8186663a31 100644
--- a/src/chart/line.js
+++ b/src/chart/line.js
@@ -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();
diff --git a/src/config.js b/src/config.js
index 5a9717dec7..95e985bcf7 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1394,7 +1394,8 @@ define(function() {
animation: true, // 过渡动画是否开启
addDataAnimation: true, // 动态数据接口是否开启动画效果
animationThreshold: 2000, // 动画元素阀值，产生的图形原素超过2000不出动画
- animationDuration: 2000,
+ animationDuration: 2000, // 过渡动画参数：进入
+ animationDurationUpdate: 500, // 过渡动画参数：更新
animationEasing: 'ExponentialOut' //BounceOut
};
diff --git a/src/echarts.js b/src/echarts.js
index a105dd4c7e..95fbbaa3ab 100644
--- a/src/echarts.js
+++ b/src/echarts.js
@@ -879,7 +879,8 @@ define(function (require) {
'nameConnector', 'valueConnector',
// 动画相关
- 'animation', 'animationThreshold', 'animationDuration',
+ 'animation', 'animationThreshold',
+ 'animationDuration', 'animationDurationUpdate',
'animationEasing', 'addDataAnimation',
// 默认标志图形类型列表
@@ -1179,7 +1180,7 @@ define(function (require) {
{option: magicOption},
self
);
- }, magicOption.addDataAnimation ? 500 : 0);
+ }, magicOption.addDataAnimation ? magicOption.animationDurationUpdate : 0);
return this;
},