zp-bee
Version:
zp-bee，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。
218 lines (185 loc) • 6.84 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _react = _interopRequireWildcard(require("react"));
var _runner = _interopRequireDefault(require("./style/runner1.png"));
var _runner2 = _interopRequireDefault(require("./style/runner2.png"));
var _runner3 = _interopRequireDefault(require("./style/runner3.png"));
var _runner4 = _interopRequireDefault(require("./style/runner4.png"));
var _runner5 = _interopRequireDefault(require("./style/runner5.png"));
var _runner6 = _interopRequireDefault(require("./style/runner6.png"));
var _planner = _interopRequireDefault(require("./style/planner.png"));
var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
function adopt(value) {
return value instanceof P ? value : new P(function (resolve) {
resolve(value);
});
}
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
}
function rejected(value) {
try {
step(generator["throw"](value));
} catch (e) {
reject(e);
}
}
function step(result) {
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
}
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var Animation = /*#__PURE__*/function () {
function Animation(canvas, loadResources) {
(0, _classCallCheck2.default)(this, Animation);
this.dogPictures = [];
this.stopFrame = false;
this.IMG_COUNT = 6;
this.lastWalkingTime = Date.now();
this.keyFrameIndex = -1;
canvas.width = window.innerWidth;
canvas.height = 200;
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.loadResources = loadResources;
this.start();
}
(0, _createClass2.default)(Animation, [{
key: "start",
value: function start() {
return __awaiter(this, void 0, void 0, /*#__PURE__*/_regenerator.default.mark(function _callee() {
return _regenerator.default.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return this.loadResources();
case 2:
this.dogPictures = _context.sent;
// 给下一帧注册一个函数
window.requestAnimationFrame(this.walk.bind(this));
case 4:
case "end":
return _context.stop();
}
}
}, _callee, this);
}));
}
}, {
key: "stop",
value: function stop() {
this.stopFrame = true;
}
}, {
key: "walk",
value: function walk() {
// 绘制图片，每过100ms就画一张
var now = Date.now();
if (now - this.lastWalkingTime > 130) {
// 先清掉上一次画的内容
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); // 获取下一张图片的索引
var keyFrameIndex = ++this.keyFrameIndex % this.IMG_COUNT;
var img = this.dogPictures[keyFrameIndex]; // img, sx, sy, swidth, sheight
this.ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, // dx = 20, dy, dwidth, dheight
60, 60, 136, 95);
this.lastWalkingTime = now;
} // 继续给下一帧注册一个函数
if (!this.stopFrame) window.requestAnimationFrame(this.walk.bind(this));
}
}]);
return Animation;
}();
var BeeSpin = function BeeSpin(_ref) {
var _ref$blurColor = _ref.blurColor,
blurColor = _ref$blurColor === void 0 ? '#fff' : _ref$blurColor;
var container = (0, _react.useRef)(null);
(0, _react.useEffect)(function () {
var imgList = document.querySelectorAll('#bee-spin-img img');
var works = [];
var _loop = function _loop(i, len) {
works.push(new Promise(function (r) {
imgList[i].onload = function () {
return r(imgList[i]);
};
}));
};
for (var i = 0, len = imgList.length; i < len; i++) {
_loop(i, len);
}
var canvasContainer = container.current;
var canvasAnimation;
if (canvasContainer) canvasAnimation = new Animation(canvasContainer, function () {
return Promise.all(works);
});
canvasAnimation.start();
return function () {
return canvasAnimation.stop();
};
}, []);
return /*#__PURE__*/_react.default.createElement("div", {
className: "bee-spin-container"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "bee-spin-wrap"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "bee-spin-before-liner",
style: {
backgroundImage: "linear-gradient(to right, ".concat(blurColor, " 0%, ").concat(blurColor, " 50%, transparent 100% )")
}
}), /*#__PURE__*/_react.default.createElement("div", {
className: "bee-spin-after-liner",
style: {
backgroundImage: "linear-gradient(to right, ".concat(blurColor, " 0%, ").concat(blurColor, " 50%, transparent 100% )")
}
}), /*#__PURE__*/_react.default.createElement("div", {
className: "bee-spin-banner"
}, /*#__PURE__*/_react.default.createElement("div", {
id: "bee-spin-img",
style: {
display: 'none'
}
}, /*#__PURE__*/_react.default.createElement("img", {
src: _runner.default,
alt: ""
}), /*#__PURE__*/_react.default.createElement("img", {
src: _runner2.default,
alt: ""
}), /*#__PURE__*/_react.default.createElement("img", {
src: _runner3.default,
alt: ""
}), /*#__PURE__*/_react.default.createElement("img", {
src: _runner4.default,
alt: ""
}), /*#__PURE__*/_react.default.createElement("img", {
src: _runner5.default,
alt: ""
}), /*#__PURE__*/_react.default.createElement("img", {
src: _runner6.default,
alt: ""
})), /*#__PURE__*/_react.default.createElement("div", {
className: "bee-spin-planner"
}, /*#__PURE__*/_react.default.createElement("img", {
src: _planner.default
}), /*#__PURE__*/_react.default.createElement("img", {
src: _planner.default
})))), /*#__PURE__*/_react.default.createElement("canvas", {
ref: container,
className: "bee-spin-canvas"
}));
};
var _default = BeeSpin;
exports.default = _default;