@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
155 lines • 4.93 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var G = tslib_1.__importStar(require("@antv/g"));
var g2_1 = require("@antv/g2");
var _ = tslib_1.__importStar(require("@antv/util"));
// 记录之前的状态
var preShapeInfo = {};
/** 更新动画 */
function progressUpdate(shape, animateCfg, coord) {
var path = shape.attr('path');
var clip;
var uniform = {};
var index = shape.get('index');
var _a = getAngle(shape, coord), startAngle = _a.startAngle, endAngle = _a.endAngle;
if (preShapeInfo[shape.id]) {
var _b = getShapeInfo(shape), preStart = _b.preStart, preEnd = _b.preEnd, prePath = _b.prePath;
var anchor = getAnchor(preStart, startAngle);
var direction_1 = getDirection(preStart, preEnd, startAngle, endAngle);
if (direction_1 === 'antiClockWise') {
shape.attr('path', prePath);
}
if (anchor === 'start') {
clip = createClip(coord, startAngle, preEnd);
uniform.endAngle = endAngle;
}
else {
clip = createClip(coord, preStart, endAngle);
uniform.startAngle = startAngle;
}
shape.attr('clip', clip);
shape.setSilent('animating', true);
animateCfg.callback = function () {
if (shape && !shape.get('destroyed')) {
shape.attr('clip', null);
shape.setSilent('cacheShape', null);
shape.setSilent('animating', false);
clip.remove();
if (direction_1 === 'antiClockWise') {
shape.attr('path', path);
}
}
};
/** 执行动画 */
/** 准备动画参数 */
var delay = animateCfg.delay;
if (_.isFunction(delay)) {
delay = animateCfg.delay(index);
}
var easing = animateCfg.easing;
if (_.isFunction(easing)) {
easing = animateCfg.easing(index);
}
/** 动起来 */
clip.animate(uniform, animateCfg.duration, easing, animateCfg.callback, delay);
}
setShapeInfo(shape, startAngle, endAngle);
}
function setShapeInfo(shape, start, end) {
if (!preShapeInfo[shape.id]) {
preShapeInfo[shape.id] = {};
}
preShapeInfo[shape.id].preStart = start;
preShapeInfo[shape.id].preEnd = end;
preShapeInfo[shape.id].prePath = shape.attr('path');
}
exports.setShapeInfo = setShapeInfo;
function getShapeInfo(shape) {
return preShapeInfo[shape.id] || null;
}
/**
* 获取动画锚点(固定不变的端点)是头部还是尾部
* 锚点会决定clip的生成和动画
*/
function getAnchor(preStart, startAngle) {
if (preStart === startAngle) {
return 'start';
}
return 'end';
}
/**
* 获取动画方向是顺时针还是逆时针
* 动画方向决定在shape在动画开始前是否采用前一帧的path
*/
function getDirection(preStart, preEnd, startAngle, endAngle) {
if (preStart < startAngle || preEnd > endAngle) {
return 'antiClockWise';
}
return 'clockWise';
}
function createClip(coord, from, to) {
var margin = 200;
var center = coord.getCenter();
var radius = coord.getRadius();
var clip = new G.Shapes.Fan({
attrs: {
x: center.x,
y: center.y,
rs: 0,
re: radius + margin,
startAngle: from,
endAngle: to,
},
});
return clip;
}
function getAngle(shape, coord) {
var points = shape.points || shape.get('origin').points;
var box = getPointsBox(points);
var endAngle;
var startAngle;
var coordStartAngle = coord.startAngle;
var coordEndAngle = coord.endAngle;
var diffAngle = coordEndAngle - coordStartAngle;
if (coord.isTransposed) {
endAngle = box.maxY * diffAngle;
startAngle = box.minY * diffAngle;
}
else {
endAngle = box.maxX * diffAngle;
startAngle = box.minX * diffAngle;
}
endAngle += coordStartAngle;
startAngle += coordStartAngle;
return {
startAngle: startAngle,
endAngle: endAngle,
};
}
exports.getAngle = getAngle;
function getPointsBox(points) {
if (_.isEmpty(points)) {
return null;
}
var minX = points[0].x;
var maxX = points[0].x;
var minY = points[0].y;
var maxY = points[0].y;
_.each(points, function (point) {
minX = minX > point.x ? point.x : minX;
maxX = maxX < point.x ? point.x : maxX;
minY = minY > point.y ? point.y : minY;
maxY = maxY < point.y ? point.y : maxY;
});
return {
minX: minX,
maxX: maxX,
minY: minY,
maxY: maxY,
centerX: (minX + maxX) / 2,
centerY: (minY + maxY) / 2,
};
}
g2_1.Animate.registerAnimation('update', 'groupProgress', progressUpdate);
//# sourceMappingURL=index.js.map