UNPKG

@eva/react-eva-dragonbone

Version:

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

150 lines (133 loc) 4.7 kB
import _extends from "@babel/runtime/helpers/extends"; import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose"; import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose"; var _excluded = ["src", "resource", "armatureName", "animationName", "playTimes", "autoPlay", "children", "components"]; import { useImperativeHandle, useRef, useMemo, forwardRef } from 'react'; import { addSystem, EvaRefObject, useComponent, useResource, ResourceType, useComponents } from '@eva/react-eva'; import { DragonBone as DragonBoneComponent, DragonBoneSystem } from '@eva/plugin-renderer-dragonbone'; addSystem(new DragonBoneSystem()); export var DragonBoneRefObject = /*#__PURE__*/function (_EvaRefObject) { _inheritsLoose(DragonBoneRefObject, _EvaRefObject); function DragonBoneRefObject(_ref) { return _EvaRefObject.call(this, _ref) || this; } var _proto = DragonBoneRefObject.prototype; _proto.play = function play(animationName, times) { var DragonBone = this.DragonBone; DragonBone.play(animationName, times); return this; }; _proto.stop = function stop(animationName) { var DragonBone = this.DragonBone; DragonBone.stop(animationName); return this; }; _proto.on = function on(eventName, fn) { var DragonBone = this.DragonBone; DragonBone.on(eventName, fn); return this; }; _proto.off = function off(eventName, fn) { var DragonBone = this.DragonBone; DragonBone.off(eventName, fn); return this; }; _proto.once = function once(eventName, fn) { var DragonBone = this.DragonBone; DragonBone.once(eventName, fn); return this; }; return DragonBoneRefObject; }(EvaRefObject); export function useDragonBoneResource(_ref2) { var _image$match; var name = _ref2.name, image = _ref2.image, ske = _ref2.ske, tex = _ref2.tex; 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 texType = typeof tex === 'string' ? 'json' : tex.type; var texUrl = typeof tex === 'string' ? tex : tex.url; var src = useMemo(function () { return { image: { type: imageType, url: imageUrl }, ske: { type: skeType, url: skeUrl }, tex: { type: texType, url: texUrl } }; }, [imageUrl, skeUrl, texUrl]); return useResource({ name: name, type: ResourceType.DRAGONBONE, src: src }); } export function useDragonBone(_ref3) { var resource = _ref3.resource, armatureName = _ref3.armatureName, animationName = _ref3.animationName, autoPlay = _ref3.autoPlay, _ref3$playTimes = _ref3.playTimes, playTimes = _ref3$playTimes === void 0 ? Infinity : _ref3$playTimes; var component = useComponent(DragonBoneComponent, { resource: resource, armatureName: armatureName, animationName: animationName, autoPlay: autoPlay }); useMemo(function () { if (component.armature) { component.stop(component.animationName); } component.resource = resource; component.armatureName = armatureName; component.animationName = animationName; if (autoPlay) { component.play(animationName, playTimes); } }, [resource, armatureName, animationName, autoPlay]); return component; } var DragonBone = /*#__PURE__*/forwardRef(function (_ref4, ref) { var src = _ref4.src, resource = _ref4.resource, armatureName = _ref4.armatureName, animationName = _ref4.animationName, playTimes = _ref4.playTimes, autoPlay = _ref4.autoPlay, children = _ref4.children, _ref4$components = _ref4.components, components = _ref4$components === void 0 ? [] : _ref4$components, props = _objectWithoutPropertiesLoose(_ref4, _excluded); var _ref = useRef(null); useImperativeHandle(ref, function () { return new DragonBoneRefObject(_ref); }, []); if (src) { resource = useDragonBoneResource(src); } var component = useDragonBone({ resource: resource, armatureName: armatureName, animationName: animationName, playTimes: playTimes, autoPlay: autoPlay }); var _components = useComponents.apply(void 0, [component].concat(components)); return /*#__PURE__*/React.createElement("gameobject", _extends({ ref: _ref, components: _components }, props), children); }); export default DragonBone;