@twick/visualizer 0.0.1 → 0.14.2

package/src/animations/succession.tsx

@@ -0,0 +1,77 @@
+import { all, delay, Vector2, waitFor } from "@twick/core";
+import { AnimationParams } from "../helpers/types";
+
+/**
+ * SuccessionAnimation combines scaling and opacity transitions
+ * to create an appearing and disappearing zoom effect.
+ *
+ * Available animation modes:
+ * - "enter": Starts scaled down and transparent, then scales up while fading in.
+ * - "exit": Waits, then scales down while fading out.
+ * - "both": Scales up and fades in, waits, then scales down and fades out.
+ *
+ * @param elementRef - Reference to the main element to animate.
+ * @param containerRef - Optional reference to a container element.
+ * @param interval - Duration of scaling and opacity transitions.
+ * @param duration - Total duration of the animation.
+ * @param animate - Animation phase ("enter" | "exit" | "both").
+ */
+export const SuccessionAnimation = {
+  name: "succession",
+
+  /**
+   * Generator function controlling the succession animation.
+   */
+  *run({
+    elementRef,
+    containerRef,
+    interval,
+    duration,
+    animate,
+  }: AnimationParams) {
+    // Use containerRef if provided, otherwise fallback to elementRef
+    const ref = containerRef ?? elementRef;
+
+    // Capture the element's original scale
+    const scale = ref().scale();
+
+    let animationInterval = Math.min(interval, duration);
+    if (animate === "enter") {
+      // Start fully transparent and scaled down to 50%
+      ref().opacity(0);
+      ref().scale(new Vector2(scale.x / 2, scale.y / 2));
+      // Animate scaling up to original size and fading in
+      yield* all(
+        ref().scale(scale, animationInterval),
+        ref().opacity(1, animationInterval / 2)
+      );
+
+    } else if (animate === "exit") {
+      // Wait until exit animation should start
+      yield* waitFor(duration - animationInterval);
+      // Animate scaling down to 50% and fading out (opacity starts after half the interval)
+      yield* all(
+        ref().scale(new Vector2(scale.x / 2, scale.y / 2), animationInterval),
+        delay(animationInterval / 2, ref().opacity(0, animationInterval / 2))
+      );
+
+    } else if (animate === "both") {
+      animationInterval = Math.min(interval, duration/2);
+      // Start fully transparent and scaled down to 50%
+      ref().opacity(0);
+      ref().scale(new Vector2(scale.x / 2, scale.y / 2));
+      // Animate scaling up and fading in
+      yield* all(
+        ref().scale(scale, animationInterval),
+        ref().opacity(1, animationInterval / 2)
+      );
+      // Wait for the remaining duration
+      yield* waitFor(duration - animationInterval);
+      // Animate scaling down and fading out
+      yield* all(
+        ref().scale(new Vector2(scale.x / 2, scale.y / 2), animationInterval),
+        delay(animationInterval / 2, ref().opacity(0, animationInterval / 2))
+      );
+    }
+  },
+};

package/src/components/frame-effects.tsx

