micro-ui-y/lib/loding/partLoading/index.js

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var randomData = ["a", "b"];

//局部loading   小loading

var PartLoading = function (_Component) {
    _inherits(PartLoading, _Component);

    function PartLoading(props) {
        _classCallCheck(this, PartLoading);

        var _this2 = _possibleConstructorReturn(this, (PartLoading.__proto__ || Object.getPrototypeOf(PartLoading)).call(this, props));

        _this2.state = {
            //时间初始化
            t: 0,

            //loading 宽高
            width: props.width || 80,
            height: props.height || 80,

            //圆半径
            r: 5,
            //速度
            speed: 5,
            //靠近度
            approximate: 3,

            timestampId: ""
        };
        return _this2;
    }

    _createClass(PartLoading, [{
        key: "componentWillMount",
        value: function componentWillMount() {

            this.setState({
                timestampId: new Date().getTime()
            });
        }
    }, {
        key: "componentDidMount",
        value: function componentDidMount() {
            this.initCanvas();
        }
    }, {
        key: "initCanvas",
        value: function initCanvas() {
            var _this = this;
            var height = _this.state.height;
            var width = _this.state.width;

            var canvas = document.getElementById(_this.state.timestampId);
            var context = canvas.getContext('2d');
            canvas.height = height;
            canvas.width = width;
            context.fillStyle = '#ff6468';
            context.beginPath();

            context.arc(width / 2, height / 2, _this.state.r, 0, 2 * Math.PI, true);

            context.closePath();
            context.fill();
            //设置定时器，生成动画
            setInterval(function () {
                _this.run(context);
            }, 5);
            // var speed=0;
        }
    }, {
        key: "run",
        value: function run(cxt) {
            var t = this.state.t;
            var height = this.state.height;
            var width = this.state.width;
            var r = this.state.r;
            var speed = this.state.speed;
            var approximate = this.state.approximate;

            t = t + 0.005;
            this.setState({
                t: t
            });
            //画红色圆
            var startPoint = height / approximate * Math.sin(t * speed) + width / 2;
            var r1 = r * Math.cos(t * speed) + r * 1.5;
            cxt.clearRect(0, 0, width, height);
            //cxt.top+=speed;
            // startPoint+=speed;
            cxt.beginPath();
            cxt.fillStyle = '#ff6468';
            cxt.arc(startPoint, height / 2, r1, 0, 2 * Math.PI, true);
            cxt.closePath();
            cxt.fill();
            //画蓝色圆
            var startPoint2 = height / approximate * Math.sin(t * speed + Math.PI) + width / 2;
            var r2 = r * Math.cos(t * speed + Math.PI) + r * 1.5;
            cxt.beginPath();
            cxt.fillStyle = '#4aa5fe';
            cxt.arc(startPoint2, height / 2, r2, 0, 2 * Math.PI, true);
            cxt.closePath();
            cxt.fill();
        }
    }, {
        key: "render",
        value: function render() {
            return _react2.default.createElement(
                "div",
                null,
                _react2.default.createElement(
                    "div",
                    { style: Object.assign({
                            display: "inline-block"
                        }, this.props.style) },
                    _react2.default.createElement(
                        "canvas",
                        { id: this.state.timestampId, width: "200", height: "100" },
                        "\u60A8\u7684\u6D4F\u89C8\u5668\u4E0D\u652F\u6301 HTML5 canvas \u6807\u7B7E\u3002"
                    )
                )
            );
        }
    }]);

    return PartLoading;
}(_react.Component);

exports.default = PartLoading;
//# sourceMappingURL=index.js.map