@eva/react-eva-dragonbone
Version:
React EVA是一个让开发同学能够在React技术体系下,利用EVA JS的游戏研发能力,开发动画、游戏类场景的框架。它可以让开发同学用熟悉的JSX和Hooks语法编写动画、游戏场景的代码。
150 lines (133 loc) • 4.7 kB
JavaScript
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;