Function zoomOutTransition

packages/core/src/transitions/zoomOutTransition.ts:16–53

(
  area: BBox,
  duration = 0.6,
)

 * @param duration - The duration of the transition.
 */
export function* zoomOutTransition(
  area: BBox,
  duration = 0.6,
): ThreadGenerator {
  const scale = useScene().getSize().div(area.size);

  const currentPosition = Vector2.createSignal(
    area.position.flipped.mul(scale),
  );
  const currentScale = Vector2.createSignal(scale);
  const previousPosition = Vector2.createSignal(0);
  const previousScale = Vector2.createSignal(1);
  const alpha = createSignal(0);

  const endTransition = useTransition(
    ctx => {
      ctx.globalAlpha = clampRemap(0.1, 0.5, 0, 1, alpha());
      ctx.translate(currentPosition.x(), currentPosition.y());
      ctx.scale(currentScale.x(), currentScale.y());
    },
    ctx => {
      ctx.globalAlpha = clampRemap(0.5, 0.9, 1, 0, alpha());
      ctx.translate(previousPosition.x(), previousPosition.y());
      ctx.scale(previousScale.x(), previousScale.y());
    },
  );

  const timing = (v: number) => easeInOutCubic(Math.sqrt(v));
  yield* all(
    currentPosition(Vector2.zero, duration, timing),
    previousPosition(area.position, duration, timing),
    currentScale(1, duration, timing),
    previousScale(Vector2.one.div(scale), duration, timing),
    alpha(1, duration, linear),
  );

  endTransition();
}