252 lines
6.7 KiB
Java
252 lines
6.7 KiB
Java
import { __assign } from "tslib";
|
|
import { deepMix, get, isFunction } from '@antv/util';
|
|
import { FIELD_ORIGIN } from '../constant';
|
|
import { getAnimation } from './animation';
|
|
// 默认的动画参数配置
|
|
export var DEFAULT_ANIMATE_CFG = {
|
|
appear: {
|
|
duration: 450,
|
|
easing: 'easeQuadOut',
|
|
},
|
|
update: {
|
|
duration: 400,
|
|
easing: 'easeQuadInOut',
|
|
},
|
|
enter: {
|
|
duration: 400,
|
|
easing: 'easeQuadInOut',
|
|
},
|
|
leave: {
|
|
duration: 350,
|
|
easing: 'easeQuadIn',
|
|
},
|
|
};
|
|
// 各个 Geometry 默认的动画执行函数
|
|
var GEOMETRY_ANIMATE_CFG = {
|
|
interval: function (coordinate) {
|
|
return {
|
|
enter: {
|
|
animation: coordinate.isRect
|
|
? coordinate.isTransposed
|
|
? 'scale-in-x'
|
|
: 'scale-in-y'
|
|
: 'fade-in',
|
|
},
|
|
update: {
|
|
animation: coordinate.isPolar && coordinate.isTransposed ? 'sector-path-update' : null,
|
|
},
|
|
leave: {
|
|
animation: 'fade-out',
|
|
},
|
|
};
|
|
},
|
|
line: {
|
|
enter: {
|
|
animation: 'fade-in',
|
|
},
|
|
leave: {
|
|
animation: 'fade-out',
|
|
},
|
|
},
|
|
path: {
|
|
enter: {
|
|
animation: 'fade-in',
|
|
},
|
|
leave: {
|
|
animation: 'fade-out',
|
|
},
|
|
},
|
|
point: {
|
|
appear: {
|
|
animation: 'zoom-in',
|
|
},
|
|
enter: {
|
|
animation: 'zoom-in',
|
|
},
|
|
leave: {
|
|
animation: 'zoom-out',
|
|
},
|
|
},
|
|
area: {
|
|
enter: {
|
|
animation: 'fade-in',
|
|
},
|
|
leave: {
|
|
animation: 'fade-out',
|
|
},
|
|
},
|
|
polygon: {
|
|
enter: {
|
|
animation: 'fade-in',
|
|
},
|
|
leave: {
|
|
animation: 'fade-out',
|
|
},
|
|
},
|
|
schema: {
|
|
enter: {
|
|
animation: 'fade-in',
|
|
},
|
|
leave: {
|
|
animation: 'fade-out',
|
|
},
|
|
},
|
|
edge: {
|
|
enter: {
|
|
animation: 'fade-in',
|
|
},
|
|
leave: {
|
|
animation: 'fade-out',
|
|
},
|
|
},
|
|
label: {
|
|
appear: {
|
|
animation: 'fade-in',
|
|
delay: 450,
|
|
},
|
|
enter: {
|
|
animation: 'fade-in',
|
|
},
|
|
update: {
|
|
animation: 'position-update',
|
|
},
|
|
leave: {
|
|
animation: 'fade-out',
|
|
},
|
|
},
|
|
};
|
|
// 各个 Geometry 默认的群组出场动画
|
|
var GEOMETRY_GROUP_APPEAR_ANIMATION = {
|
|
line: function () {
|
|
return {
|
|
animation: 'wave-in',
|
|
};
|
|
},
|
|
area: function () {
|
|
return {
|
|
animation: 'wave-in',
|
|
};
|
|
},
|
|
path: function () {
|
|
return {
|
|
animation: 'fade-in',
|
|
};
|
|
},
|
|
interval: function (coordinate) {
|
|
var animation;
|
|
if (coordinate.isRect) {
|
|
animation = coordinate.isTransposed ? 'grow-in-x' : 'grow-in-y';
|
|
}
|
|
else {
|
|
animation = 'grow-in-xy';
|
|
if (coordinate.isPolar && coordinate.isTransposed) {
|
|
// pie chart
|
|
animation = 'wave-in';
|
|
}
|
|
}
|
|
return {
|
|
animation: animation,
|
|
};
|
|
},
|
|
schema: function (coordinate) {
|
|
var animation;
|
|
if (coordinate.isRect) {
|
|
animation = coordinate.isTransposed ? 'grow-in-x' : 'grow-in-y';
|
|
}
|
|
else {
|
|
animation = 'grow-in-xy';
|
|
}
|
|
return {
|
|
animation: animation,
|
|
};
|
|
},
|
|
polygon: function () {
|
|
return {
|
|
animation: 'fade-in',
|
|
duration: 500,
|
|
};
|
|
},
|
|
edge: function () {
|
|
return {
|
|
animation: 'fade-in',
|
|
};
|
|
},
|
|
};
|
|
// 解析用户的动画配置
|
|
function parseAnimateConfig(animateCfg, data) {
|
|
return {
|
|
delay: isFunction(animateCfg.delay) ? animateCfg.delay(data) : animateCfg.delay,
|
|
easing: isFunction(animateCfg.easing) ? animateCfg.easing(data) : animateCfg.easing,
|
|
duration: isFunction(animateCfg.duration) ? animateCfg.duration(data) : animateCfg.duration,
|
|
callback: animateCfg.callback,
|
|
};
|
|
}
|
|
/**
|
|
* @ignore
|
|
* 获取 elementName 对应的动画配置,当声明了 `animateType`,则返回 `animateType` 对应的动画配置
|
|
* @param elementName 元素名称
|
|
* @param coordinate 做表弟类型
|
|
* @param animateType 可选,动画类型
|
|
*/
|
|
export function getDefaultAnimateCfg(elementName, coordinate, animateType) {
|
|
var animateCfg = GEOMETRY_ANIMATE_CFG[elementName];
|
|
if (animateCfg) {
|
|
if (isFunction(animateCfg)) {
|
|
animateCfg = animateCfg(coordinate);
|
|
}
|
|
animateCfg = deepMix({}, DEFAULT_ANIMATE_CFG, animateCfg);
|
|
if (animateType) {
|
|
return animateCfg[animateType];
|
|
}
|
|
}
|
|
return animateCfg;
|
|
}
|
|
/**
|
|
* @ignore
|
|
* 工具函数
|
|
* 根据用户传入的配置为 shape 执行动画
|
|
* @param shape 执行动画的图形元素
|
|
* @param animateCfg 动画配置
|
|
* @param cfg 额外的信息
|
|
*/
|
|
export function doAnimate(shape, animateCfg, cfg) {
|
|
var data = get(shape.get('origin'), 'data', FIELD_ORIGIN);
|
|
var animation = animateCfg.animation; // 获取动画执行函数
|
|
var parsedAnimateCfg = parseAnimateConfig(animateCfg, data);
|
|
if (animation) {
|
|
// 用户声明了动画执行函数
|
|
var animateFunction = getAnimation(animation);
|
|
if (animateFunction) {
|
|
animateFunction(shape, parsedAnimateCfg, cfg);
|
|
}
|
|
}
|
|
else {
|
|
// 没有声明,则根据 toAttrs 做差值动画
|
|
shape.animate(cfg.toAttrs, parsedAnimateCfg);
|
|
}
|
|
}
|
|
/**
|
|
* @ignore
|
|
* 执行 Geometry 群组入场动画
|
|
* @param container 执行群组动画的图形元素
|
|
* @param animateCfg 动画配置
|
|
* @param geometryType geometry 类型
|
|
* @param coordinate 坐标系对象
|
|
* @param minYPoint y 轴最小值对应的画布坐标点
|
|
*/
|
|
export function doGroupAppearAnimate(container, animateCfg, geometryType, coordinate, minYPoint) {
|
|
if (GEOMETRY_GROUP_APPEAR_ANIMATION[geometryType]) {
|
|
var defaultCfg = GEOMETRY_GROUP_APPEAR_ANIMATION[geometryType](coordinate);
|
|
var animation = getAnimation(get(defaultCfg, 'animation', ''));
|
|
if (animation) {
|
|
var cfg = __assign(__assign(__assign({}, DEFAULT_ANIMATE_CFG.appear), defaultCfg), animateCfg);
|
|
container.stopAnimate(); // 先结束当前 container 动画
|
|
animation(container, cfg, {
|
|
coordinate: coordinate,
|
|
minYPoint: minYPoint,
|
|
toAttrs: null,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
//# sourceMappingURL=index.js.map |