@lytjs/plugin-animation 6.4.0

package/dist/index.js

@@ -0,0 +1,781 @@
+// src/index.ts
+import { definePlugin } from "@lytjs/core";
+import { signal } from "@lytjs/reactivity";
+
+// src/gpu-acceleration.ts
+var DEFAULT_GPU_OPTIONS = {
+  enable3D: true,
+  willChange: "transform",
+  force3D: false,
+  compositorThreshold: 1e-3
+};
+function to3DTransform(transform) {
+  return transform.replace(/translateX\(([^)]+)\)/g, "translate3d($1, 0, 0)").replace(/translateY\(([^)]+)\)/g, "translate3d(0, $1, 0)").replace(/translate\(([^,]+),\s*([^)]+)\)/g, "translate3d($1, $2, 0)").replace(/scale\(([^)]+)\)/g, "scale3d($1, $1, 1)").replace(/scale\(([^,]+),\s*([^)]+)\)/g, "scale3d($1, $2, 1)");
+}
+function canUseGPU(element) {
+  const el = element;
+  if (typeof window === "undefined") return false;
+  const noGPU = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    navigator.userAgent
+  );
+  if (noGPU) {
+    const hasGPU = el.style.transform !== void 0;
+    return hasGPU;
+  }
+  return true;
+}
+function enableGPUAcceleration(element, options = DEFAULT_GPU_OPTIONS) {
+  const { willChange = "transform" } = options;
+  element.style.willChange = willChange;
+  element.style.backfaceVisibility = "hidden";
+  element.style.perspective = "1000px";
+}
+function disableGPUAcceleration(element) {
+  element.style.willChange = "auto";
+  element.style.backfaceVisibility = "";
+  element.style.perspective = "";
+}
+var GPU_PRESETS = {
+  /**
+   * 快速滑入（GPU 加速）
+   */
+  gpuSlideIn: {
+    from: {
+      transform: "translate3d(0, -100%, 0)",
+      opacity: 0
+    },
+    to: {
+      transform: "translate3d(0, 0, 0)",
+      opacity: 1
+    }
+  },
+  /**
+   * 快速滑出（GPU 加速）
+   */
+  gpuSlideOut: {
+    from: {
+      transform: "translate3d(0, 0, 0)",
+      opacity: 1
+    },
+    to: {
+      transform: "translate3d(0, -100%, 0)",
+      opacity: 0
+    }
+  },
+  /**
+   * 缩放进入（GPU 加速）
+   */
+  gpuZoomIn: {
+    from: {
+      transform: "translate3d(-50%, -50%, 0) scale(0)",
+      opacity: 0
+    },
+    to: {
+      transform: "translate3d(-50%, -50%, 0) scale(1)",
+      opacity: 1
+    }
+  },
+  /**
+   * 缩放离开（GPU 加速）
+   */
+  gpuZoomOut: {
+    from: {
+      transform: "translate3d(-50%, -50%, 0) scale(1)",
+      opacity: 1
+    },
+    to: {
+      transform: "translate3d(-50%, -50%, 0) scale(0)",
+      opacity: 0
+    }
+  },
+  /**
+   * 3D 旋转进入
+   */
+  rotate3dIn: {
+    from: {
+      transform: "rotate3d(0, 1, 0, 90deg)",
+      opacity: 0
+    },
+    to: {
+      transform: "rotate3d(0, 0, 0, 0deg)",
+      opacity: 1
+    }
+  },
+  /**
+   * 3D 旋转离开
+   */
+  rotate3dOut: {
+    from: {
+      transform: "rotate3d(0, 0, 0, 0deg)",
+      opacity: 1
+    },
+    to: {
+      transform: "rotate3d(0, 1, 0, 90deg)",
+      opacity: 0
+    }
+  },
+  /**
+   * 弹性弹跳（GPU 加速）
+   */
+  elasticBounce: {
+    "0%": {
+      transform: "translate3d(0, 0, 0) scale(1)",
+      opacity: 1
+    },
+    "30%": {
+      transform: "translate3d(0, -30px, 0) scale(1.1)",
+      opacity: 1
+    },
+    "50%": {
+      transform: "translate3d(0, -15px, 0) scale(0.95)",
+      opacity: 1
+    },
+    "70%": {
+      transform: "translate3d(0, -7px, 0) scale(1.02)",
+      opacity: 1
+    },
+    "100%": {
+      transform: "translate3d(0, 0, 0) scale(1)",
+      opacity: 1
+    }
+  },
+  /**
+   * 翻转进入
+   */
+  flipIn: {
+    from: {
+      transform: "perspective(400px) rotate3d(1, 0, 0, 90deg)",
+      opacity: 0
+    },
+    "40%": {
+      transform: "perspective(400px) rotate3d(1, 0, 0, -10deg)",
+      opacity: 1
+    },
+    "100%": {
+      transform: "perspective(400px) rotate3d(1, 0, 0, 0deg)",
+      opacity: 1
+    }
+  },
+  /**
+   * 翻转离开
+   */
+  flipOut: {
+    from: {
+      transform: "perspective(400px) rotate3d(1, 0, 0, 0deg)",
+      opacity: 1
+    },
+    "30%": {
+      transform: "perspective(400px) rotate3d(1, 0, 0, 20deg)",
+      opacity: 1
+    },
+    "100%": {
+      transform: "perspective(400px) rotate3d(1, 0, 0, -90deg)",
+      opacity: 0
+    }
+  }
+};
+var PerformanceOptimizer = class {
+  constructor(options = DEFAULT_GPU_OPTIONS) {
+    this.activeAnimations = /* @__PURE__ */ new Set();
+    this.rafId = null;
+    this.batchedUpdates = /* @__PURE__ */ new Map();
+    this.options = { ...DEFAULT_GPU_OPTIONS, ...options };
+    this.gpuEnabled = this.checkGPUAvailability();
+  }
+  checkGPUAvailability() {
+    if (typeof window === "undefined") return false;
+    try {
+      const canvas = document.createElement("canvas");
+      const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+      return !!gl;
+    } catch {
+      return false;
+    }
+  }
+  isGPUAvailable() {
+    return this.gpuEnabled;
+  }
+  shouldUseGPU(properties) {
+    if (!this.gpuEnabled) return false;
+    const gpuFriendly = ["transform", "opacity", "filter"];
+    return properties.every(
+      (prop) => gpuFriendly.some((gpuProp) => prop.toLowerCase().includes(gpuProp))
+    );
+  }
+  optimizeElement(element) {
+    if (this.shouldUseGPU(["transform", "opacity"])) {
+      enableGPUAcceleration(element, this.options);
+    }
+  }
+  batchAnimation(id, update) {
+    this.batchedUpdates.set(id, update);
+    if (this.rafId === null) {
+      this.rafId = requestAnimationFrame(() => {
+        this.flushBatchedUpdates();
+      });
+    }
+  }
+  flushBatchedUpdates() {
+    this.batchedUpdates.forEach((update) => update());
+    this.batchedUpdates.clear();
+    this.rafId = null;
+  }
+  trackAnimation(id) {
+    this.activeAnimations.add(id);
+  }
+  untrackAnimation(id) {
+    this.activeAnimations.delete(id);
+  }
+  getActiveAnimationCount() {
+    return this.activeAnimations.size;
+  }
+  cleanup() {
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    this.batchedUpdates.clear();
+    this.activeAnimations.clear();
+  }
+};
+var globalOptimizer = null;
+function getGlobalOptimizer() {
+  if (!globalOptimizer) {
+    globalOptimizer = new PerformanceOptimizer();
+  }
+  return globalOptimizer;
+}
+function resetGlobalOptimizer(options) {
+  if (globalOptimizer) {
+    globalOptimizer.cleanup();
+  }
+  globalOptimizer = new PerformanceOptimizer(options);
+}
+
+// src/index.ts
+var EASING_FUNCTIONS = {
+  linear: (t) => t,
+  ease: (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
+  "ease-in": (t) => t * t * t,
+  "ease-out": (t) => --t * t * t + 1,
+  "ease-in-out": (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
+  "ease-in-quad": (t) => t * t,
+  "ease-out-quad": (t) => t * (2 - t),
+  "ease-in-out-quad": (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
+  "ease-in-cubic": (t) => t * t * t,
+  "ease-out-cubic": (t) => --t * t * t + 1,
+  "ease-in-out-cubic": (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
+  "ease-in-quart": (t) => t * t * t * t,
+  "ease-out-quart": (t) => 1 - --t * t * t * t,
+  "ease-in-out-quart": (t) => t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t,
+  "ease-in-quint": (t) => t * t * t * t * t,
+  "ease-out-quint": (t) => 1 + --t * t * t * t * t,
+  "ease-in-out-quint": (t) => t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t,
+  "ease-in-sine": (t) => 1 - Math.cos(t * Math.PI / 2),
+  "ease-out-sine": (t) => Math.sin(t * Math.PI / 2),
+  "ease-in-out-sine": (t) => -(Math.cos(Math.PI * t) - 1) / 2,
+  "ease-in-expo": (t) => t === 0 ? 0 : Math.pow(2, 10 * (t - 1)),
+  "ease-out-expo": (t) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t),
+  "ease-in-out-expo": (t) => t === 0 ? 0 : t === 1 ? 1 : t < 0.5 ? Math.pow(2, 20 * t - 10) / 2 : (2 - Math.pow(2, -20 * t + 10)) / 2,
+  "ease-in-circ": (t) => 1 - Math.sqrt(1 - t * t),
+  "ease-out-circ": (t) => Math.sqrt(1 - --t * t),
+  "ease-in-out-circ": (t) => t < 0.5 ? (1 - Math.sqrt(1 - 4 * t * t)) / 2 : (Math.sqrt(1 - (2 * t - 2) * (2 * t - 2)) + 1) / 2,
+  "ease-in-back": (t) => {
+    const c1 = 1.70158;
+    const c3 = c1 + 1;
+    return c3 * t * t * t - c1 * t * t;
+  },
+  "ease-out-back": (t) => {
+    const c1 = 1.70158;
+    const c3 = c1 + 1;
+    return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+  },
+  "ease-in-out-back": (t) => {
+    const c1 = 1.70158;
+    const c2 = c1 * 1.525;
+    return t < 0.5 ? Math.pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2) / 2 : (Math.pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2;
+  },
+  spring: (t) => {
+    const c4 = 2 * Math.PI / 3;
+    return t === 0 ? 0 : t === 1 ? 1 : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
+  }
+};
+var idCounter = 0;
+function generateId() {
+  return `lyt-animation-${++idCounter}`;
+}
+function getEasingFunction(easing) {
+  if (typeof easing === "function") {
+    return easing;
+  }
+  return EASING_FUNCTIONS[easing] || EASING_FUNCTIONS.ease;
+}
+function createAnimation(animateFn, options = {}) {
+  const {
+    duration = 300,
+    easing = "ease",
+    delay = 0,
+    iterations = 1,
+    direction = "normal",
+    fill = "none",
+    onStart,
+    onUpdate,
+    onComplete,
+    onPause,
+    onCancel
+  } = options;
+  const id = generateId();
+  const easingFn = getEasingFunction(easing);
+  let state = "idle";
+  let progress = 0;
+  let startTime = 0;
+  let pausedTime = 0;
+  let animationFrameId = null;
+  let currentIteration = 0;
+  let isReversed = direction === "reverse" || direction === "alternate-reverse";
+  const progressSignal = signal(0);
+  function animate(timestamp) {
+    if (state !== "playing") return;
+    if (!startTime) {
+      startTime = timestamp;
+    }
+    const elapsed = timestamp - startTime - delay;
+    if (elapsed >= 0) {
+      const rawProgress = Math.min(elapsed / duration, 1);
+      let adjustedProgress = rawProgress;
+      if (isReversed) {
+        adjustedProgress = 1 - rawProgress;
+      }
+      if (direction === "alternate" || direction === "alternate-reverse") {
+        const cycleProgress = rawProgress * iterations;
+        const currentCycle = Math.floor(cycleProgress);
+        const cycleProgressRemainder = cycleProgress - currentCycle;
+        adjustedProgress = currentCycle % 2 === 0 ? cycleProgressRemainder : 1 - cycleProgressRemainder;
+      }
+      progress = adjustedProgress;
+      progressSignal.set(adjustedProgress);
+      const easedProgress = easingFn(adjustedProgress);
+      animateFn(easedProgress);
+      if (onUpdate) {
+        onUpdate(easedProgress);
+      }
+      if (rawProgress >= 1) {
+        currentIteration++;
+        if (iterations === -1 || currentIteration < iterations) {
+          startTime = timestamp - (elapsed - duration);
+          animationFrameId = requestAnimationFrame(animate);
+          return;
+        } else {
+          state = "completed";
+          if (onComplete) {
+            onComplete();
+          }
+        }
+      } else {
+        animationFrameId = requestAnimationFrame(animate);
+      }
+    } else {
+      animationFrameId = requestAnimationFrame(animate);
+    }
+  }
+  function play() {
+    if (state === "completed" || state === "cancelled") {
+      reset();
+    }
+    state = "playing";
+    if (onStart) {
+      onStart();
+    }
+    animationFrameId = requestAnimationFrame(animate);
+  }
+  function pause() {
+    if (state !== "playing") return;
+    state = "paused";
+    pausedTime = performance.now();
+    if (animationFrameId) {
+      cancelAnimationFrame(animationFrameId);
+      animationFrameId = null;
+    }
+    if (onPause) {
+      onPause();
+    }
+  }
+  function cancel() {
+    if (animationFrameId) {
+      cancelAnimationFrame(animationFrameId);
+      animationFrameId = null;
+    }
+    state = "cancelled";
+    if (onCancel) {
+      onCancel();
+    }
+  }
+  function reset() {
+    if (animationFrameId) {
+      cancelAnimationFrame(animationFrameId);
+      animationFrameId = null;
+    }
+    state = "idle";
+    progress = 0;
+    currentIteration = 0;
+    progressSignal.set(0);
+    startTime = 0;
+    pausedTime = 0;
+    isReversed = direction === "reverse" || direction === "alternate-reverse";
+  }
+  function seek(newProgress) {
+    progress = Math.max(0, Math.min(1, newProgress));
+    progressSignal.set(progress);
+    const easedProgress = easingFn(progress);
+    animateFn(easedProgress);
+    if (onUpdate) {
+      onUpdate(easedProgress);
+    }
+  }
+  function reverse() {
+    isReversed = !isReversed;
+  }
+  return {
+    id,
+    get state() {
+      return state;
+    },
+    get progress() {
+      return progressSignal();
+    },
+    play,
+    pause,
+    cancel,
+    reset,
+    seek,
+    reverse
+  };
+}
+function transitionElement(element, toggle, options = {}) {
+  const {
+    property = "all",
+    duration = 300,
+    easing = "ease",
+    delay = 0,
+    onBeforeEnter,
+    onEnter,
+    onAfterEnter,
+    onBeforeLeave,
+    onLeave,
+    onAfterLeave
+  } = options;
+  const propertyStr = Array.isArray(property) ? property.join(", ") : property;
+  const easingFn = getEasingFunction(easing);
+  if (toggle) {
+    if (onBeforeEnter) {
+      onBeforeEnter();
+    }
+    element.style.transition = `${propertyStr} ${duration}ms ${typeof easing === "string" ? easing : "ease"} ${delay}ms`;
+    requestAnimationFrame(() => {
+      if (onEnter) {
+        onEnter();
+      }
+      setTimeout(() => {
+        if (onAfterEnter) {
+          onAfterEnter();
+        }
+      }, duration + delay);
+    });
+  } else {
+    if (onBeforeLeave) {
+      onBeforeLeave();
+    }
+    element.style.transition = `${propertyStr} ${duration}ms ${typeof easing === "string" ? easing : "ease"} ${delay}ms`;
+    requestAnimationFrame(() => {
+      if (onLeave) {
+        onLeave();
+      }
+      setTimeout(() => {
+        if (onAfterLeave) {
+          onAfterLeave();
+        }
+      }, duration + delay);
+    });
+  }
+}
+function createKeyframeAnimation(element, keyframes, options = {}) {
+  const {
+    duration = 300,
+    easing = "ease",
+    delay = 0,
+    iterations = 1,
+    direction = "normal",
+    fill = "forwards",
+    onStart,
+    onUpdate,
+    onComplete,
+    onPause,
+    onCancel
+  } = options;
+  if (typeof element.animate === "function") {
+    let webAnimation = null;
+    let updateInterval = null;
+    const id = generateId();
+    let isPlaying = false;
+    const progressSignal = signal(0);
+    const play = () => {
+      if (!webAnimation) {
+        webAnimation = element.animate(keyframes, {
+          duration,
+          easing: typeof easing === "string" ? easing : "ease",
+          delay,
+          iterations: iterations === -1 ? Infinity : iterations,
+          direction,
+          fill
+        });
+        webAnimation.onfinish = () => {
+          if (onComplete) {
+            onComplete();
+          }
+        };
+        webAnimation.oncancel = () => {
+          if (onCancel) {
+            onCancel();
+          }
+        };
+        if (onUpdate) {
+          updateInterval = window.setInterval(() => {
+            if (webAnimation && webAnimation.currentTime !== null && webAnimation.currentTime !== void 0) {
+              const progress = webAnimation.currentTime / duration;
+              progressSignal.set(progress);
+              onUpdate(progress);
+            }
+          }, 16);
+        }
+      } else {
+        webAnimation.play();
+      }
+      isPlaying = true;
+      if (onStart) {
+        onStart();
+      }
+    };
+    const pause = () => {
+      if (webAnimation) {
+        webAnimation.pause();
+        isPlaying = false;
+        if (onPause) {
+          onPause();
+        }
+        if (updateInterval) {
+          clearInterval(updateInterval);
+          updateInterval = null;
+        }
+      }
+    };
+    const cancel = () => {
+      if (webAnimation) {
+        webAnimation.cancel();
+        webAnimation = null;
+        if (updateInterval) {
+          clearInterval(updateInterval);
+          updateInterval = null;
+        }
+      }
+    };
+    const reset = () => {
+      if (webAnimation) {
+        webAnimation.cancel();
+        webAnimation = null;
+        progressSignal.set(0);
+        if (updateInterval) {
+          clearInterval(updateInterval);
+          updateInterval = null;
+        }
+      }
+    };
+    const seek = (progress) => {
+      if (webAnimation) {
+        webAnimation.currentTime = progress * duration;
+        progressSignal.set(progress);
+      }
+    };
+    const reverse = () => {
+      if (webAnimation) {
+        webAnimation.reverse();
+      }
+    };
+    return {
+      id,
+      get state() {
+        return isPlaying ? "playing" : webAnimation ? "paused" : "idle";
+      },
+      get progress() {
+        return progressSignal();
+      },
+      play,
+      pause,
+      cancel,
+      reset,
+      seek,
+      reverse
+    };
+  }
+  return createAnimation(() => {
+  }, options);
+}
+var PRESETS = {
+  /** 淡入 */
+  fadeIn: {
+    from: { opacity: 0 },
+    to: { opacity: 1 }
+  },
+  /** 淡出 */
+  fadeOut: {
+    from: { opacity: 1 },
+    to: { opacity: 0 }
+  },
+  /** 滑入（上方） */
+  slideInUp: {
+    from: { transform: "translateY(100%)", opacity: 0 },
+    to: { transform: "translateY(0)", opacity: 1 }
+  },
+  /** 滑入（下方） */
+  slideInDown: {
+    from: { transform: "translateY(-100%)", opacity: 0 },
+    to: { transform: "translateY(0)", opacity: 1 }
+  },
+  /** 滑入（左侧） */
+  slideInLeft: {
+    from: { transform: "translateX(-100%)", opacity: 0 },
+    to: { transform: "translateX(0)", opacity: 1 }
+  },
+  /** 滑入（右侧） */
+  slideInRight: {
+    from: { transform: "translateX(100%)", opacity: 0 },
+    to: { transform: "translateX(0)", opacity: 1 }
+  },
+  /** 缩放进入 */
+  zoomIn: {
+    from: { transform: "scale(0)", opacity: 0 },
+    to: { transform: "scale(1)", opacity: 1 }
+  },
+  /** 缩放离开 */
+  zoomOut: {
+    from: { transform: "scale(1)", opacity: 1 },
+    to: { transform: "scale(0)", opacity: 0 }
+  },
+  /** 弹跳进入 */
+  bounceIn: {
+    from: { transform: "scale(0.3)", opacity: 0 },
+    "40%": { transform: "scale(1.1)" },
+    "70%": { transform: "scale(0.9)" },
+    to: { transform: "scale(1)", opacity: 1 }
+  },
+  /** 摇摆进入 */
+  shake: {
+    "10%, 90%": { transform: "translate3d(-1px, 0, 0)" },
+    "20%, 80%": { transform: "translate3d(2px, 0, 0)" },
+    "30%, 50%, 70%": { transform: "translate3d(-4px, 0, 0)" },
+    "40%, 60%": { transform: "translate3d(4px, 0, 0)" }
+  }
+};
+function createAnimationManager(options = {}) {
+  const {
+    defaultDuration = 300,
+    defaultEasing = "ease",
+    autoCleanup = true
+  } = options;
+  const animations = /* @__PURE__ */ new Map();
+  function animate(animateFn, opts) {
+    const animation = createAnimation(animateFn, {
+      duration: defaultDuration,
+      easing: defaultEasing,
+      ...opts
+    });
+    animations.set(animation.id, animation);
+    return animation;
+  }
+  function applyPreset(element, presetName, opts) {
+    const preset = PRESETS[presetName];
+    if (!preset) {
+      throw new Error(`Preset "${presetName}" not found`);
+    }
+    const keyframes = [];
+    for (const key in preset) {
+      const keyframe = preset[key];
+      let offset;
+      if (key === "from") offset = 0;
+      else if (key === "to") offset = 1;
+      else {
+        const match = key.match(/^(\d+)%$/);
+        if (match) offset = parseInt(match[1], 10) / 100;
+        else continue;
+      }
+      keyframes.push({
+        offset,
+        ...keyframe
+      });
+    }
+    const animation = createKeyframeAnimation(element, keyframes, {
+      duration: defaultDuration,
+      easing: defaultEasing,
+      ...opts
+    });
+    animations.set(animation.id, animation);
+    return animation;
+  }
+  function remove(id) {
+    const animation = animations.get(id);
+    if (animation) {
+      animation.cancel();
+      animations.delete(id);
+    }
+  }
+  function clear() {
+    for (const [id, animation] of animations) {
+      animation.cancel();
+    }
+    animations.clear();
+  }
+  return {
+    animate,
+    applyPreset,
+    transitionElement,
+    remove,
+    clear
+  };
+}
+var pluginAnimation = definePlugin({
+  name: "animation",
+  version: "6.0.0",
+  description: "LytJS official animation plugin with CSS transitions and animations",
+  author: "LytJS Team",
+  keywords: ["lytjs", "animation", "transition", "css-animation"],
+  schema: {
+    type: "object",
+    object: {
+      properties: {
+        defaultDuration: { type: "number", default: 300 },
+        defaultEasing: { type: "string", default: "ease" },
+        autoCleanup: { type: "boolean", default: true }
+      }
+    }
+  },
+  install(app, options) {
+    const animationManager = createAnimationManager(options);
+    app.config.globalProperties.$animation = animationManager;
+    app.provide("lyt-animation", animationManager);
+  }
+});
+var index_default = pluginAnimation;
+export {
+  GPU_PRESETS,
+  PRESETS,
+  PerformanceOptimizer,
+  canUseGPU,
+  createAnimation,
+  createKeyframeAnimation,
+  index_default as default,
+  disableGPUAcceleration,
+  enableGPUAcceleration,
+  getGlobalOptimizer,
+  resetGlobalOptimizer,
+  to3DTransform,
+  transitionElement
+};