You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/06/24 09:55:22 UTC
[incubator-echarts] branch label-enhancement updated:
fix(animation): force stop remove animation before init again.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch label-enhancement
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/label-enhancement by this push:
new 97e15ec fix(animation): force stop remove animation before init again.
97e15ec is described below
commit 97e15ec43f1fb5cf311efa5eac103bf3e6f21fbf
Author: pissang <bm...@gmail.com>
AuthorDate: Wed Jun 24 17:54:40 2020 +0800
fix(animation): force stop remove animation before init again.
---
src/chart/bar/BarView.ts | 7 ++---
src/chart/bar/PictorialBarView.ts | 2 +-
src/chart/helper/Symbol.ts | 16 +++++------
src/chart/line/LineSeries.ts | 1 +
src/chart/line/LineView.ts | 2 +-
src/component/timeline/SliderTimelineView.ts | 2 +-
src/echarts.ts | 2 +-
src/util/graphic.ts | 40 ++++++++++++++++++++++------
8 files changed, 48 insertions(+), 24 deletions(-)
diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts
index 617a554..d7dc1e1 100644
--- a/src/chart/bar/BarView.ts
+++ b/src/chart/bar/BarView.ts
@@ -28,7 +28,8 @@ import {
enableHoverEmphasis,
setLabelStyle,
updateLabel,
- initLabel
+ initLabel,
+ removeElement
} from '../../util/graphic';
import Path, { PathProps } from 'zrender/src/graphic/Path';
import Group from 'zrender/src/graphic/Group';
@@ -703,7 +704,7 @@ function removeRect(
) {
// Not show text when animating
el.removeTextContent();
- updateProps(el, {
+ removeElement(el, {
style: {
opacity: 0
}
@@ -719,7 +720,7 @@ function removeSector(
) {
// Not show text when animating
el.removeTextContent();
- updateProps(el, {
+ removeElement(el, {
style: {
opacity: 0
}
diff --git a/src/chart/bar/PictorialBarView.ts b/src/chart/bar/PictorialBarView.ts
index e4a7429..48a7774 100644
--- a/src/chart/bar/PictorialBarView.ts
+++ b/src/chart/bar/PictorialBarView.ts
@@ -869,7 +869,7 @@ function removeBar(
bar.__pictorialClipPath && (animationModel = null);
zrUtil.each(pathes, function (path) {
- graphic.updateProps(
+ graphic.removeElement(
path, { scaleX: 0, scaleY: 0 }, animationModel, dataIndex,
function () {
bar.parent && bar.parent.remove(bar);
diff --git a/src/chart/helper/Symbol.ts b/src/chart/helper/Symbol.ts
index 37be176..e7bed16 100644
--- a/src/chart/helper/Symbol.ts
+++ b/src/chart/helper/Symbol.ts
@@ -169,20 +169,18 @@ class Symbol extends graphic.Group {
if (isInit) {
const symbolPath = this.childAt(0) as ECSymbol;
- // Always fadeIn. Because it has fadeOut animation when symbol is removed..
- // const fadeIn = seriesScope && seriesScope.fadeIn;
- const fadeIn = true;
const target: PathProps = {
scaleX: this._sizeX,
- scaleY: this._sizeY
+ scaleY: this._sizeY,
+ style: {
+ // Always fadeIn. Because it has fadeOut animation when symbol is removed..
+ opacity: symbolPath.style.opacity
+ }
};
- fadeIn && (target.style = {
- opacity: symbolPath.style.opacity
- });
symbolPath.scaleX = symbolPath.scaleY = 0;
- fadeIn && (symbolPath.style.opacity = 0);
+ symbolPath.style.opacity = 0;
graphic.initProps(symbolPath, target, seriesModel, idx);
}
@@ -311,7 +309,7 @@ class Symbol extends graphic.Group {
// Not show text when animating
!(opt && opt.keepLabel) && (symbolPath.removeTextContent());
- graphic.updateProps(
+ graphic.removeElement(
symbolPath,
{
style: {
diff --git a/src/chart/line/LineSeries.ts b/src/chart/line/LineSeries.ts
index 1fcb748..42e0ce3 100644
--- a/src/chart/line/LineSeries.ts
+++ b/src/chart/line/LineSeries.ts
@@ -53,6 +53,7 @@ export interface LineDataItemOption extends SymbolOptionMixin {
}
}
+
export interface LineSeriesOption extends SeriesOption,
SeriesOnCartesianOptionMixin,
SeriesOnPolarOptionMixin,
diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts
index 22dc22a..8c31b33 100644
--- a/src/chart/line/LineView.ts
+++ b/src/chart/line/LineView.ts
@@ -501,7 +501,7 @@ class LineView extends ChartView {
// Stop symbol animation and sync with line points
// FIXME performance?
data.eachItemGraphicEl(function (el) {
- el.stopAnimation(true);
+ el.stopAnimation('', true);
});
// In the case data zoom triggerred refreshing frequently
diff --git a/src/component/timeline/SliderTimelineView.ts b/src/component/timeline/SliderTimelineView.ts
index e8dc40d..2e77374 100644
--- a/src/component/timeline/SliderTimelineView.ts
+++ b/src/component/timeline/SliderTimelineView.ts
@@ -795,7 +795,7 @@ function pointerMoveTo(
pointer.y = 0;
}
else {
- pointer.stopAnimation(true);
+ pointer.stopAnimation('', true);
pointer.animateTo({
x: toCoord,
y: 0
diff --git a/src/echarts.ts b/src/echarts.ts
index 68e6331..4f76c11 100644
--- a/src/echarts.ts
+++ b/src/echarts.ts
@@ -554,7 +554,7 @@ class ECharts extends Eventful {
const list = zr.storage.getDisplayList();
// Stop animations
zrUtil.each(list, function (el: Element) {
- el.stopAnimation(true);
+ el.stopAnimation('', true);
});
return (zr.painter as SVGPainter).toDataURL();
diff --git a/src/util/graphic.ts b/src/util/graphic.ts
index 182a2b7..5875397 100644
--- a/src/util/graphic.ts
+++ b/src/util/graphic.ts
@@ -688,7 +688,7 @@ type LabelModelForText = Model<Omit<
}>;
function getLabelText<LDI>(
- opt?: SetLabelStyleOpt<LDI>,
+ opt: SetLabelStyleOpt<LDI>,
normalModel: LabelModel,
emphasisModel: LabelModel,
interpolateValues?: ParsedValue | ParsedValue[]
@@ -1136,7 +1136,7 @@ type AnimateOrSetPropsOption = {
};
function animateOrSetProps<Props>(
- isUpdate: boolean,
+ animationType: 'init' | 'update' | 'remove',
el: Element<Props>,
props: Props,
animatableModel?: Model<AnimationOptionMixin> & {
@@ -1158,19 +1158,22 @@ function animateOrSetProps<Props>(
isFrom = dataIndex.isFrom;
dataIndex = dataIndex.dataIndex;
}
+ const isUpdate = animationType === 'update';
+ const isRemove = animationType === 'remove';
// Do not check 'animation' property directly here. Consider this case:
// animation model is an `itemModel`, whose does not have `isAnimationEnabled`
// but its parent model (`seriesModel`) does.
const animationEnabled = animatableModel && animatableModel.isAnimationEnabled();
if (animationEnabled) {
- let duration = animatableModel.getShallow(
+ // TODO Configurable
+ let duration = isRemove ? 200 : animatableModel.getShallow(
isUpdate ? 'animationDurationUpdate' : 'animationDuration'
);
- const animationEasing = animatableModel.getShallow(
+ const animationEasing = isRemove ? 'cubicOut' : animatableModel.getShallow(
isUpdate ? 'animationEasingUpdate' : 'animationEasing'
);
- let animationDelay = animatableModel.getShallow(
+ let animationDelay = isRemove ? 0 : animatableModel.getShallow(
isUpdate ? 'animationDelayUpdate' : 'animationDelay'
);
if (typeof animationDelay === 'function') {
@@ -1185,6 +1188,11 @@ function animateOrSetProps<Props>(
duration = duration(dataIndex as number);
}
+ if (!isRemove) {
+ // Must stop the remove animation.
+ el.stopAnimation('remove');
+ }
+
duration > 0
? (
isFrom
@@ -1194,6 +1202,7 @@ function animateOrSetProps<Props>(
easing: animationEasing,
done: cb,
force: !!cb || !!during,
+ scope: animationType,
during: during
})
: el.animateTo(props, {
@@ -1203,6 +1212,7 @@ function animateOrSetProps<Props>(
done: cb,
force: !!cb || !!during,
setToFinal: true,
+ scope: animationType,
during: during
})
)
@@ -1240,7 +1250,7 @@ function updateProps<Props>(
cb?: AnimateOrSetPropsOption['cb'] | AnimateOrSetPropsOption['during'],
during?: AnimateOrSetPropsOption['during']
) {
- animateOrSetProps(true, el, props, animatableModel, dataIndex, cb, during);
+ animateOrSetProps('update', el, props, animatableModel, dataIndex, cb, during);
}
export {updateProps};
@@ -1261,7 +1271,21 @@ export function initProps<Props>(
cb?: AnimateOrSetPropsOption['cb'] | AnimateOrSetPropsOption['during'],
during?: AnimateOrSetPropsOption['during']
) {
- animateOrSetProps(false, el, props, animatableModel, dataIndex, cb, during);
+ animateOrSetProps('init', el, props, animatableModel, dataIndex, cb, during);
+}
+
+/**
+ * Remove graphic element
+ */
+export function removeElement<Props>(
+ el: Element<Props>,
+ props: Props,
+ animatableModel?: Model<AnimationOptionMixin>,
+ dataIndex?: AnimateOrSetPropsOption['dataIndex'] | AnimateOrSetPropsOption['cb'] | AnimateOrSetPropsOption,
+ cb?: AnimateOrSetPropsOption['cb'] | AnimateOrSetPropsOption['during'],
+ during?: AnimateOrSetPropsOption['during']
+) {
+ animateOrSetProps('remove', el, props, animatableModel, dataIndex, cb, during);
}
function animateOrSetLabel<Props extends PathProps>(
@@ -1278,7 +1302,7 @@ function animateOrSetLabel<Props extends PathProps>(
const valueAnimationEnabled = labelModel && labelModel.get('valueAnimation');
if (valueAnimationEnabled) {
const precisionOption = labelModel.get('precision');
- let precision: number = precisionOption === 'auto' ? 0 : precisionOption;
+ const precision: number = precisionOption === 'auto' ? 0 : precisionOption;
let interpolateValues: (number | string)[] | (number | string);
const rawValues = seriesModel.getRawValue(dataIndex);
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org