@vci/quick-three/src/helper/TweenHelper.js

quick three

import { cloneDeepByJSON, mergeDeep } from "@vci/helper/src/object";
import { isEmpty } from "@vci/helper/src/other";
import { Easing, remove, Tween } from "@tweenjs/tween.js";

function createTweenModifier(tw, option) {
  const {
    instance, keyModifyProperty,
    twKey, twOptionDefault,
    twOnStart, twOnUpdate, twOnComplete
  } = mergeDeep({
    instance: null,
    keyModifyProperty: null,
    twKey: null,
    twOptionDefault: {
      delay: 0,
      duration: .8e3,
      easing: Easing.Cubic.InOut,
      onStart: null,
      onUpdate: null,
      onComplete: null,
      immediate: false
    },
    twOnStart: null,
    twOnUpdate: null,
    twOnComplete: null
  }, option);
  return async function (value, twOption) {
    const {
      duration,
      delay,
      easing,
      onStart,
      onUpdate,
      onComplete,
      immediate
    } = mergeDeep(cloneDeepByJSON(twOptionDefault), twOption);
    const keyDefaultValue = `_${keyModifyProperty}`;
    isEmpty(instance[keyDefaultValue]) && (instance[keyDefaultValue] = instance[keyModifyProperty]);
    tw[twKey] && remove(tw[twKey]);
    if (immediate) {
      instance[keyModifyProperty] = value;
      twOnComplete && twOnComplete(instance);
      onComplete && onComplete(instance);
    } else await new Promise(resolve => {
      tw[twKey] = new Tween(instance)
        .to({ [keyModifyProperty]: value })
        .delay(delay)
        .duration(duration)
        .easing(easing)
        .onStart(e => {
          twOnStart && twOnStart(e, value);
          onStart && onStart(e, value);
        })
        .onUpdate(e => {
          twOnUpdate && twOnUpdate(e, e[keyModifyProperty]);
          onUpdate && onUpdate(e, e[keyModifyProperty]);
        })
        .onComplete(e => {
          twOnComplete && twOnComplete(e);
          onComplete && onComplete(e);
          resolve();
        })
        .start();
    });
  };
}

export { createTweenModifier };