← circus

Camara Zoom Keystates

Creating complex zoom animations

Python Code


from svan2d.component.state.circle import CircleState
from svan2d.component.state.square import SquareState
from svan2d.converter.converter_type import ConverterType
from svan2d.core.color import Color
from svan2d.core.logger import configure_logging
from svan2d.core.point2d import Point2D
from svan2d.transition import easing, lerp
from svan2d.velement import VElement
from svan2d.vscene import VScene, CameraState
from svan2d.vscene.vscene_exporter import VSceneExporter

configure_logging(level="INFO")

OUTER_COLOR = Color("#FDBE02")
CENTER_COLOR = Color("#AA0000")


def main():
    scene = (
        VScene(width=600, height=600, background=Color("#000017"))
        .camera_keystate(CameraState(scale=6.0), at=0.0)  # Start zoomed in
        .camera_transition(easing_dict={"scale": easing.out_quad})
        .camera_keystate(CameraState(scale=1.0), at=0.4)  # Zoom out
        .camera_keystate(CameraState(scale=1.0), at=0.6)  # Hold
        .camera_transition(  # Zoom back
            easing_dict={
                "scale": easing.in_out,
                "pos": easing.in_out,
            }
        )
        .camera_keystate(
            CameraState(scale=2.5, pos=Point2D(80, 80)),
            at=0.9,
        )
        .camera_keystate(
            CameraState(scale=2.5, pos=Point2D(80, 80)),
            at=1.0,
        )
    )

    # Create circles in a grid pattern
    elements = []
    for i in range(-2, 3):
        for j in range(-2, 3):
            dist = (i**2 + j**2) ** 0.5
            t = dist / (2 * 2**0.5)
            s1 = CircleState(
                radius=30,
                pos=Point2D(i * 80, j * 80),
                fill_color=CENTER_COLOR.interpolate(OUTER_COLOR, t),
            )

            s2 = SquareState(
                size=60,
                pos=Point2D(i * 80, j * 80),
                fill_color=CENTER_COLOR.interpolate(OUTER_COLOR, t),
            )

            elements.append(VElement().keystates([s1, s2]))

    # Multi-step zoom with camera_keystate()

    scene = scene.add_elements(elements)

    # Export
    exporter = VSceneExporter(
        scene=scene,
        converter=ConverterType.PLAYWRIGHT,
        output_dir="output/",
    )

    exporter.to_mp4(
        filename="camera_zoom_keystates",
        total_frames=120,
        framerate=30,
        png_width_px=1024,
    )


if __name__ == "__main__":
    main()