@eva/react-eva-spine
Version:
React EVA是一个让开发同学能够在React技术体系下,利用EVA JS的游戏研发能力,开发动画、游戏类场景的框架。它可以让开发同学用熟悉的JSX和Hooks语法编写动画、游戏场景的代码。
168 lines (137 loc) • 4.8 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = exports.SpineRefObject = void 0;
exports.useSpine = useSpine;
exports.useSpineResource = useSpineResource;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = require("react");
var _reactEva = require("@eva/react-eva");
var _pluginRendererSpine = require("@eva/plugin-renderer-spine");
var _excluded = ["src", "resource", "animationName", "loop", "autoPlay", "children", "components"];
(0, _reactEva.addSystem)(new _pluginRendererSpine.SpineSystem());
var SpineRefObject = /*#__PURE__*/function (_EvaRefObject) {
(0, _inheritsLoose2["default"])(SpineRefObject, _EvaRefObject);
function SpineRefObject(_ref) {
return _EvaRefObject.call(this, _ref) || this;
}
var _proto = SpineRefObject.prototype;
_proto.play = function play(animationName, loop) {
var Spine = this.Spine;
Spine.play(animationName, loop);
return this;
};
_proto.stop = function stop() {
var Spine = this.Spine;
Spine.stop();
return this;
};
_proto.on = function on(eventName, fn) {
var Spine = this.Spine;
Spine.on(eventName, fn);
return this;
};
_proto.off = function off(eventName, fn) {
var Spine = this.Spine;
Spine.off(eventName, fn);
return this;
};
_proto.once = function once(eventName, fn) {
var Spine = this.Spine;
Spine.once(eventName, fn);
return this;
};
return SpineRefObject;
}(_reactEva.EvaRefObject);
exports.SpineRefObject = SpineRefObject;
function useSpineResource(_ref2) {
var _image$match;
var name = _ref2.name,
image = _ref2.image,
ske = _ref2.ske,
atlas = _ref2.atlas;
var imageType = typeof image === 'string' ? ((_image$match = image.match(/\.(png|jpg|jpeg)/)) === null || _image$match === void 0 ? void 0 : _image$match[1]) || 'png' : image.type;
var imageUrl = typeof image === 'string' ? image : image.url;
var skeType = typeof ske === 'string' ? 'json' : ske.type;
var skeUrl = typeof ske === 'string' ? ske : ske.url;
var atlasType = typeof atlas === 'string' ? 'atlas' : atlas.type;
var atlasUrl = typeof atlas === 'string' ? atlas : atlas.url;
var src = (0, _react.useMemo)(function () {
return {
image: {
type: imageType,
url: imageUrl
},
ske: {
type: skeType,
url: skeUrl
},
atlas: {
type: atlasType,
url: atlasUrl
}
};
}, [imageUrl, skeUrl, atlasUrl]);
return (0, _reactEva.useResource)({
name: name,
type: _reactEva.ResourceType.SPINE,
src: src
});
}
function useSpine(_ref3) {
var resource = _ref3.resource,
animationName = _ref3.animationName,
_ref3$loop = _ref3.loop,
loop = _ref3$loop === void 0 ? false : _ref3$loop,
_ref3$autoPlay = _ref3.autoPlay,
autoPlay = _ref3$autoPlay === void 0 ? false : _ref3$autoPlay;
var component = (0, _reactEva.useComponent)(_pluginRendererSpine.Spine, {
resource: resource,
animationName: animationName,
autoPlay: autoPlay
});
(0, _react.useMemo)(function () {
if (component.animationName) {
component.stop();
}
component.resource = resource;
component.animationName = animationName;
if (autoPlay) {
component.play(animationName, loop);
}
}, [resource, animationName, loop, autoPlay]);
return component;
}
var Spine = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
var src = _ref4.src,
resource = _ref4.resource,
animationName = _ref4.animationName,
loop = _ref4.loop,
autoPlay = _ref4.autoPlay,
children = _ref4.children,
_ref4$components = _ref4.components,
components = _ref4$components === void 0 ? [] : _ref4$components,
props = (0, _objectWithoutPropertiesLoose2["default"])(_ref4, _excluded);
var _ref = (0, _react.useRef)(null);
(0, _react.useImperativeHandle)(ref, function () {
return new SpineRefObject(_ref);
}, []);
if (src) {
resource = useSpineResource(src);
}
var component = useSpine({
resource: resource,
animationName: animationName,
loop: loop,
autoPlay: autoPlay
});
var _components = _reactEva.useComponents.apply(void 0, [component].concat(components));
return /*#__PURE__*/React.createElement("gameobject", (0, _extends2["default"])({
ref: _ref,
components: _components
}, props), children);
});
var _default = Spine;
exports["default"] = _default;