react-native-filament/lib/commonjs/react/Animator.js

A real-time physically based 3D rendering engine for React Native

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Animator = Animator;
var _react = _interopRequireWildcard(require("react"));
var _RenderCallbackContext = require("./RenderCallbackContext");
var _useAnimator = require("../hooks/useAnimator");
var _reactNativeWorkletsCore = require("react-native-worklets-core");
var _usePrevious = _interopRequireDefault(require("../hooks/usePrevious"));
var _ParentInstancesContext = require("./ParentInstancesContext");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
/**
 * Can be used to control the animation of a Model.
 * For pausing, playing, it is recommended to conditionally render the Animator component.
 *
 * @example
 * ```jsx
 * <Model source={DroneGlb}>
 *  <Animator animationIndex={2} />
 * </Model>
 * ```
 */
function Animator(props) {
  const instances = _react.default.useContext(_ParentInstancesContext.ParentInstancesContext);
  if (instances == null) {
    throw new Error('Animator must be used inside a <Model> or <ModelInstance> component.');
  }
  const instance = instances[0];
  if (instance == null) {
    // Should never happen
    throw new Error('No instances found for the parent Model component. This is a bug.');
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatorImpl, {
    instance: instance,
    ...props
  });
}
function AnimatorImpl({
  instance,
  animationIndex: animationIndexProp = 0,
  transitionDuration = 0,
  onAnimationsLoaded
}) {
  const animator = (0, _useAnimator.useAnimator)(instance);

  // State for cross fading animations
  const prevAnimationIndex = (0, _reactNativeWorkletsCore.useSharedValue)(undefined);
  const prevAnimationStarted = (0, _reactNativeWorkletsCore.useSharedValue)(undefined);
  const animationInterpolation = (0, _reactNativeWorkletsCore.useSharedValue)(0);
  _RenderCallbackContext.RenderCallbackContext.useRenderCallback(({
    passedSeconds
  }) => {
    'worklet';

    if (animator == null) {
      return;
    }
    const animationIndex = typeof animationIndexProp === 'number' ? animationIndexProp : animationIndexProp.value;
    animator.applyAnimation(animationIndex, passedSeconds);

    // Eventually apply a cross fade
    if (prevAnimationIndex.value != null && transitionDuration > 0) {
      if (prevAnimationStarted.value == null) {
        prevAnimationStarted.value = passedSeconds;
      }
      animationInterpolation.value += passedSeconds - prevAnimationStarted.value;
      const alpha = animationInterpolation.value / transitionDuration;

      // Blend animations using a cross fade
      animator.applyCrossFade(prevAnimationIndex.value, prevAnimationStarted.value, alpha);

      // Reset the prev animation once the transition is completed
      if (alpha >= 1) {
        prevAnimationIndex.value = undefined;
        prevAnimationStarted.value = undefined;
        animationInterpolation.value = 0;
      }
    }
    animator.updateBoneMatrices();
  }, [animator, animationIndexProp]);

  // Update prevAnimationIndex when animationIndexProp changes
  const previousAnimationIndexProp = (0, _usePrevious.default)(animationIndexProp);
  (0, _react.useEffect)(() => {
    // Update previous index if the prop is just a number:
    if (typeof animationIndexProp === 'number') {
      if (typeof previousAnimationIndexProp !== 'number') return;
      prevAnimationIndex.value = previousAnimationIndexProp;
      return;
    }

    // Update previous index if the prop is a shared value:
    let value = animationIndexProp.value;
    const removeListener = animationIndexProp.addListener(() => {
      prevAnimationIndex.value = value;
      value = animationIndexProp.value;
    });
    return () => {
      removeListener();
    };
  }, [animationIndexProp, prevAnimationIndex, previousAnimationIndexProp]);

  // Get all animations and return them using the onAnimationsLoaded callback
  (0, _react.useEffect)(() => {
    if (animator == null || onAnimationsLoaded == null) {
      return;
    }
    const animations = [];
    for (let i = 0; i < animator.getAnimationCount(); i++) {
      animations.push({
        index: i,
        duration: animator.getAnimationDuration(i),
        name: animator.getAnimationName(i)
      });
    }
    onAnimationsLoaded(animations);
  }, [animator, onAnimationsLoaded]);
  return null;
}
//# sourceMappingURL=Animator.js.map