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 |