Skip to content

I
incubator-echarts

x649585723 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 56be86a0 编写于 作者: K kener
浏览文件
操作

动画过渡优化

上级 59902169
显示空白变更内容
内联 并排
Showing with 59 addition and 46 deletion
src/chart/calculableBase.js
浏览文件 @ 56be86a0
...@@ -181,10 +181,16 @@ define(function (require) { ...@@ -181,10 +181,16 @@ define(function (require) {
var maxLenth = this.option.animationThreshold / (this.canvasSupported ? 1 : 2); var maxLenth = this.option.animationThreshold / (this.canvasSupported ? 1 : 2);
var lastShapeList = this.lastShapeList; var lastShapeList = this.lastShapeList;
var shapeList = this.shapeList; var shapeList = this.shapeList;
var duration = lastShapeList.length > 0
? 500 : this.query(this.option, 'animationDuration');
var easing = this.query(this.option, 'animationEasing');
var key; var key;
var oldMap = {}; var oldMap = {};
var newMap = {}; var newMap = {};
if (lastShapeList && lastShapeList.length > 0 && lastShapeList.length < maxLenth) { if (this.option.animation
&& !this.option.renderAsImage
&& shapeList.length < maxLenth
) {
// 通过已有的shape做动画过渡 // 通过已有的shape做动画过渡
for (var i = 0, l = this.lastShapeList.length; i < l; i++) { for (var i = 0, l = this.lastShapeList.length; i < l; i++) {
key = ecData.get(lastShapeList[i], 'seriesIndex') + '_' key = ecData.get(lastShapeList[i], 'seriesIndex') + '_'
...@@ -218,25 +224,27 @@ define(function (require) { ...@@ -218,25 +224,27 @@ define(function (require) {
if (oldMap[key]) { if (oldMap[key]) {
// 新旧都有 动画过渡 // 新旧都有 动画过渡
this.zr.delShape(oldMap[key].id); this.zr.delShape(oldMap[key].id);
this._animateMod(oldMap[key], newMap[key]); this._animateMod(oldMap[key], newMap[key], duration, easing);
} }
else { else {
// 新有旧没有 添加并动画过渡 // 新有旧没有 添加并动画过渡
this._animateAdd(newMap[key]); this._animateAdd(newMap[key], duration, easing);
} }
} }
this.animationMark(500); this.animationMark(duration, easing);
} }
else { else {
// clear old
this.zr.delShape(lastShapeList);
// 直接添加 // 直接添加
for (var i = 0, l = this.shapeList.length; i < l; i++) { for (var i = 0, l = shapeList.length; i < l; i++) {
this.zr.addShape(shapeList[i]); this.zr.addShape(shapeList[i]);
} }
} }
}, },
_animateMod : function(oldShape, newShape) { _animateMod : function(oldShape, newShape, duration, easing) {
switch (oldShape.type) { switch (newShape.type) {
case 'broken-line' : case 'broken-line' :
case 'half-smooth-polygon' : case 'half-smooth-polygon' :
var newPointList = newShape.style.pointList; var newPointList = newShape.style.pointList;
...@@ -258,12 +266,10 @@ define(function (require) { ...@@ -258,12 +266,10 @@ define(function (require) {
this.zr.addShape(newShape); this.zr.addShape(newShape);
this.zr.animate(newShape.id, 'style') this.zr.animate(newShape.id, 'style')
.when( .when(
500, duration,
{ { pointList: newPointList }
pointList: newPointList
}
) )
.start('ExponentialOut'); .start(easing);
break; break;
case 'rectangle' : case 'rectangle' :
case 'icon' : case 'icon' :
...@@ -278,7 +284,7 @@ define(function (require) { ...@@ -278,7 +284,7 @@ define(function (require) {
this.zr.addShape(newShape); this.zr.addShape(newShape);
this.zr.animate(newShape.id, 'style') this.zr.animate(newShape.id, 'style')
.when( .when(
500, duration,
{ {
x: newX, x: newX,
y: newY, y: newY,
...@@ -286,30 +292,33 @@ define(function (require) { ...@@ -286,30 +292,33 @@ define(function (require) {
height: newHeight height: newHeight
} }
) )
.start('ExponentialOut'); .start(easing);
break; break;
case 'candle' : case 'candle' :
/* if (duration > 500) {
var newY = newShape.style.y; var newY = newShape.style.y;
newShape.style.y = oldShape.style.y; newShape.style.y = oldShape.style.y;
this.zr.addShape(newShape); this.zr.addShape(newShape);
this.zr.animate(newShape.id, 'style') this.zr.animate(newShape.id, 'style')
.when( .when(
500, duration,
{ {
y: newY y: newY
} }
) )
.start('ExponentialOut'); .start(easing);
}
else {
this.zr.addShape(newShape);
}
break; break;
*/
default : default :
this.zr.addShape(newShape); this.zr.addShape(newShape);
break; break;
} }
}, },
_animateAdd : function(newShape) { _animateAdd : function(newShape, duration, easing) {
switch (newShape.type) { switch (newShape.type) {
case 'broken-line' : case 'broken-line' :
case 'half-smooth-polygon' : case 'half-smooth-polygon' :
...@@ -334,11 +343,11 @@ define(function (require) { ...@@ -334,11 +343,11 @@ define(function (require) {
this._animateMod( this._animateMod(
{ {
type : newShape.type, type : newShape.type,
style : { style : { pointList : newPointList }
pointList : newPointList
}
}, },
newShape newShape,
duration,
easing
); );
break; break;
case 'rectangle' : case 'rectangle' :
...@@ -355,11 +364,27 @@ define(function (require) { ...@@ -355,11 +364,27 @@ define(function (require) {
height: 0 height: 0
} }
}, },
newShape newShape,
duration,
easing
);
break;
case 'candle' :
var y = newShape.style.y;
this._animateMod(
{
type : newShape.type,
style : {
y : [y[0], y[0], y[0], y[0]]
}
},
newShape,
duration,
easing
); );
break; break;
default : default :
this._animateMod({}, newShape); this._animateMod({}, newShape, duration, easing);
break; break;
} }
} }
......
src/echarts.js
浏览文件 @ 56be86a0
...@@ -812,18 +812,6 @@ define(function (require) { ...@@ -812,18 +812,6 @@ define(function (require) {
this._toolbox.render(magicOption, this.component); this._toolbox.render(magicOption, this.component);
if (magicOption.animation && !magicOption.renderAsImage) { if (magicOption.animation && !magicOption.renderAsImage) {
var len = this._chartList.length;
while (len--) {
chart = this._chartList[len];
if (chart
&& chart.animation
&& chart.shapeList
&& chart.shapeList.length
< magicOption.animationThreshold
) {
chart.animation();
}
}
this._zr.refresh(); this._zr.refresh();
} }
else { else {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或