UNPKG

@eva/react-eva-spine

Version:

React EVA是一个让开发同学能够在React技术体系下,利用EVA JS的游戏研发能力,开发动画、游戏类场景的框架。它可以让开发同学用熟悉的JSX和Hooks语法编写动画、游戏场景的代码。

168 lines (137 loc) 4.8 kB
"use strict"; 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;