vue-femtotween/dist/es.js

Vue 3 Composition API reactivity wrapper for femtoTween

import { ref, reactive, computed, watch } from 'vue';

const n=n=>t=>Math.pow(t,n),t=n=>t=>1-Math.abs(Math.pow(t-1,n)),e=e=>o=>o<.5?n(e)(2*o)/2:t(e)(2*o-1)/2+.5,o=e(1),i=n(2),a=t(2),r=e(2),s=n(3),u=t(3),w=e(3),c=n(4),d=t(4),m=e(4),f=n(5),h=t(5),l=e(5);function p(n,t,e,{time:o=400,done:i,ease:a=m}={}){const r="undefined"!=typeof window;let s=!1;const u=n-t;let w=null;return r&&window.requestAnimationFrame((function r(c){if(s)return;w||(w=c);const d=c-w,m=Math.min(d/o,1);e(n-a(m)*u),d<o?window.requestAnimationFrame(r):(e(t),i&&i());})),()=>s=!0}

const extendRefWithStop = (source, stop) => {
  return Object.defineProperty(source, "stop", {
    value: stop,
    enumerable: true,
    writable: true
  });
};
const setupTween = (from, to, options, callback) => {
  const tweeningValue = ref(from);
  const reactivityCallback = (newValue) => {
    const truncatedValue = options.precision == null ? newValue : Number.parseFloat(newValue.toFixed(options.precision));
    if (truncatedValue !== tweeningValue.value) {
      tweeningValue.value = truncatedValue;
    }
    callback?.(newValue);
  };
  const stop = p(from, to, reactivityCallback, options);
  return extendRefWithStop(tweeningValue, stop);
};
const useTweenEx = (from, to, options, callback) => {
  const tweenValue = ref(from.value);
  let innerTweenValue = ref(from.value);
  let innerTweenValueWatchHandler;
  watch([from, to], (value, oldValue, onCleanup) => {
    onCleanup(() => {
      innerTweenValueWatchHandler?.();
      tweenValue.stop?.();
    });
    innerTweenValue = setupTween(from.value, to.value, options, callback);
    tweenValue.stop = innerTweenValue.stop;
    innerTweenValueWatchHandler = watch(innerTweenValue, () => {
      tweenValue.value = innerTweenValue.value;
    }, { immediate: true });
  }, { immediate: true });
  return tweenValue;
};
const _useTween = (source, options, callback) => {
  const from = ref(source.value);
  const to = ref(source.value);
  let tweenedValue = null;
  watch(source, () => {
    if (tweenedValue) {
      from.value = tweenedValue.value;
      to.value = source.value;
    }
  }, { immediate: true });
  tweenedValue = useTweenEx(from, to, options, callback);
  return tweenedValue;
};
const useTween = (source, options, callback) => {
  if (typeof source.value === "number") {
    return _useTween(source, options, callback);
  }
  const sourceValues = source.value.map((value) => ref(value));
  const tweenedValues = reactive(sourceValues.map((value) => {
    return _useTween(value, options, callback);
  }));
  const unWrappedTweenedValues = computed(() => {
    return tweenedValues.map((value) => value.value);
  });
  watch(source, (newSources) => {
    newSources.forEach((value, index) => {
      sourceValues[index].value = value;
    });
  }, { deep: true });
  return extendRefWithStop(unWrappedTweenedValues, () => {
    tweenedValues.forEach((value) => {
      value.stop();
    });
  });
};

export { s as easeInCubic, w as easeInOutCubic, r as easeInOutQuad, m as easeInOutQuart, l as easeInOutQuint, i as easeInQuad, c as easeInQuart, f as easeInQuint, u as easeOutCubic, a as easeOutQuad, d as easeOutQuart, h as easeOutQuint, o as linear, useTween };
//# sourceMappingURL=es.js.map