This is an automated email from the ASF dual-hosted git repository. shenyi pushed a commit to branch datazoom-animation in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit f869a89c1c89fb94c093ed05b7b75a61693b9a74 Author: pissang <[email protected]> AuthorDate: Tue Jul 14 18:44:12 2020 +0800 feat(animation): action in dataZoom and resize can override the option animtion. --- src/chart/line/LineView.ts | 6 +++ src/chart/parallel/ParallelView.ts | 8 ++-- src/component/axis/ParallelAxisView.ts | 3 +- src/component/axis/parallelAxisAction.ts | 2 - src/component/dataZoom/SliderZoomView.ts | 4 ++ src/component/dataZoom/roams.ts | 4 ++ src/component/parallel.ts | 4 +- src/echarts.ts | 18 +++++++- src/model/Global.ts | 13 ++++++ src/util/graphic.ts | 76 ++++++++++++++++++++------------ src/util/types.ts | 8 ++++ 11 files changed, 108 insertions(+), 38 deletions(-) diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts index 8fb1f80..e1e30e2 100644 --- a/src/chart/line/LineView.ts +++ b/src/chart/line/LineView.ts @@ -780,6 +780,7 @@ class LineView extends ChartView { if (polygon) { polygon.setShape({ + // Reuse the points with polyline. points: current, stackedOnPoints: stackedOnCurrent }); @@ -789,8 +790,13 @@ class LineView extends ChartView { stackedOnPoints: stackedOnNext } }, seriesModel); + // If use attr directly in updateProps. + if (polyline.shape.points !== polygon.shape.points) { + polygon.shape.points = polyline.shape.points; + } } + const updatedDataInfo: { el: SymbolExtended, ptIdx: number diff --git a/src/chart/parallel/ParallelView.ts b/src/chart/parallel/ParallelView.ts index e3d5083..b5d2f34 100644 --- a/src/chart/parallel/ParallelView.ts +++ b/src/chart/parallel/ParallelView.ts @@ -53,9 +53,7 @@ class ParallelView extends ChartView { seriesModel: ParallelSeriesModel, ecModel: GlobalModel, api: ExtensionAPI, - payload: Payload & { - animation?: boolean - } + payload: Payload ) { const dataGroup = this._dataGroup; const data = seriesModel.getData(); @@ -80,8 +78,8 @@ class ParallelView extends ChartView { const points = createLinePoints(data, newDataIndex, dimensions, coordSys); data.setItemGraphicEl(newDataIndex, line); - const animationModel = (payload && payload.animation === false) ? null : seriesModel; - graphic.updateProps(line, {shape: {points: points}}, animationModel, newDataIndex); + + graphic.updateProps(line, {shape: {points: points}}, seriesModel, newDataIndex); updateElCommon(line, data, newDataIndex, seriesScope); } diff --git a/src/component/axis/ParallelAxisView.ts b/src/component/axis/ParallelAxisView.ts index d83a55c..03bf0b5 100644 --- a/src/component/axis/ParallelAxisView.ts +++ b/src/component/axis/ParallelAxisView.ts @@ -103,8 +103,7 @@ class ParallelAxisView extends ComponentView { builderOpt, areaSelectStyle, axisModel, coordSysModel, areaWidth, api ); - const animationModel = (payload && payload.animation === false) ? null : axisModel; - graphic.groupTransition(oldAxisGroup, this._axisGroup, animationModel); + graphic.groupTransition(oldAxisGroup, this._axisGroup, axisModel); } // /** diff --git a/src/component/axis/parallelAxisAction.ts b/src/component/axis/parallelAxisAction.ts index 42027b5..38b1ced 100644 --- a/src/component/axis/parallelAxisAction.ts +++ b/src/component/axis/parallelAxisAction.ts @@ -46,8 +46,6 @@ echarts.registerAction(actionInfo, function (payload: ParallelAxisAreaSelectPayl export interface ParallelAxisExpandPayload extends Payload { axisExpandWindow?: number[]; - // Jumping uses animation, and sliding suppresses animation. - animation?: boolean; } /** diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts index bfd3d7f..56bc1fa 100644 --- a/src/component/dataZoom/SliderZoomView.ts +++ b/src/component/dataZoom/SliderZoomView.ts @@ -752,6 +752,10 @@ class SliderZoomView extends DataZoomView { type: 'dataZoom', from: this.uid, dataZoomId: this.dataZoomModel.id, + animation: { + easing: 'cubicOut', + duration: 100 + }, start: range[0], end: range[1] }); diff --git a/src/component/dataZoom/roams.ts b/src/component/dataZoom/roams.ts index 05524c9..672a0aa 100644 --- a/src/component/dataZoom/roams.ts +++ b/src/component/dataZoom/roams.ts @@ -181,6 +181,10 @@ function cleanStore(store: Store) { function dispatchAction(api: ExtensionAPI, batch: DataZoomPayloadBatchItem[]) { api.dispatchAction({ type: 'dataZoom', + animation: { + easing: 'cubicOut', + duration: 100 + }, batch: batch }); } diff --git a/src/component/parallel.ts b/src/component/parallel.ts index 0c9f50e..4a4dbea 100644 --- a/src/component/parallel.ts +++ b/src/component/parallel.ts @@ -157,7 +157,9 @@ const handlers: Partial<Record<ElementEventName, ElementEventHandler>> = { : { axisExpandWindow: result.axisExpandWindow, // Jumping uses animation, and sliding suppresses animation. - animation: behavior === 'jump' ? null : false + animation: behavior === 'jump' ? null : { + duration: 0 // Disable animation. + } } ); } diff --git a/src/echarts.ts b/src/echarts.ts index e0d748a..adcd25a 100644 --- a/src/echarts.ts +++ b/src/echarts.ts @@ -1000,7 +1000,13 @@ class ECharts extends Eventful { this[IN_MAIN_PROCESS] = true; optionChanged && prepare(this); - updateMethods.update.call(this); + updateMethods.update.call(this, { + type: 'resize', + animation: { + // Disable animation + duration: 0 + } + }); this[IN_MAIN_PROCESS] = false; @@ -1263,6 +1269,8 @@ class ECharts extends Eventful { ): void { const ecModel = ecIns._model; + ecModel.setUpdatePayload(payload); + // broadcast if (!mainType) { // FIXME @@ -1323,6 +1331,8 @@ class ECharts extends Eventful { return; } + ecModel.setUpdatePayload(payload); + scheduler.restoreData(ecModel, payload); scheduler.performSeriesTasks(ecModel); @@ -1388,6 +1398,8 @@ class ECharts extends Eventful { return; } + ecModel.setUpdatePayload(payload); + // ChartView.markUpdateMethod(payload, 'updateTransform'); const componentDirtyList = []; @@ -1438,6 +1450,8 @@ class ECharts extends Eventful { return; } + ecModel.setUpdatePayload(payload); + ChartView.markUpdateMethod(payload, 'updateView'); clearColorPalette(ecModel); @@ -1460,6 +1474,8 @@ class ECharts extends Eventful { return; } + ecModel.setUpdatePayload(payload); + // clear all visual ecModel.eachSeries(function (seriesModel) { seriesModel.getData().clearAllVisual(); diff --git a/src/model/Global.ts b/src/model/Global.ts index 0e6da65..d0cf090 100644 --- a/src/model/Global.ts +++ b/src/model/Global.ts @@ -86,6 +86,11 @@ class GlobalModel extends Model<ECUnitOption> { */ private _seriesIndicesMap: HashMap<any>; + /** + * Model for store update payload + */ + private _payload: Payload; + // Injectable properties: scheduler: Scheduler; @@ -318,6 +323,14 @@ class GlobalModel extends Model<ECUnitOption> { return this._theme; } + setUpdatePayload(payload: Payload) { + this._payload = payload; + } + + getUpdatePayload(): Payload { + return this._payload; + } + /** * @param idx 0 by default */ diff --git a/src/util/graphic.ts b/src/util/graphic.ts index ec145a2..e9ecf23 100644 --- a/src/util/graphic.ts +++ b/src/util/graphic.ts @@ -66,7 +66,8 @@ import { TextCommonOption, SeriesOption, ParsedValue, - CallbackDataParams + CallbackDataParams, + AnimationPayload } from './types'; import GlobalModel from '../model/Global'; import { makeInner } from './model'; @@ -86,6 +87,7 @@ import * as numberUtil from './number'; import SeriesModel from '../model/Series'; import {interpolateNumber} from 'zrender/src/animation/Animator'; import List from '../data/List'; +import easing, { AnimationEasing } from 'zrender/src/animation/easing'; const mathMax = Math.max; @@ -1161,32 +1163,52 @@ function animateOrSetProps<Props>( } 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. + + let animationPayload: AnimationPayload; + // Check if there is global animation configuration from dataZoom/resize can override the config in option. + // If animation is enabled. Will use this animation config in payload. + // If animation is disabled. Just ignore it. + if (animatableModel && animatableModel.ecModel) { + const updatePayload = animatableModel.ecModel.getUpdatePayload(); + animationPayload = (updatePayload && updatePayload.animation) as AnimationPayload; + } const animationEnabled = animatableModel && animatableModel.isAnimationEnabled(); if (animationEnabled) { - // TODO Configurable - let duration = isRemove ? 200 : animatableModel.getShallow( - isUpdate ? 'animationDurationUpdate' : 'animationDuration' - ); - const animationEasing = isRemove ? 'cubicOut' : animatableModel.getShallow( - isUpdate ? 'animationEasingUpdate' : 'animationEasing' - ); - let animationDelay = isRemove ? 0 : animatableModel.getShallow( - isUpdate ? 'animationDelayUpdate' : 'animationDelay' - ); - if (typeof animationDelay === 'function') { - animationDelay = animationDelay( - dataIndex as number, - animatableModel.getAnimationDelayParams - ? animatableModel.getAnimationDelayParams(el, dataIndex as number) - : null - ); + let duration: number | Function; + let animationEasing: AnimationEasing; + let animationDelay: number | Function; + if (animationPayload) { + duration = animationPayload.duration || 0; + animationEasing = animationPayload.easing || 'cubicOut'; + animationDelay = animationPayload.delay || 0; + } + else if (isRemove) { + duration = 200; + animationEasing = 'cubicOut'; + animationDelay = 0; } - if (typeof duration === 'function') { - duration = duration(dataIndex as number); + else { + duration = animatableModel.getShallow( + isUpdate ? 'animationDurationUpdate' : 'animationDuration' + ); + animationEasing = animatableModel.getShallow( + isUpdate ? 'animationEasingUpdate' : 'animationEasing' + ); + animationDelay = animatableModel.getShallow( + isUpdate ? 'animationDelayUpdate' : 'animationDelay' + ); + if (typeof animationDelay === 'function') { + animationDelay = animationDelay( + dataIndex as number, + animatableModel.getAnimationDelayParams + ? animatableModel.getAnimationDelayParams(el, dataIndex as number) + : null + ); + } + if (typeof duration === 'function') { + duration = duration(dataIndex as number); + } } if (!isRemove) { @@ -1198,8 +1220,8 @@ function animateOrSetProps<Props>( ? ( isFrom ? el.animateFrom(props, { - duration, - delay: animationDelay || 0, + duration: duration as number, + delay: animationDelay as number || 0, easing: animationEasing, done: cb, force: !!cb || !!during, @@ -1207,8 +1229,8 @@ function animateOrSetProps<Props>( during: during }) : el.animateTo(props, { - duration, - delay: animationDelay || 0, + duration: duration as number, + delay: animationDelay as number || 0, easing: animationEasing, done: cb, force: !!cb || !!during, diff --git a/src/util/types.ts b/src/util/types.ts index 6effa65..e0a7ade 100644 --- a/src/util/types.ts +++ b/src/util/types.ts @@ -127,6 +127,7 @@ export interface DataModel extends DataHost, DataFormatMixin {} interface PayloadItem { excludeSeriesId?: string | string[]; + animation?: AnimationPayload [other: string]: any; } @@ -136,6 +137,13 @@ export interface Payload extends PayloadItem { batch?: PayloadItem[]; } +// Payload includes override anmation info +export interface AnimationPayload { + duration?: number + easing?: AnimationEasing + delay?: number +} + export interface ViewRootGroup extends Group { __ecComponentInfo?: { mainType: string, --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