@@ -1,190 +1,188 @@
-/**
- * Frame effects component that handles the application of various visual effects
- * to frames and elements in the scene.
- */
-
-import { all, Reference, waitFor } from "@revideo/core";
-import { getTimingFunction } from "../helpers/timing.utils";
-import { fitElement } from "../helpers/element.utils";
-import { DEFAULT_POSITION, DEFAULT_TIMING_FUNCTION, FRAME_SHAPE } from "../helpers/constants";
-import { FrameEffect } from "../helpers/types";
-import { View2D } from "@revideo/2d";
-import { createSignal } from "@revideo/core";
-import { logger } from "../helpers/log.utils";
-
-/**
- * Applies frame effects to a view or element
- * @param {Object} params - Parameters for applying frame effects
- * @param {View2D} params.view - The 2D view to apply effects to
- * @param {FrameEffect[]} params.effects - Array of effects to apply
- * @returns {void}
- */
-export function applyFrameEffects({ view, effects }: { view: View2D; effects: FrameEffect[] }) {
-  // ... existing code ...
-}
-
-export function* addFrameEffect({
-  containerRef,
-  elementRef,
-  frameElement,
-}: {
-  containerRef: Reference<any>;
-  elementRef: Reference<any>;
-  frameElement: any;
-}) {
-  let frameEffects = [];
-  const initProps = {
-    frame: {
-      size: containerRef().size(),
-      pos: containerRef().position(),
-      radius: containerRef().radius(),
-      scale: containerRef().scale(),
-      rotation: containerRef().rotation(),
-    },
-    element: {
-      size: containerRef().size(),
-      pos: elementRef().position(),
-      scale: elementRef().scale(),
-    },
-  };
-
-  for (let i = 0; i < frameElement?.frameEffects?.length; i++) {
-    const frameEffect = frameElement.frameEffects[i];
-    const restore =
-      i === frameElement.frameEffects.length - 1 ||
-      frameElement.frameEffects[i + 1].s !== frameEffect.e;
-    frameEffects.push(
-      getFrameEffect({
-        containerRef,
-        elementRef,
-        frameEffect,
-        element: frameElement,
-        restore,
-        initProps,
-      })
-    );
-  }
-  yield* all(...frameEffects);
-}
-
-function* getFrameEffect({
-  containerRef,
-  elementRef,
-  frameEffect,
-  element,
-  initProps,
-  restore = true,
-}: {
-  containerRef: Reference<any>;
-  elementRef: Reference<any>;
-  frameEffect: FrameEffect;
-  element: any;
-  initProps: any;
-  restore?: boolean;
-}) {
-  yield* waitFor(frameEffect.s);
-  const props = frameEffect.props;
-  const sequence = [];
-
-  if (restore) {
-    sequence.push(
-      restoreState({
-        containerRef,
-        elementRef,
-        frameEffect,
-        element,
-        initProps,
-      })
-    );
-  }
-
-  sequence.push(
-    containerRef().size(
-      props.frameSize,
-      props.transitionDuration,
-      getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
-    )
-  );
-
-  sequence.push(
-    containerRef().position(
-      props.framePosition ?? { x: 0, y: 0 },
-      props.transitionDuration,
-      getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
-    )
-  );
-
-  sequence.push(
-    elementRef().position(
-      props.elementPosition ?? DEFAULT_POSITION,
-      props.transitionDuration,
-      getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
-    )
-  );
-
-  switch (props.frameShape) {
-    case FRAME_SHAPE.CIRCLE:
-      sequence.push(
-        containerRef().radius(
-          props.frameSize[0] / 2,
-          props.transitionDuration,
-          getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
-        )
-      );
-      break;
-    default:
-      sequence.push(
-        containerRef().radius(
-          props.radius ?? 0,
-          props.transitionDuration,
-          getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
-        )
-      );
-  }
-
-  if (props.objectFit) {
-    sequence.push(
-      fitElement({
-        elementRef,
-        containerSize: { x: props.frameSize[0], y: props.frameSize[1] },
-        elementSize: initProps.element.size,
-        objectFit: props.objectFit,
-      })
-    );
-  }
-  yield* all(...sequence);
-}
-
-function* restoreState({
-  containerRef,
-  elementRef,
-  frameEffect,
-  element,
-  initProps,
-}: {
-  containerRef: Reference<any>;
-  elementRef: Reference<any>;
-  frameEffect: any;
-  element: any;
-  initProps: any;
-}) {
-  yield* waitFor(frameEffect.e - frameEffect.s);
-  let sequence = [];
-  sequence.push(containerRef().size(initProps.frame.size));
-  sequence.push(containerRef().position(initProps.frame.pos));
-  sequence.push(containerRef().scale(initProps.frame.scale));
-  sequence.push(containerRef().rotation(initProps.frame.rotation));
-  sequence.push(containerRef().radius(initProps.frame.radius));
-  sequence.push(elementRef().size(initProps.element.size));
-  sequence.push(elementRef().position(initProps.element.pos));
-  sequence.push(elementRef().scale(initProps.element.scale));
-  sequence.push(
-    fitElement({
-      elementRef,
-      containerSize: initProps.frame.size,
-      elementSize: initProps.element.size,
-      objectFit: element.objectFit ?? "none",
-    })
-  );
-  yield* all(...sequence);
-}
+/**
+ * Frame effects component that handles the application of various visual effects
+ * to frames and elements in the scene.
+ */
+
+import { all, Reference, waitFor } from "@twick/core";
+import { getTimingFunction } from "../helpers/timing.utils";
+import { fitElement } from "../helpers/element.utils";
+import { DEFAULT_POSITION, DEFAULT_TIMING_FUNCTION, FRAME_SHAPE } from "../helpers/constants";
+import { FrameEffect } from "../helpers/types";
+import { View2D } from "@twick/2d";
+
+/**
+ * Applies frame effects to a view or element
+ * @param {Object} params - Parameters for applying frame effects
+ * @param {View2D} params.view - The 2D view to apply effects to
+ * @param {FrameEffect[]} params.effects - Array of effects to apply
+ * @returns {void}
+ */
+export function applyFrameEffects({ view, effects }: { view: View2D; effects: FrameEffect[] }) {
+  // ... existing code ...
+}
+
+export function* addFrameEffect({
+  containerRef,
+  elementRef,
+  frameElement,
+}: {
+  containerRef: Reference<any>;
+  elementRef: Reference<any>;
+  frameElement: any;
+}) {
+  let frameEffects = [];
+  const initProps = {
+    frame: {
+      size: containerRef().size(),
+      pos: containerRef().position(),
+      radius: containerRef().radius(),
+      scale: containerRef().scale(),
+      rotation: containerRef().rotation(),
+    },
+    element: {
+      size: containerRef().size(),
+      pos: elementRef().position(),
+      scale: elementRef().scale(),
+    },
+  };
+
+  for (let i = 0; i < frameElement?.frameEffects?.length; i++) {
+    const frameEffect = frameElement.frameEffects[i];
+    const restore =
+      i === frameElement.frameEffects.length - 1 ||
+      frameElement.frameEffects[i + 1].s !== frameEffect.e;
+    frameEffects.push(
+      getFrameEffect({
+        containerRef,
+        elementRef,
+        frameEffect,
+        element: frameElement,
+        restore,
+        initProps,
+      })
+    );
+  }
+  yield* all(...frameEffects);
+}
+
+function* getFrameEffect({
+  containerRef,
+  elementRef,
+  frameEffect,
+  element,
+  initProps,
+  restore = true,
+}: {
+  containerRef: Reference<any>;
+  elementRef: Reference<any>;
+  frameEffect: FrameEffect;
+  element: any;
+  initProps: any;
+  restore?: boolean;
+}) {
+  yield* waitFor(frameEffect.s);
+  const props = frameEffect.props;
+  const sequence = [];
+
+  if (restore) {
+    sequence.push(
+      restoreState({
+        containerRef,
+        elementRef,
+        frameEffect,
+        element,
+        initProps,
+      })
+    );
+  }
+
+  sequence.push(
+    containerRef().size(
+      props.frameSize,
+      props.transitionDuration,
+      getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
+    )
+  );
+
+  sequence.push(
+    containerRef().position(
+      props.framePosition ?? { x: 0, y: 0 },
+      props.transitionDuration,
+      getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
+    )
+  );
+
+  sequence.push(
+    elementRef().position(
+      props.elementPosition ?? DEFAULT_POSITION,
+      props.transitionDuration,
+      getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
+    )
+  );
+
+  switch (props.frameShape) {
+    case FRAME_SHAPE.CIRCLE:
+      sequence.push(
+        containerRef().radius(
+          props.frameSize[0] / 2,
+          props.transitionDuration,
+          getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
+        )
+      );
+      break;
+    default:
+      sequence.push(
+        containerRef().radius(
+          props.radius ?? 0,
+          props.transitionDuration,
+          getTimingFunction(props.transitionEasing ?? DEFAULT_TIMING_FUNCTION)
+        )
+      );
+  }
+
+  if (props.objectFit) {
+    sequence.push(
+      fitElement({
+        elementRef,
+        containerSize: { x: props.frameSize[0], y: props.frameSize[1] },
+        elementSize: initProps.element.size,
+        objectFit: props.objectFit,
+      })
+    );
+  }
+  yield* all(...sequence);
+}
+
+function* restoreState({
+  containerRef,
+  elementRef,
+  frameEffect,
+  element,
+  initProps,
+}: {
+  containerRef: Reference<any>;
+  elementRef: Reference<any>;
+  frameEffect: any;
+  element: any;
+  initProps: any;
+}) {
+  yield* waitFor(frameEffect.e - frameEffect.s);
+  let sequence = [];
+  sequence.push(containerRef().size(initProps.frame.size));
+  sequence.push(containerRef().position(initProps.frame.pos));
+  sequence.push(containerRef().scale(initProps.frame.scale));
+  sequence.push(containerRef().rotation(initProps.frame.rotation));
+  sequence.push(containerRef().radius(initProps.frame.radius));
+  sequence.push(elementRef().size(initProps.element.size));
+  sequence.push(elementRef().position(initProps.element.pos));
+  sequence.push(elementRef().scale(initProps.element.scale));
+  sequence.push(
+    fitElement({
+      elementRef,
+      containerSize: initProps.frame.size,
+      elementSize: initProps.element.size,
+      objectFit: element.objectFit ?? "none",
+    })
+  );
+  yield* all(...sequence);
+}