zp-bee/es/bee-spin/index.js

zp-bee，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

import _regeneratorRuntime from "@babel/runtime/regenerator";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";

var __awaiter = this && this.__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());
  });
};

import React, { useEffect, useRef } from 'react';
import runner1 from './style/runner1.png';
import runner2 from './style/runner2.png';
import runner3 from './style/runner3.png';
import runner4 from './style/runner4.png';
import runner5 from './style/runner5.png';
import runner6 from './style/runner6.png';
import planner from './style/planner.png';

var Animation = /*#__PURE__*/function () {
  function Animation(canvas, loadResources) {
    _classCallCheck(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();
  }

  _createClass(Animation, [{
    key: "start",
    value: function start() {
      return __awaiter(this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        return _regeneratorRuntime.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 = useRef(null);
  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.createElement("div", {
    className: "bee-spin-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "bee-spin-wrap"
  }, /*#__PURE__*/React.createElement("div", {
    className: "bee-spin-before-liner",
    style: {
      backgroundImage: "linear-gradient(to right, ".concat(blurColor, " 0%, ").concat(blurColor, " 50%, transparent 100% )")
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "bee-spin-after-liner",
    style: {
      backgroundImage: "linear-gradient(to right, ".concat(blurColor, " 0%, ").concat(blurColor, " 50%, transparent 100% )")
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "bee-spin-banner"
  }, /*#__PURE__*/React.createElement("div", {
    id: "bee-spin-img",
    style: {
      display: 'none'
    }
  }, /*#__PURE__*/React.createElement("img", {
    src: runner1,
    alt: ""
  }), /*#__PURE__*/React.createElement("img", {
    src: runner2,
    alt: ""
  }), /*#__PURE__*/React.createElement("img", {
    src: runner3,
    alt: ""
  }), /*#__PURE__*/React.createElement("img", {
    src: runner4,
    alt: ""
  }), /*#__PURE__*/React.createElement("img", {
    src: runner5,
    alt: ""
  }), /*#__PURE__*/React.createElement("img", {
    src: runner6,
    alt: ""
  })), /*#__PURE__*/React.createElement("div", {
    className: "bee-spin-planner"
  }, /*#__PURE__*/React.createElement("img", {
    src: planner
  }), /*#__PURE__*/React.createElement("img", {
    src: planner
  })))), /*#__PURE__*/React.createElement("canvas", {
    ref: container,
    className: "bee-spin-canvas"
  }));
};

export default BeeSpin;