anets/dist/Anets.js

JavaScript library about PPT complex animation

/**
 * Anets 0.2.5
 * @author	henryfordstick   <henryfordstick@gmail.com>
 * @license MIT
 */
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('html2canvas')) :
    typeof define === 'function' && define.amd ? define(['html2canvas'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Anets = factory(global.html2canvas));
})(this, (function (html2canvas) { 'use strict';

    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

    var html2canvas__default = /*#__PURE__*/_interopDefaultLegacy(html2canvas);

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */

    function __awaiter(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());
        });
    }

    function __generator(thisArg, body) {
        var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
        function verb(n) { return function (v) { return step([n, v]); }; }
        function step(op) {
            if (f) throw new TypeError("Generator is already executing.");
            while (_) try {
                if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
                if (y = 0, t) op = [op[0] & 2, t.value];
                switch (op[0]) {
                    case 0: case 1: t = op; break;
                    case 4: _.label++; return { value: op[1], done: false };
                    case 5: _.label++; y = op[1]; op = [0]; continue;
                    case 7: op = _.ops.pop(); _.trys.pop(); continue;
                    default:
                        if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                        if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                        if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                        if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                        if (t[2]) _.ops.pop();
                        _.trys.pop(); continue;
                }
                op = body.call(thisArg, _);
            } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
            if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
        }
    }

    function __spreadArray(to, from, pack) {
        if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
            if (ar || !(i in from)) {
                if (!ar) ar = Array.prototype.slice.call(from, 0, i);
                ar[i] = from[i];
            }
        }
        return to.concat(ar || Array.prototype.slice.call(from));
    }

    var TYPES;
    (function (TYPES) {
        /** @擦除 */ TYPES["WIPE"] = "wipe";
        /** @劈裂 */ TYPES["BARN"] = "barn";
        /** @棋盘 */ TYPES["CHECKERBOARD"] = "checkerboard";
        /** @百叶窗 */ TYPES["BLINDS"] = "blinds";
        /** @溶解 */ TYPES["DISSOLVE"] = "dissolve";
        /** @随机线条 */ TYPES["RANDOMBAR"] = "randombar";
        /** @阶梯状 */ TYPES["STRIPS"] = "strips";
        /** @扇形 */ TYPES["WEDGE"] = "wedge";
        /** @轮子 */ TYPES["WHEEL"] = "wheel";
        /** @盒状 */ TYPES["BOX"] = "box";
        /** @圆形扩展 */ TYPES["CIRCLE"] = "circle";
        /** @菱形 */ TYPES["DIAMOND"] = "diamond";
        /** @十字扩展 */ TYPES["PLUS"] = "plus";
    })(TYPES || (TYPES = {}));
    var DIR;
    (function (DIR) {
        DIR["IN"] = "in";
        DIR["OUT"] = "out";
        DIR["LEFT"] = "left";
        DIR["RIGHT"] = "right";
        DIR["TOP"] = "top";
        DIR["BOTTOM"] = "bottom";
        DIR["UP"] = "up";
        DIR["DOWN"] = "down";
        DIR["HORIZONTAL"] = "horizontal";
        DIR["VERTICAL"] = "vertical";
        DIR["CENTER"] = "center";
        DIR["ONE"] = "one";
        DIR["TWO"] = "two";
        DIR["THREE"] = "three";
        DIR["FOUR"] = "four";
        DIR["EIGHT"] = "eight";
        DIR["SPOKES"] = "spokes";
    })(DIR || (DIR = {}));
    var ANITYPE;
    (function (ANITYPE) {
        ANITYPE["IN"] = "in";
        ANITYPE["ACTION"] = "action";
        ANITYPE["OUT"] = "out";
    })(ANITYPE || (ANITYPE = {}));
    var ANGLE;
    (function (ANGLE) {
        ANGLE["PI0"] = "0";
        ANGLE["PI90"] = "90";
        ANGLE["PI180"] = "180";
        ANGLE["PI270"] = "270";
    })(ANGLE || (ANGLE = {}));
    var COMPOSITE;
    (function (COMPOSITE) {
        COMPOSITE["maskIn"] = "destination-in";
        COMPOSITE["maskOut"] = "destination-out";
    })(COMPOSITE || (COMPOSITE = {}));
    var WHITECOLOR = "rgba(255,255,255,1)";
    var childClassName = "anets-item";
    var audioName = "ani-audio";

    var pow = Math.pow, max = Math.max, random = Math.random, floor = Math.floor;
    /**
     * 获取类型
     * @param {unknown} obj
     * @returns {string}
     */
    function getType(obj) {
        var type = typeof obj;
        if (type !== "object") {
            return type;
        }
        return Object.prototype.toString
            .call(obj)
            .replace(/^\[object (\S+)\]$/, "$1")
            .toLocaleLowerCase();
    }
    /**
     * 添加全局样式
     */
    function addGlobalStyle() {
        var style = document.createElement("style");
        style.innerHTML = ".".concat(childClassName, " {display: none}");
        style.setAttribute("id", "anetStyle");
        document.head.appendChild(style);
    }
    /**
     * 移除元素
     * @param {Element} element
     */
    function removeElement(element) {
        var parentElement = element.parentNode;
        parentElement === null || parentElement === void 0 ? void 0 : parentElement.removeChild(element);
    }
    /**
     * 添加钩子函数
     * @param {DispatchOptions} ref
     */
    function dispatchEvent(ref) {
        var _a;
        var name = ref.name, options = ref.options, anets = ref.anets;
        var onName = "on" + name.charAt(0).toUpperCase() + name.substr(1);
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        (_a = options[onName]) === null || _a === void 0 ? void 0 : _a.call(anets !== null && anets !== void 0 ? anets : Anets, options);
    }
    function decLen(num) {
        var _a, _b;
        return (_b = (_a = String(num).split(".")[1]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
    }
    function reint(num) {
        return ~~String(num).replace(".", "");
    }
    /**
     * 精确加法
     * @param {number} a
     * @param {number} b
     * @returns {number}
     */
    function add(a, b) {
        var pos = pow(10, max(decLen(a), decLen(b)));
        var res = (a * pos + b * pos) / pos;
        return res;
    }
    /**
     * 精确减法
     * @param {number} a
     * @param {number} b
     * @returns {number}
     */
    function subtract(a, b) {
        var bigLen = max(decLen(a), decLen(b));
        var pos = pow(10, bigLen);
        var res = ((a * pos - b * pos) / pos).toFixed(bigLen);
        return Number.parseFloat(res);
    }
    /**
     * 精确乘法
     * @param {number} a
     * @param {number} b
     * @returns {number}
     */
    function multiply(a, b) {
        var decLength = decLen(a) + decLen(b);
        return (reint(a) * reint(b)) / pow(10, decLength);
    }
    /**
     * 精确除法
     * @param {number} a
     * @param {number} b
     * @returns {number}
     */
    function divide(a, b) {
        var decLength = decLen(b) - decLen(a);
        return (reint(a) / reint(b)) * Math.pow(10, decLength);
    }
    /**
     * 获取随机数组
     * @param {number} len
     * @returns {number[]}
     */
    function getRandomArrayList(len) {
        var _a;
        var arrList = new Array(len).fill(0).map(function (_, i) { return i; });
        for (var i = arrList.length - 1; i > 0; --i) {
            var rdm = floor(random() * (i + 1));
            _a = [arrList[rdm], arrList[i]], arrList[i] = _a[0], arrList[rdm] = _a[1];
        }
        return arrList;
    }

    var version = "0.2.5";

    var Anets = /** @class */ (function () {
        function Anets(options, callback) {
            this._currentEl = null;
            this._canvas = null;
            this._baseCanvas = null;
            var item = (this._options = options).item;
            this._callback = callback;
            if (Anets._target === item) {
                console.log("Don't repeat the call!");
                return;
            }
            Anets._target = item;
            try {
                this._init();
            }
            catch (error) {
                callback.bind(null, options)();
                console.log(error.message);
            }
        }
        Anets.start = function (options, callback) {
            return new Anets(options, callback);
        };
        Anets.prototype._init = function () {
            return __awaiter(this, void 0, void 0, function () {
                var _a, item, sound, CanvasDOM, _b, _c;
                return __generator(this, function (_d) {
                    switch (_d.label) {
                        case 0:
                            _a = this._options, item = _a.item, sound = _a.sound, CanvasDOM = _a.CanvasDOM;
                            dispatchEvent({
                                name: "start",
                                options: this._options,
                            });
                            addGlobalStyle();
                            this._playAudio(sound);
                            this._currentEl = this._getCurrentElement(item);
                            _b = this;
                            if (!(CanvasDOM !== null && CanvasDOM !== void 0)) return [3 /*break*/, 1];
                            _c = CanvasDOM;
                            return [3 /*break*/, 3];
                        case 1: return [4 /*yield*/, this._htmlToCanvas()];
                        case 2:
                            _c = (_d.sent());
                            _d.label = 3;
                        case 3:
                            _b._canvas = _c;
                            this._performSyncAnimation();
                            return [2 /*return*/];
                    }
                });
            });
        };
        /**
         * 获取目标元素
         * @private
         * @param {string} item
         * @returns {HTMLElement}
         * @memberof Anets
         */
        Anets.prototype._getCurrentElement = function (item) {
            if (!item || getType(item) !== "string" || item === "") {
                throw new Error("Incorrect input of target element!");
            }
            var el = document.querySelector(item);
            if (!el) {
                throw new Error("The animation element was passed in incorrectly");
            }
            return el;
        };
        /**
         * 播放音频资源
         *
         * @private
         * @param [source=""]
         * @returns {void}
         * @memberof Anets
         */
        Anets.prototype._playAudio = function (source) {
            var _a;
            if (source === void 0) { source = ""; }
            if (source === "")
                return;
            var audioElement = (_a = this._options.audioElement) !== null && _a !== void 0 ? _a : audioName;
            var audio = document.querySelector("#".concat(audioElement));
            audio.setAttribute("src", source.replace(".wav", ".mp3"));
            audio.setAttribute("loop", "true");
            audio.play();
        };
        /**
         * 创建 canvas
         *
         * @private
         * @param {number} width
         * @param {number} height
         * @returns {HTMLCanvasElement}
         * @memberof Anets
         */
        Anets.prototype._createCanvas = function (width, height) {
            var cvs = document.createElement("canvas");
            cvs.width = width;
            cvs.height = height;
            return cvs;
        };
        /**
         * 创建画布
         *
         * @private
         * @param {number} width
         * @param {number} height
         * @returns {BaseCanvas}
         * @memberof Anets
         */
        Anets.prototype._createBaseCanvas = function (width, height) {
            var cvs = this._createCanvas(width, height);
            var cvsCtx = cvs.getContext("2d");
            cvsCtx.fillStyle = WHITECOLOR;
            return { cvs: cvs, cvsCtx: cvsCtx };
        };
        /**
         * 旋转画布
         *
         * @private
         * @param {BaseCanvas} baseCanvas
         * @param {ANGLE} angle
         * @memberof Anets
         */
        Anets.prototype._rotateBaseCanvas = function (baseCanvas, angle) {
            var cvs = baseCanvas.cvs, cvsCtx = baseCanvas.cvsCtx;
            var width = cvs.width, height = cvs.height;
            switch (angle) {
                case ANGLE.PI90:
                    cvsCtx.rotate(0.5 * Math.PI);
                    cvsCtx.translate(0, -height);
                    break;
                case ANGLE.PI180:
                    cvsCtx.rotate(Math.PI);
                    cvsCtx.translate(-width, -height);
                    break;
                case ANGLE.PI270:
                    cvsCtx.rotate(1.5 * Math.PI);
                    cvsCtx.translate(-width, 0);
            }
        };
        /**
         * 子元素修改 className
         *
         * @private
         * @param {boolean} isShow
         * @returns {void}
         * @memberof Anets
         */
        Anets.prototype._currentToggleClassName = function (isShow) {
            if (!this._currentEl)
                return;
            var child = this._currentEl.children;
            var Fun = isShow ? "add" : "remove";
            __spreadArray([], child, true).forEach(function (el) {
                el.classList[Fun](childClassName);
            });
        };
        /**
         * 处理时间
         *
         * @private
         * @param {Ani} ani
         * @returns {number}
         * @memberof Anets
         */
        Anets.prototype._getFrameRate = function (ani) {
            var _a, _b;
            var time = (_b = +((_a = ani.duration) === null || _a === void 0 ? void 0 : _a.replace("s", ""))) !== null && _b !== void 0 ? _b : 0.1;
            return divide(1, multiply(60, time));
        };
        /**
         * DOM 转 canvas
         *
         * @private
         * @returns {Promise<BaseCanvas>}
         * @memberof Anets
         */
        Anets.prototype._htmlToCanvas = function () {
            return __awaiter(this, void 0, void 0, function () {
                var options, canvas;
                return __generator(this, function (_a) {
                    switch (_a.label) {
                        case 0:
                            if (!this._currentEl)
                                throw new Error("");
                            options = {
                                logging: true,
                                allowTaint: true,
                                backgroundColor: null,
                                useCORS: true,
                            };
                            return [4 /*yield*/, html2canvas__default["default"](this._currentEl, options)];
                        case 1:
                            canvas = _a.sent();
                            return [2 /*return*/, canvas];
                    }
                });
            });
        };
        /**
         * 开始执行动画
         *
         * @private
         * @returns {void}
         * @memberof Anets
         */
        Anets.prototype._performSyncAnimation = function () {
            var _a;
            if (!this._canvas)
                return;
            var _b = this._canvas, width = _b.width, height = _b.height;
            var cvs = (this._baseCanvas = this._createBaseCanvas(width, height)).cvs;
            // cvsCtx.drawImage(this._canvas, 0, 0);
            this._currentToggleClassName(true);
            (_a = this._currentEl) === null || _a === void 0 ? void 0 : _a.appendChild(cvs);
            this._relevanceAnimation();
        };
        /**
         * 处理外部传入的资源
         *
         * @private
         * @param {Ani} ani
         * @memberof Anets
         */
        Anets.prototype._dealAniName = function (ani) {
            var aniName = ani.name;
            if (!aniName)
                throw new Error("Please enter the animation type");
            var arrName = aniName.split(/([A-Z][a-z]+)/).filter(function (item) { return item; });
            arrName = arrName.map(function (item) { return item.toUpperCase(); });
            var name = arrName[0];
            var type = arrName[1];
            var direction = arrName.slice(2);
            if (!TYPES[name])
                throw new Error("The animation name cannot be empty");
            return {
                name: TYPES[name],
                aniType: ANITYPE[type],
                direction: direction === null || direction === void 0 ? void 0 : direction.join(""),
            };
        };
        /**
         * 清理画布
         *
         * @private
         * @param {BaseCanvas} baseCanvas
         * @memberof Anets
         */
        Anets.prototype._clearRectCanvas = function (baseCanvas) {
            var cvs = baseCanvas.cvs, cvsCtx = baseCanvas.cvsCtx;
            var width = cvs.width, height = cvs.height;
            cvsCtx.clearRect(-width, -height, 2 * width, 2 * height);
        };
        Anets.prototype._performBarAnimation = function (opts) {
            if (!this._canvas)
                return;
            var _a = this._baseCanvas, cvs = _a.cvs, cvsCtx = _a.cvsCtx;
            opts.speed = add(opts.speed, opts.size);
            this._rafId = requestAnimationFrame(this._performBarAnimation.bind(this, opts));
            var speeds = !opts.aniType ? subtract(1, opts.speed) : opts.speed;
            if (speeds > 1 || speeds < 0) {
                this._exitAnets();
                return;
            }
            var baseCanvas = opts.applySlice.call(this, opts, speeds);
            var baseCvs = baseCanvas.cvs;
            cvsCtx.save();
            cvsCtx.drawImage(this._canvas, 0, 0);
            cvsCtx.scale(cvs.width / baseCvs.width, cvs.height / baseCvs.height);
            cvsCtx.globalCompositeOperation = opts.composite;
            cvsCtx.drawImage(baseCvs, 0, 0);
            cvsCtx.restore();
        };
        /**
         * 关联动画执行函数
         */
        Anets.prototype._relevanceAnimation = function () {
            var _a;
            var _b;
            var aniArr = (_a = {},
                _a[TYPES.WIPE] = this._wipeAnimation,
                _a[TYPES.BARN] = this._barnAnimation,
                _a[TYPES.CHECKERBOARD] = this._checkerboardAnimation,
                _a[TYPES.BLINDS] = this._blindsAnimation,
                _a[TYPES.DISSOLVE] = this._dissolveAnimation,
                _a[TYPES.RANDOMBAR] = this._randomBarAnimation,
                _a[TYPES.STRIPS] = this._stripsAnimation,
                _a[TYPES.WEDGE] = this._wedgeAnimation,
                _a[TYPES.WHEEL] = this._wheelAnimation,
                _a[TYPES.BOX] = this._boxAnimation,
                _a[TYPES.CIRCLE] = this._circleAnimation,
                _a[TYPES.DIAMOND] = this._diamondAnimation,
                _a[TYPES.PLUS] = this._plusAnimation,
                _a);
            var ani = this._options.ani;
            var _c = this._dealAniName(ani), name = _c.name, aniType = _c.aniType, direction = _c.direction;
            var size = this._getFrameRate(ani);
            (_b = aniArr[name]) === null || _b === void 0 ? void 0 : _b.call(this, { aniType: aniType, size: size, direction: direction });
        };
        /**
         * 擦除
         *
         * @private
         * @param {PerformArguments} args
         * @memberof Anets
         */
        Anets.prototype._wipeAnimation = function (args) {
            var _a;
            var aniType = args.aniType, size = args.size, direction = args.direction;
            var dir = (_a = {},
                _a[DIR.LEFT] = ANGLE.PI0,
                _a[DIR.TOP] = ANGLE.PI90,
                _a[DIR.RIGHT] = ANGLE.PI180,
                _a[DIR.BOTTOM] = ANGLE.PI270,
                _a);
            var types = aniType === ANITYPE.IN;
            var opts = {
                size: size,
                speed: 0,
                aniType: types,
                angle: dir[DIR[direction]],
                composite: types ? COMPOSITE.maskIn : COMPOSITE.maskOut,
                applySlice: this._applyWipeSlice,
                maskCanvas: this._createBaseCanvas(100, 100),
                radios: 0,
            };
            this._rotateBaseCanvas(opts.maskCanvas, opts.angle);
            this._performBarAnimation(opts);
        };
        Anets.prototype._applyWipeSlice = function (opts) {
            var maskCanvas = opts.maskCanvas;
            var cvs = maskCanvas.cvs, cvsCtx = maskCanvas.cvsCtx;
            var width = cvs.width, height = cvs.height;
            this._clearRectCanvas(maskCanvas);
            cvsCtx.fillRect(0, 0, width * opts.speed, height);
            return maskCanvas;
        };
        /**
         * 劈裂
         * @param args
         * @private
         */
        Anets.prototype._barnAnimation = function (args) {
            var _a, _b;
            var aniType = args.aniType, size = args.size, direction = args.direction;
            var maskOut = COMPOSITE.maskOut, maskIn = COMPOSITE.maskIn;
            var TOP = DIR.TOP, BOTTOM = DIR.BOTTOM, CENTER = DIR.CENTER, LEFT = DIR.LEFT, RIGHT = DIR.RIGHT;
            var PI0 = ANGLE.PI0, PI90 = ANGLE.PI90;
            var dir = (_a = {},
                _a[TOP + BOTTOM + CENTER] = [maskOut, false, PI90],
                _a[CENTER + TOP + BOTTOM] = [maskIn, true, PI90],
                _a[LEFT + RIGHT + CENTER] = [maskOut, false, PI0],
                _a[CENTER + LEFT + RIGHT] = [maskIn, true, PI0],
                _a);
            var opts = {
                size: size,
                speed: 0,
                angle: ANGLE.PI0,
                composite: maskIn,
                applySlice: this._applyBarnSlice,
                maskCanvas: this._createBaseCanvas(100, 100),
            };
            _b = dir[direction.toLocaleLowerCase()], opts.composite = _b[0], opts.aniType = _b[1], opts.angle = _b[2];
            if (aniType === ANITYPE.OUT) {
                opts.composite = opts.composite === maskIn ? maskOut : maskIn;
            }
            this._rotateBaseCanvas(opts.maskCanvas, opts.angle);
            this._performBarAnimation(opts);
        };
        Anets.prototype._applyBarnSlice = function (opts, speed) {
            var maskCanvas = opts.maskCanvas;
            var cvs = maskCanvas.cvs, cvsCtx = maskCanvas.cvsCtx;
            var width = cvs.width, height = cvs.height;
            this._clearRectCanvas(maskCanvas);
            speed *= width;
            cvsCtx.fillRect(width / 2 - speed / 2, 0, speed, height);
            return maskCanvas;
        };
        /**
         * 棋盘
         * @param args
         * @private
         */
        Anets.prototype._checkerboardAnimation = function (args) {
            var _a;
            var aniType = args.aniType, size = args.size, direction = args.direction;
            var dir = (_a = {},
                _a[DIR.RIGHT] = ANGLE.PI90,
                _a[DIR.BOTTOM] = ANGLE.PI180,
                _a);
            var opts = {
                size: size,
                speed: 0,
                aniType: aniType === ANITYPE.IN,
                angle: dir[DIR[direction]],
                ratioX: 6,
                ratioY: 6,
                composite: COMPOSITE.maskIn,
                applySlice: this._applyBlindSlice,
            };
            opts.maskCanvas = this._processBlindsPieces(opts);
            this._performBarAnimation(opts);
        };
        /**
         * 百叶窗
         * @param args
         * @private
         */
        Anets.prototype._blindsAnimation = function (args) {
            var _a;
            var aniType = args.aniType, size = args.size, direction = args.direction;
            var dir = (_a = {},
                _a[DIR.BOTTOM] = ANGLE.PI90,
                _a[DIR.RIGHT] = ANGLE.PI0,
                _a);
            var opts = {
                size: size,
                speed: 0,
                aniType: aniType === ANITYPE.IN,
                angle: dir[DIR[direction]],
                ratioX: 6,
                ratioY: 1,
                composite: COMPOSITE.maskIn,
                applySlice: this._applyBlindSlice,
            };
            opts.maskCanvas = this._processBlindsPieces(opts);
            this._performBarAnimation(opts);
        };
        Anets.prototype._applyBlindSlice = function (opts, speed) {
            var _a = opts, maskCanvas = _a.maskCanvas, ratioX = _a.ratioX, ratioY = _a.ratioY;
            var _b = maskCanvas, baseCanvas = _b.baseCanvas, sliceCanvas = _b.sliceCanvas, foilCanvas = _b.foilCanvas;
            this._clearRectCanvas(baseCanvas);
            var sliceCvs = sliceCanvas.cvs;
            var sliceContext = sliceCanvas.cvsCtx;
            var sliceWidth = sliceCvs.width;
            var sliceHeight = sliceCvs.height;
            sliceContext.clearRect(0, 0, sliceWidth, sliceHeight);
            sliceContext.fillStyle = WHITECOLOR;
            sliceContext.fillRect(0, 0, speed * sliceWidth, sliceHeight);
            var foilContext = foilCanvas.cvsCtx;
            var foilCvs = foilCanvas.cvs;
            foilContext.clearRect(0, 0, foilCvs.width, foilCvs.height);
            for (var i = 0; i < ratioX + 1; ++i) {
                foilContext.drawImage(sliceCvs, sliceWidth * i, 0);
            }
            var baseContext = baseCanvas.cvsCtx;
            for (var j = 0; j < ratioY; ++j) {
                // 棋盘
                baseContext.drawImage(foilCvs, j % 2 ? -sliceWidth / 2 : 0, j * foilCvs.height);
            }
            return baseCanvas;
        };
        /**
         * 处理 遮罩 canvas
         * @param {*} opts
         * @returns
         */
        Anets.prototype._processBlindsPieces = function (opts) {
            var _a = opts, angle = _a.angle, ratioX = _a.ratioX, ratioY = _a.ratioY;
            var baseCanvas = this._createBaseCanvas(102, 102);
            var cvs = baseCanvas.cvs;
            // 旋转画布
            this._rotateBaseCanvas(baseCanvas, angle);
            var sliceWidth = Math.ceil(cvs.width / ratioX);
            var sliceHeight = Math.ceil(cvs.height / ratioY);
            var sliceCanvas = this._createBaseCanvas(sliceWidth, sliceHeight);
            var foilCanvas = this._createBaseCanvas(cvs.width + sliceWidth, sliceHeight);
            return {
                baseCanvas: baseCanvas,
                sliceCanvas: sliceCanvas,
                foilCanvas: foilCanvas,
            };
        };
        /**
         * 溶解
         * @param args
         * @private
         */
        Anets.prototype._dissolveAnimation = function (args) {
            var _a;
            var aniType = args.aniType, size = args.size;
            var maskIn = COMPOSITE.maskIn, maskOut = COMPOSITE.maskOut;
            var dir = (_a = {},
                _a[ANITYPE.IN] = true,
                _a[ANITYPE.OUT] = false,
                _a);
            var types = dir[ANITYPE[aniType]];
            var opts = {
                size: size,
                speed: 0,
                composite: types ? maskIn : maskOut,
                aniType: types,
                applySlice: this._applyDissolveSlice,
            };
            opts.maskCanvas = this._processDissolvePieces();
            this._performBarAnimation(opts);
        };
        Anets.prototype._applyDissolveSlice = function (opts) {
            var _a = 
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            opts.maskCanvas, baseCanvas = _a.baseCanvas, randomList = _a.randomList, canvasList = _a.canvasList, randomArr = _a.randomArr;
            var cvsCtx = baseCanvas.cvsCtx;
            var floor = Math.floor;
            this._clearRectCanvas(baseCanvas);
            var speed = opts.speed;
            speed = floor(100 * speed);
            for (var i = 0; i < randomList.length; ++i) {
                var randomItem = randomList[i];
                var canvasItem = canvasList[i];
                var ctxItem = canvasItem.cvsCtx;
                ctxItem.clearRect(0, 0, 20, 20);
                ctxItem.fillStyle = WHITECOLOR;
                for (var j = 0; j < speed; ++j) {
                    var rdmItem = randomItem[j];
                    ctxItem.fillRect(2 * floor(rdmItem / 10), (rdmItem % 10) * 2, 2, 2);
                }
            }
            for (var i = 0; i < 5; ++i) {
                var ratioI = i * 20;
                for (var j = 0; j < 5; ++j) {
                    cvsCtx.drawImage(canvasList[randomArr[5 * i + j]].cvs, ratioI, j * 20);
                }
            }
            return baseCanvas;
        };
        Anets.prototype._processDissolvePieces = function () {
            var baseCanvas = this._createBaseCanvas(100, 100);
            var randomList = [];
            var canvasList = [];
            for (var i = 0; i < 5; ++i) {
                randomList.push(getRandomArrayList(100));
                canvasList.push(this._createBaseCanvas(20, 20));
            }
            var randomArr = getRandomArrayList(25);
            for (var j = 0; j < randomArr.length; ++j) {
                randomArr[j] %= 5;
            }
            return {
                baseCanvas: baseCanvas,
                randomList: randomList,
                canvasList: canvasList,
                randomArr: randomArr,
            };
        };
        /**
         * 随机线条
         * @param args
         * @private
         */
        Anets.prototype._randomBarAnimation = function (args) {
            var _a;
            var aniType = args.aniType, size = args.size, direction = args.direction;
            var maskIn = COMPOSITE.maskIn, maskOut = COMPOSITE.maskOut;
            var dir = (_a = {},
                _a[DIR.HORIZONTAL] = ANGLE.PI0,
                _a[DIR.VERTICAL] = ANGLE.PI90,
                _a);
            var composite = aniType === ANITYPE.IN ? maskIn : maskOut;
            var opts = {
                size: size,
                speed: 0,
                angle: dir[DIR[direction]],
                composite: composite,
                applySlice: this._applyRandomBarSlice,
            };
            opts.maskCanvas = this._processRandomBarPieces(opts);
            this._performBarAnimation(opts);
        };
        Anets.prototype._applyRandomBarSlice = function (opts) {
            var _a = opts.maskCanvas, baseCanvas = _a.baseCanvas, randomArr = _a.randomArr;
            var cvs = baseCanvas.cvs, cvsCtx = baseCanvas.cvsCtx;
            var floor = Math.floor;
            this._clearRectCanvas(baseCanvas);
            var speed = opts.speed;
            speed = floor(100 * speed);
            for (var i = 0; i < speed; ++i) {
                cvsCtx.fillRect(0, randomArr[i], cvs.width, 1);
            }
            return baseCanvas;
        };
        Anets.prototype._processRandomBarPieces = function (opts) {
            var baseCanvas = this._createBaseCanvas(100, 100);
            var randomArr = getRandomArrayList(100);
            this._rotateBaseCanvas(baseCanvas, opts.angle);
            return { baseCanvas: baseCanvas, randomArr: randomArr };
        };
        /**
         * 阶梯
         * @param args
         * @private
         */
        Anets.prototype._stripsAnimation = function (args) {
            var _a;
            var aniType = args.aniType, size = args.size, direction = args.direction;
            var dir = (_a = {},
                _a[DIR.LEFT + DIR.BOTTOM] = ANGLE.PI0,
                _a[DIR.LEFT + DIR.TOP] = ANGLE.PI90,
                _a[DIR.RIGHT + DIR.TOP] = ANGLE.PI180,
                _a[DIR.RIGHT + DIR.BOTTOM] = ANGLE.PI270,
                _a);
            var opts = {
                size: size,
                speed: 0,
                aniType: aniType === ANITYPE.OUT,
                angle: dir[direction.toLocaleLowerCase()],
                composite: COMPOSITE.maskOut,
                applySlice: this._applyStripSlice,
            };
            opts.maskCanvas = this._processStripPieces(opts);
            this._performBarAnimation(opts);
        };
        Anets.prototype._applyStripSlice = function (opts, speed) {
            var _a = opts.maskCanvas, baseCanvas = _a.baseCanvas, sliceCanvas = _a.sliceCanvas;
            this._clearRectCanvas(baseCanvas);
            baseCanvas.cvsCtx.drawImage(sliceCanvas.cvs, -192 * (1 - speed), 0);
            return baseCanvas;
        };
        Anets.prototype._processStripPieces = function (opts) {
            var baseCanvas = this._createBaseCanvas(96, 96);
            var sliceCanvas = this._createBaseCanvas(192, 96);
            var sliceCtx = sliceCanvas.cvsCtx;
            sliceCtx.fillRect(0, 0, 96, 96);
            sliceCtx.translate(96, 0);
            for (var i = 0; i < 16; ++i) {
                // sliceCtx.fillRect(0, i * 6, i * 6, 6)
                sliceCtx.fillRect(0, i * 6, i * 6, 6);
            }
            this._rotateBaseCanvas(baseCanvas, opts.angle);
            return { baseCanvas: baseCanvas, sliceCanvas: sliceCanvas };
        };
        /**
         * 楔入
         * @param args
         * @private
         */
        Anets.prototype._wedgeAnimation = function (args) {
            var _a;
            var aniType = args.aniType, size = args.size;
            var maskIn = COMPOSITE.maskIn, maskOut = COMPOSITE.maskOut;
            var dir = (_a = {},
                _a[ANITYPE.IN] = false,
                _a[ANITYPE.OUT] = true,
                _a);
            var types = dir[ANITYPE[aniType.toUpperCase()]];
            var opts = {
                size: size,
                speed: 0,
                aniType: types,
                composite: !types ? maskIn : maskOut,
                applySlice: this._applyWedgeSlice,
            };
            opts.maskCanvas = this._processWedgePieces();
            this._performBarAnimation(opts);
        };
        Anets.prototype._applyWedgeSlice = function (opts) {
            var maskCanvas = opts.maskCanvas;
            var cvs = maskCanvas.cvs, cvsCtx = maskCanvas.cvsCtx;
            this._clearRectCanvas(maskCanvas);
            var width = cvs.width;
            var speed = opts.speed;
            speed *= Math.PI;
            cvsCtx.save();
            cvsCtx.translate(width / 2, width / 2);
            cvsCtx.beginPath();
            cvsCtx.moveTo(0, 0);
            cvsCtx.arc(0, 0, width, -speed, speed, !1);
            cvsCtx.lineTo(0, 0);
            cvsCtx.fill();
            cvsCtx.restore();
            return maskCanvas;
        };
        Anets.prototype._processWedgePieces = function () {
            var baseCanvas = this._createBaseCanvas(100, 100);
            this._rotateBaseCanvas(baseCanvas, ANGLE.PI270);
            return baseCanvas;
        };
        /**
         * 轮子-出现
         * @param args
         * @private
         */
        Anets.prototype._wheelAnimation = function (args) {
            var _a;
            var aniType = args.aniType, size = args.size, direction = args.direction;
            var ONE = DIR.ONE, TWO = DIR.TWO, THREE = DIR.THREE, FOUR = DIR.FOUR, EIGHT = DIR.EIGHT, SPOKES = DIR.SPOKES;
            var maskIn = COMPOSITE.maskIn, maskOut = COMPOSITE.maskOut;
            var dir = (_a = {},
                _a[ONE + SPOKES] = 1,
                _a[TWO + SPOKES] = 2,
                _a[THREE + SPOKES] = 3,
                _a[FOUR + SPOKES] = 4,
                _a[EIGHT + SPOKES] = 8,
                _a);
            var opts = {
                size: size,
                speed: 0,
                angle: dir[direction.toLocaleLowerCase()],
                aniType: true,
                composite: aniType === ANITYPE.IN ? maskIn : maskOut,
                applySlice: this._applyWheelSlice,
            };
            opts.maskCanvas = this._processWheelPieces();
            this._performBarAnimation(opts);
        };
        Anets.prototype._applyWheelSlice = function (opts, speed) {
            var maskCanvas = opts.maskCanvas;
            var cvs = maskCanvas.cvs, cvsCtx = maskCanvas.cvsCtx;
            this._clearRectCanvas(maskCanvas);
            var width = cvs.width;
            var angle = opts.angle;
            var radios = (2 * Math.PI) / angle;
            speed *= radios;
            cvsCtx.save();
            cvsCtx.translate(width / 2, width / 2);
            cvsCtx.beginPath();
            for (var i = 0; i < angle; ++i) {
                var rise = i * radios;
                cvsCtx.moveTo(0, 0);
                cvsCtx.arc(0, 0, width, rise, rise + speed, !1);
                cvsCtx.lineTo(0, 0);
            }
            cvsCtx.fill();
            cvsCtx.restore();
            return maskCanvas;
        };
        Anets.prototype._processWheelPieces = function () {
            var baseCanvas = this._createBaseCanvas(100, 100);
            this._rotateBaseCanvas(baseCanvas, ANGLE.PI270);
            return baseCanvas;
        };
        /**
         * 盒状
         * @param args
         * @private
         */
        Anets.prototype._boxAnimation = function (args) {
            var aniType = args.aniType, size = args.size, direction = args.direction;
            var opts = {
                size: size,
                speed: 0,
                aniType: aniType,
                composite: direction,
                applySlice: this._applyBoxSlice,
            };
            opts.maskCanvas = this._processShapePieces(opts);
            this._performBarAnimation(opts);
        };
        Anets.prototype._applyBoxSlice = function (opts, speed) {
            var maskCanvas = opts.maskCanvas;
            var cvs = maskCanvas.cvs, cvsCtx = maskCanvas.cvsCtx;
            this._clearRectCanvas(maskCanvas);
            var width = cvs.width;
            speed *= cvs.width;
            width = (width - speed) / 2;
            cvsCtx.fillRect(width, width, speed, speed);
            return maskCanvas;
        };
        Anets.prototype._processShapePieces = function (opts) {
            var _a, _b;
            var baseCanvas = this._createBaseCanvas(100, 100);
            var maskIn = COMPOSITE.maskIn, maskOut = COMPOSITE.maskOut;
            var dir = (_a = {},
                _a[ANITYPE.IN + DIR.IN] = [false, maskOut],
                _a[ANITYPE.IN + DIR.OUT] = [true, maskIn],
                _a[ANITYPE.OUT + DIR.IN] = [true, maskOut],
                _a[ANITYPE.OUT + DIR.OUT] = [false, maskIn],
                _a);
            _b = dir[((ANITYPE[opts.aniType.toUpperCase()] +
                DIR[opts.composite]))], opts.aniType = _b[0], opts.composite = _b[1];
            return baseCanvas;
        };
        /**
         * 圆
         * @param args
         * @private
         */
        Anets.prototype._circleAnimation = function (args) {
            var aniType = args.aniType, size = args.size, direction = args.direction;
            var ceil = Math.ceil, sqrt = Math.sqrt;
            var opts = {
                size: size,
                speed: 0,
                aniType: aniType,
                composite: direction,
                applySlice: this._applyCircleSlice,
            };
            opts.maskCanvas = this._processShapePieces(opts);
            var halfWidth = opts.maskCanvas.cvs.width / 2;
            opts.radios = ceil(sqrt(2 * halfWidth * halfWidth));
            this._performBarAnimation(opts);
        };
        Anets.prototype._applyCircleSlice = function (opts, speed) {
            var maskCanvas = opts.maskCanvas;
            var cvs = maskCanvas.cvs, cvsCtx = maskCanvas.cvsCtx;
            this._clearRectCanvas(maskCanvas);
            var halfWidth = cvs.width / 2;
            speed *= opts.radios;
            cvsCtx.beginPath();
            cvsCtx.arc(halfWidth, halfWidth, speed, 0, 2 * Math.PI, !1);
            cvsCtx.fill();
            return maskCanvas;
        };
        /**
         * 菱形
         * @param args
         * @private
         */
        Anets.prototype._diamondAnimation = function (args) {
            var aniType = args.aniType, size = args.size, direction = args.direction;
            var opts = {
                size: size,
                speed: 0,
                aniType: aniType,
                composite: direction,
                applySlice: this._applyDiamondSlice,
            };
            var _a = (opts.maskCanvas = this._processShapePieces(opts)), cvs = _a.cvs, cvsCtx = _a.cvsCtx;
            var halfWidth = cvs.width / 2;
            cvsCtx.translate(halfWidth, halfWidth);
            this._performBarAnimation(opts);
        };
        Anets.prototype._applyDiamondSlice = function (opts, speed) {
            var maskCanvas = opts.maskCanvas;
            var cvs = maskCanvas.cvs, cvsCtx = maskCanvas.cvsCtx;
            this._clearRectCanvas(maskCanvas);
            speed *= cvs.width;
            cvsCtx.beginPath();
            cvsCtx.moveTo(-speed, 0);
            cvsCtx.lineTo(0, speed);
            cvsCtx.lineTo(speed, 0);
            cvsCtx.lineTo(0, -speed);
            cvsCtx.fill();
            return maskCanvas;
        };
        /**
         * 十字扩展
         * @param args
         * @private
         */
        Anets.prototype._plusAnimation = function (args) {
            var aniType = args.aniType, size = args.size, direction = args.direction;
            var opts = {
                size: size,
                speed: 0,
                aniType: aniType,
                composite: direction,
                applySlice: this._applyPlusSlice,
            };
            opts.maskCanvas = this._processShapePieces(opts);
            this._performBarAnimation(opts);
        };
        Anets.prototype._applyPlusSlice = function (opts, speed) {
            var maskCanvas = opts.maskCanvas;
            var cvs = maskCanvas.cvs, cvsCtx = maskCanvas.cvsCtx;
            this._clearRectCanvas(maskCanvas);
            var width = cvs.width;
            var halfWidth = width / 2;
            speed *= width;
            cvsCtx.fillRect(0, halfWidth - speed / 2, width, speed);
            cvsCtx.fillRect(halfWidth - speed / 2, 0, speed, width);
            return maskCanvas;
        };
        Anets.prototype._exitAnets = function () {
            var _a, _b;
            cancelAnimationFrame(this._rafId);
            var anetStyle = document.head.querySelector("#anetStyle");
            removeElement(anetStyle);
            dispatchEvent({
                name: "end",
                options: this._options,
            });
            removeElement((_a = this._baseCanvas) === null || _a === void 0 ? void 0 : _a.cvs);
            this._currentToggleClassName(false);
            (_b = this._callback) === null || _b === void 0 ? void 0 : _b.bind(null, this._options)();
            Anets._target = null;
            this._currentEl = null;
            this._canvas = null;
            this._baseCanvas = null;
        };
        Anets._target = null;
        Anets._instance = null;
        Anets.version = version;
        return Anets;
    }());

    return Anets;

}));