index.js

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('karas')) :
  typeof define === 'function' && define.amd ? define(['karas'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.FrameAnimate = factory(global.karas));
})(this, (function (karas) { 'use strict';

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

  var karas__default = /*#__PURE__*/_interopDefaultLegacy(karas);

  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);
    }
  }

  function _createClass(Constructor, protoProps, staticProps) {
    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
    if (staticProps) _defineProperties(Constructor, staticProps);
    Object.defineProperty(Constructor, "prototype", {
      writable: false
    });
    return Constructor;
  }

  function _inherits(subClass, superClass) {
    if (typeof superClass !== "function" && superClass !== null) {
      throw new TypeError("Super expression must either be null or a function");
    }

    subClass.prototype = Object.create(superClass && superClass.prototype, {
      constructor: {
        value: subClass,
        writable: true,
        configurable: true
      }
    });
    Object.defineProperty(subClass, "prototype", {
      writable: false
    });
    if (superClass) _setPrototypeOf(subClass, superClass);
  }

  function _getPrototypeOf(o) {
    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
      return o.__proto__ || Object.getPrototypeOf(o);
    };
    return _getPrototypeOf(o);
  }

  function _setPrototypeOf(o, p) {
    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
      o.__proto__ = p;
      return o;
    };
    return _setPrototypeOf(o, p);
  }

  function _superPropBase(object, property) {
    while (!Object.prototype.hasOwnProperty.call(object, property)) {
      object = _getPrototypeOf(object);
      if (object === null) break;
    }

    return object;
  }

  function _get() {
    if (typeof Reflect !== "undefined" && Reflect.get) {
      _get = Reflect.get.bind();
    } else {
      _get = function _get(target, property, receiver) {
        var base = _superPropBase(target, property);

        if (!base) return;
        var desc = Object.getOwnPropertyDescriptor(base, property);

        if (desc.get) {
          return desc.get.call(arguments.length < 3 ? target : receiver);
        }

        return desc.value;
      };
    }

    return _get.apply(this, arguments);
  }

  var version = "0.5.4";

  var _karas$refresh = karas__default["default"].refresh,
      CACHE = _karas$refresh.level.CACHE;
      _karas$refresh.webgl.drawTextureCache;
      var calRectPoint = karas__default["default"].math.matrix.calRectPoint;
      karas__default["default"].util.isNil;
      var _karas$mode = karas__default["default"].mode,
      CANVAS = _karas$mode.CANVAS,
      WEBGL = _karas$mode.WEBGL,
      inject = karas__default["default"].inject;

  function convertCoords2Gl(x, y, z, w, cx, cy, tz) {
    if (w && w !== 1) {
      x /= w;
      y /= w;
      z /= w;
    }

    if (x === cx) {
      x = 0;
    } else {
      x = (x - cx) / cx;
    }

    if (y === cy) {
      y = 0;
    } else {
      y = (cy - y) / cy;
    }

    if (tz) {
      z /= -tz;
    }

    if (w === 1) {
      return {
        x: x,
        y: y,
        z: z,
        w: w
      };
    }

    return {
      x: x * w,
      y: y * w,
      z: z * w,
      w: w
    };
  }

  var $ = /*#__PURE__*/function (_karas$Geom) {
    _inherits($, _karas$Geom);

    function $(tagName, props) {
      var _this;

      _this = _karas$Geom.call(this, tagName, props) || this;
      _this.fill = props.fill;
      _this.list = props.list;
      return _this;
    }

    _createClass($, [{
      key: "render",
      value: function render(renderMode, ctx, dx, dy) {
        var _this2 = this;

        var res = _get(_getPrototypeOf($.prototype), "render", this).call(this, renderMode, ctx, dx, dy);

        if (res["break"]) {
          return res;
        }

        var root = this.__root;

        if (renderMode !== root.__renderMode) {
          return res;
        }

        var index = this.index,
            tx = this.tx,
            ty = this.ty,
            fill = this.fill,
            list = this.list; // 第一次需要查看fill，渲染第一帧

        if (index === undefined) {
          if (fill === 'both' || fill === 'backwards') {
            for (var i = 0, len = list.length; i < len; i++) {
              var _item = list[i]; // 防止空的

              if (_item.number) {
                index = i;
                tx = 0;
                ty = 0;
                break;
              }
            }
          } else {
            return;
          }
        }

        this.lastIndex = index;
        var item = list[index];

        if (!item.loading) {
          item.loading = true;
          inject.measureImg(item.url, function (res) {
            if (res.success) {
              item.cache = res;

              if (index === _this2.lastIndex && !_this2.isDestroyed) {
                _this2.render(renderMode, ctx, dx, dy);
              }
            }
          });
        }

        var cache = item.cache;

        if (cache) {
          this.lastTx = tx;
          this.lastTy = ty;
          var w = cache.width / item.column,
              h = cache.height / item.row;
          var sx = tx * w,
              sy = ty * h;

          if (renderMode === CANVAS) {
            ctx.drawImage(item.cache.source, sx, sy, w, h, this.x, this.y, this.width, this.height);
            this.host.emit('frame');
          } else if (renderMode === WEBGL) {
            var gl = ctx;
            var env = this.env;
            var cx = env.width * 0.5,
                cy = env.height * 0.5;
            var texture = item.texture;

            if (!texture) {
              texture = item.texture = gl.createTexture();
              gl.activeTexture(gl['TEXTURE0']);
              gl.bindTexture(gl.TEXTURE_2D, texture);
              gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
              gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
              gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, cache.source);
              gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
              gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
              gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
              gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
            } else {
              gl.activeTexture(gl['TEXTURE0']);
              gl.bindTexture(gl.TEXTURE_2D, texture);
            }

            if (texture) {
              gl.useProgram(gl.program);
              var m = this.matrixEvent,
                  opacity = this.opacity;

              var _calRectPoint = calRectPoint(this.x + dx, this.y + this.height + dy, this.x + this.width + dx, this.y + dy, m),
                  x1 = _calRectPoint.x1,
                  y1 = _calRectPoint.y1,
                  z1 = _calRectPoint.z1,
                  w1 = _calRectPoint.w1,
                  x2 = _calRectPoint.x2,
                  y2 = _calRectPoint.y2,
                  z2 = _calRectPoint.z2,
                  w2 = _calRectPoint.w2,
                  x3 = _calRectPoint.x3,
                  y3 = _calRectPoint.y3,
                  z3 = _calRectPoint.z3,
                  w3 = _calRectPoint.w3,
                  x4 = _calRectPoint.x4,
                  y4 = _calRectPoint.y4,
                  z4 = _calRectPoint.z4,
                  w4 = _calRectPoint.w4;

              var z = Math.max(Math.abs(z1), Math.abs(z2));
              z = Math.max(z, Math.abs(z3));
              z = Math.max(z, Math.abs(z4));

              if (z) {
                z = Math.max(z, Math.sqrt(cx * cx + cy * cy));
              }

              var t = convertCoords2Gl(x1, y1, z1, w1, cx, cy, z);
              x1 = t.x;
              y1 = t.y;
              z1 = t.z;
              t = convertCoords2Gl(x2, y2, z2, w2, cx, cy, z);
              x2 = t.x;
              y2 = t.y;
              z2 = t.z;
              t = convertCoords2Gl(x3, y3, z3, w3, cx, cy, z);
              x3 = t.x;
              y3 = t.y;
              z3 = t.z;
              t = convertCoords2Gl(x4, y4, z4, w4, cx, cy, z);
              x4 = t.x;
              y4 = t.y;
              z4 = t.z;
              var vtPoint = new Float32Array([x1, y1, z1, w1, x4, y4, z4, w4, x2, y2, z2, w2, x4, y4, z4, w4, x2, y2, z2, w2, x3, y3, z3, w3]);
              var tx1 = sx / cache.width,
                  ty1 = (cache.height - sy - h) / cache.height;
              var tx2 = (sx + w) / cache.width,
                  ty2 = (cache.height - sy) / cache.height;
              var vtTex = new Float32Array([tx1, ty1, tx1, ty2, tx2, ty1, tx1, ty2, tx2, ty1, tx2, ty2]);
              var vtOpacity = new Float32Array([opacity, opacity, opacity, opacity, opacity, opacity]); // 顶点buffer

              var pointBuffer = gl.createBuffer();
              gl.bindBuffer(gl.ARRAY_BUFFER, pointBuffer);
              gl.bufferData(gl.ARRAY_BUFFER, vtPoint, gl.STATIC_DRAW);
              var a_position = gl.getAttribLocation(gl.program, 'a_position');
              gl.vertexAttribPointer(a_position, 4, gl.FLOAT, false, 0, 0);
              gl.enableVertexAttribArray(a_position); // 纹理buffer

              var texBuffer = gl.createBuffer();
              gl.bindBuffer(gl.ARRAY_BUFFER, texBuffer);
              gl.bufferData(gl.ARRAY_BUFFER, vtTex, gl.STATIC_DRAW);
              var a_texCoords = gl.getAttribLocation(gl.program, 'a_texCoords');
              gl.vertexAttribPointer(a_texCoords, 2, gl.FLOAT, false, 0, 0);
              gl.enableVertexAttribArray(a_texCoords); // opacity buffer

              var opacityBuffer = gl.createBuffer();
              gl.bindBuffer(gl.ARRAY_BUFFER, opacityBuffer);
              gl.bufferData(gl.ARRAY_BUFFER, vtOpacity, gl.STATIC_DRAW);
              var a_opacity = gl.getAttribLocation(gl.program, 'a_opacity');
              gl.vertexAttribPointer(a_opacity, 1, gl.FLOAT, false, 0, 0);
              gl.enableVertexAttribArray(a_opacity); // 纹理单元

              var u_texture = gl.getUniformLocation(gl.program, 'u_texture');
              gl.uniform1i(u_texture, 0);
              gl.drawArrays(gl.TRIANGLES, 0, 6);
              gl.deleteBuffer(pointBuffer);
              gl.deleteBuffer(texBuffer);
              gl.deleteBuffer(opacityBuffer);
              gl.disableVertexAttribArray(a_position);
              gl.disableVertexAttribArray(a_texCoords);
              gl.disableVertexAttribArray(a_opacity);
              this.host.emit('frame');
            }
          }
        }
      }
    }]);

    return $;
  }(karas__default["default"].Geom);

  var FrameAnimate = /*#__PURE__*/function (_karas$Component) {
    _inherits(FrameAnimate, _karas$Component);

    function FrameAnimate(props) {
      var _this3;

      _this3 = _karas$Component.call(this, props) || this;
      var _this3$props = _this3.props,
          _this3$props$duration = _this3$props.duration,
          duration = _this3$props$duration === void 0 ? 1000 : _this3$props$duration,
          direction = _this3$props.direction,
          _this3$props$delay = _this3$props.delay,
          delay = _this3$props$delay === void 0 ? 0 : _this3$props$delay,
          _this3$props$playback = _this3$props.playbackRate,
          playbackRate = _this3$props$playback === void 0 ? 1 : _this3$props$playback,
          _this3$props$iteratio = _this3$props.iterations,
          iterations = _this3$props$iteratio === void 0 ? Infinity : _this3$props$iteratio,
          _this3$props$fill = _this3$props.fill,
          fill = _this3$props$fill === void 0 ? 'both' : _this3$props$fill;
      _this3.duration = duration;
      _this3.direction = direction;
      _this3.playbackRate = playbackRate;
      _this3.iterations = iterations;
      _this3.delay = delay;
      _this3.fill = fill;
      _this3.__timeCount = 0;
      var _this3$props$list = _this3.props.list,
          list = _this3$props$list === void 0 ? [] : _this3$props$list;

      if (list.length) {
        var count = 0,
            total = 0;
        list.forEach(function (item, i) {
          var _item$row = item.row,
              row = _item$row === void 0 ? 1 : _item$row,
              _item$column = item.column,
              column = _item$column === void 0 ? 1 : _item$column,
              _item$number = item.number,
              number = _item$number === void 0 ? row * column : _item$number;
          item.row = row;
          item.column = column;
          item.number = number;
          total += number;
          item.index = i;
        }); // 计算每个所占时长

        var per = _this3.duration / total;
        list.forEach(function (item) {
          item.begin = count;
          item.end = count += per * item.number;
        }); // 反向也需要

        count = 0;
        list.reverse().forEach(function (item) {
          item.begin2 = count;
          item.end2 = count += per * item.number;
        });
        list.reverse();
      }

      _this3.list = list;
      return _this3;
    }

    _createClass(FrameAnimate, [{
      key: "componentDidMount",
      value: function componentDidMount() {
        var _this4 = this;

        var _this$props = this.props,
            _this$props$list = _this$props.list,
            list = _this$props$list === void 0 ? [] : _this$props$list,
            _this$props$autoPlay = _this$props.autoPlay,
            autoPlay = _this$props$autoPlay === void 0 ? true : _this$props$autoPlay;

        if (list.length) {
          var fake = this.ref.fake,
              root = this.root;

          var cb = this.cb = function (diff) {
            var currentTime = _this4.__timeCount += diff * _this4.playbackRate;
            currentTime -= _this4.delay;

            if (currentTime < 0) {
              return;
            }

            var playCount = Math.floor(currentTime / _this4.duration);

            if (playCount >= _this4.iterations) {
              _this4.pause();

              var fill = _this4.fill;

              if (fill !== 'both' && fill !== 'forwards') {
                fake.index = undefined;

                root.__addUpdate(fake, [], CACHE, false, false, null, null);

                return;
              }
            }

            currentTime -= playCount * _this4.duration;
            var alternate = false;

            if (_this4.direction === 'alternate') {
              alternate = playCount % 2 === 1;
            }

            if (alternate) {
              for (var i = 0; i < list.length; i++) {
                var item = list[i];

                if (currentTime >= item.begin2 && currentTime < item.end2) {
                  var percent = (currentTime - item.begin2) / (item.end2 - item.begin2);
                  var per = 1 / item.number;
                  var n = Math.floor(percent / per);

                  if (n > item.number) {
                    n = item.number - 1;
                  }

                  var x = n % item.column;
                  var y = Math.floor(n / item.column);
                  x = item.column - x - 1;
                  y = item.row - y - 1;
                  fake.index = i;
                  fake.tx = x;
                  fake.ty = y;

                  root.__addUpdate(fake, [], CACHE, false, false, null, null);

                  break;
                }
              }
            } else {
              for (var _i = 0; _i < list.length; _i++) {
                var _item2 = list[_i];

                if (currentTime >= _item2.begin && currentTime < _item2.end) {
                  var _percent = (currentTime - _item2.begin) / (_item2.end - _item2.begin);

                  var _per = 1 / _item2.number;

                  var _n = Math.floor(_percent / _per);

                  if (_n > _item2.number) {
                    _n = _item2.number - 1;
                  }

                  var _x = _n % _item2.column;

                  var _y = Math.floor(_n / _item2.column);

                  fake.index = _i;
                  fake.tx = _x;
                  fake.ty = _y;

                  root.__addUpdate(fake, [], CACHE, false, false, null, null);

                  break;
                }
              }
            }
          };

          if (autoPlay) {
            fake.frameAnimate(cb);
          }
        }
      }
    }, {
      key: "componentWillUnmount",
      value: function componentWillUnmount() {
        var _this$props$list2 = this.props.list,
            list = _this$props$list2 === void 0 ? [] : _this$props$list2;
        var root = this.__root,
            renderMode = root.__renderMode;

        if (renderMode === WEBGL) {
          list.forEach(function (item) {
            if (item.texture) {
              root.ctx.deleteTexture(item.texture);
            }
          });
        }
      }
    }, {
      key: "render",
      value: function render() {
        return karas__default["default"].createElement("div", null, karas__default["default"].createElement($, {
          ref: "fake",
          style: {
            width: '100%',
            height: '100%',
            fill: 'none',
            stroke: 0
          },
          fill: this.fill,
          list: this.list,
          direction: this.direction,
          delay: this.delay,
          duration: this.duration,
          iterations: this.iterations
        }));
      }
    }, {
      key: "play",
      value: function play() {
        this.__timeCount = 0;
        this.pause();
        this.resume();
      }
    }, {
      key: "pause",
      value: function pause() {
        this.ref.fake.removeFrameAnimate(this.cb);
      }
    }, {
      key: "pauseTo",
      value: function pauseTo() {
        var n = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
        this.__timeCount = n;
        this.cb(0);
      }
    }, {
      key: "pauseToFrame",
      value: function pauseToFrame() {
        var n = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
        var _this$props$list3 = this.props.list,
            list = _this$props$list3 === void 0 ? [] : _this$props$list3;

        for (var i = 0, len = list.length; i < len; i++) {
          var item = list[i];
          var _item$row2 = item.row,
              row = _item$row2 === void 0 ? 1 : _item$row2,
              _item$column2 = item.column,
              column = _item$column2 === void 0 ? 1 : _item$column2,
              _item$number2 = item.number,
              number = _item$number2 === void 0 ? row * column : _item$number2;

          if (n < number) {
            this.__timeCount = item.begin + (item.end - item.begin) * n;
            var x = n % column;
            var y = Math.floor(n / column);
            var fake = this.ref.fake;

            if (fake.index !== i || fake.lastTx !== x || fake.lastTy !== y) {
              fake.index = fake.lastIndex = i;
              fake.tx = x;
              fake.ty = y;

              this.root.__addUpdate(fake, [], CACHE, false, false, null, null);
            }

            break;
          }
        }
      }
    }, {
      key: "stop",
      value: function stop() {
        this.pause();
        this.__timeCount = 0;
        var fake = this.ref.fake;
        fake.index = undefined;

        this.root.__addUpdate(fake, [], CACHE, false, false, null, null);
      }
    }, {
      key: "resume",
      value: function resume() {
        this.ref.fake.frameAnimate(this.cb);
      }
    }, {
      key: "duration",
      get: function get() {
        return this.__duration;
      },
      set: function set(v) {
        v = parseFloat(v) || 1000;

        if (v <= 0) {
          v = 1;
        }

        this.__duration = v;
      }
    }, {
      key: "playbackRate",
      get: function get() {
        return this.__playbackRate;
      },
      set: function set(v) {
        v = parseFloat(v) || 1;

        if (v <= 0) {
          v = 1;
        }

        this.__playbackRate = v;
      }
    }, {
      key: "direction",
      get: function get() {
        return this.__direction;
      },
      set: function set(v) {
        this.__direction = v;
      }
    }, {
      key: "iterations",
      get: function get() {
        return this.__iterations;
      },
      set: function set(v) {
        if (v !== Infinity) {
          v = parseInt(v) || 1;
        }

        if (v <= 0) {
          v = 1;
        }

        this.__iterations = v;
      }
    }, {
      key: "delay",
      get: function get() {
        return this.__delay;
      },
      set: function set(v) {
        this.__delay = parseInt(v) || 0;
      }
    }, {
      key: "fill",
      get: function get() {
        return this.__fill;
      },
      set: function set(v) {
        this.__fill = v;
      }
    }, {
      key: "list",
      get: function get() {
        return this.__list;
      },
      set: function set(v) {
        this.__list = v;
      }
    }]);

    return FrameAnimate;
  }(karas__default["default"].Component);

  FrameAnimate.version = version;

  return FrameAnimate;

}));
//# sourceMappingURL=index.js.map