zent
Version:
一套前端设计语言和基于React的实现
103 lines (102 loc) • 4.63 kB
JavaScript
import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PureComponent } from 'react';
import uniqueId from '../../utils/uniqueId';
var GRADIENT_ID = uniqueId('zentAnimatedArcStrokeGradient');
var STROKE_OFFSET_RATIO = 0.2;
var STROKE_OPACITY = 0.2;
var ANIMATION_DURATION = 400;
var ANIMATION_DELAY = 1000;
var START_ROTATE = 0;
var DEFAULT_TRANSITION = {};
var NO_TRANSITION = {
WebkitTransition: 'none',
MozTransition: 'none',
OTransition: 'none',
msTransition: 'none',
transition: 'none',
};
var AnimatedArc = (function (_super) {
__extends(AnimatedArc, _super);
function AnimatedArc() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
opacity: 0,
rotate: START_ROTATE,
transition: DEFAULT_TRANSITION,
};
_this.startAnimation = function () {
if (_this.animationDelayTimerId) {
clearTimeout(_this.animationDelayTimerId);
}
var _a = _this.props, arcLength = _a.arcLength, radius = _a.radius;
var maskArcLength = _this.getMaskArcLength();
var rotateRadian = (arcLength - maskArcLength) / radius;
_this.setState({
rotate: rotateRadian,
transition: DEFAULT_TRANSITION,
opacity: STROKE_OPACITY,
}, _this.queueAnimationEnd);
};
_this.finishAnimation = function () {
if (_this.transitionEndTimerId) {
clearTimeout(_this.transitionEndTimerId);
}
_this.setState({
rotate: START_ROTATE,
transition: NO_TRANSITION,
opacity: 0,
});
_this.animationDelayTimerId = setTimeout(_this.startAnimation, ANIMATION_DELAY);
};
_this.queueAnimationEnd = function () {
_this.transitionEndTimerId = setTimeout(_this.finishAnimation, ANIMATION_DURATION);
};
return _this;
}
AnimatedArc.prototype.render = function () {
var path = this.getPath();
var _a = this.props, className = _a.className, strokeWidth = _a.strokeWidth;
var _b = this.state, rotate = _b.rotate, transition = _b.transition, opacity = _b.opacity;
return (_jsxs("g", __assign({ "data-zv": '10.0.17' }, { children: [_jsx("defs", __assign({ "data-zv": '10.0.17' }, { children: _jsxs("linearGradient", __assign({ id: GRADIENT_ID }, { children: [_jsx("stop", { offset: "0%", stopColor: "rgba(255, 255, 255, 0)", "data-zv": '10.0.17' }, void 0), _jsx("stop", { offset: "100%", stopColor: "#fff", "data-zv": '10.0.17' }, void 0)] }), void 0) }), void 0), _jsx("path", { className: className, d: path, stroke: "url(#" + GRADIENT_ID + ")", strokeOpacity: opacity, strokeWidth: strokeWidth, style: __assign({ transform: "rotate(" + rotate + "rad)" }, transition), "data-zv": '10.0.17' }, void 0)] }), void 0));
};
AnimatedArc.prototype.componentDidMount = function () {
this.startAnimation();
};
AnimatedArc.prototype.componentWillUnmount = function () {
clearTimeout(this.animationDelayTimerId);
clearTimeout(this.transitionEndTimerId);
this.animationDelayTimerId = null;
this.transitionEndTimerId = null;
};
AnimatedArc.prototype.getMaskArcLength = function () {
var arcLength = this.props.arcLength;
return arcLength * STROKE_OFFSET_RATIO;
};
AnimatedArc.prototype.getMaskTheta = function () {
var radius = this.props.radius;
var maskArcLength = this.getMaskArcLength();
return maskArcLength / radius;
};
AnimatedArc.prototype.getArcStartPoint = function () {
var _a = this.props, radius = _a.radius, strokeWidth = _a.strokeWidth;
var w = strokeWidth / 2;
return [radius + w, w];
};
AnimatedArc.prototype.getArcEndPoint = function () {
var _a = this.props, radius = _a.radius, strokeWidth = _a.strokeWidth;
var R = radius + strokeWidth / 2;
var theta = this.getMaskTheta();
var x = R + Math.sin(theta) * radius;
var y = R - Math.cos(theta) * radius;
return [x, y];
};
AnimatedArc.prototype.getPath = function () {
var start = this.getArcStartPoint();
var end = this.getArcEndPoint();
var radius = this.props.radius;
return "M" + start.join(',') + " A" + radius + "," + radius + " 0 0 1 " + end.join(',');
};
return AnimatedArc;
}(PureComponent));
export default AnimatedArc;