AnimationCurve

Animation curves.

Inherits: Enum

Properties

• BOUNCE_IN –

  Easing that enters with a bounce effect.

• BOUNCE_IN_OUT –

  Easing that bounces both at the beginning and the end.

• BOUNCE_OUT –

  Easing that exits with a bounce effect.

• DECELERATE –

  Starts quickly, then slows down toward the end.

• EASE –

  Standard symmetric ease-in/ease-out curve.

• EASE_IN –

  Starts slowly and accelerates.

• EASE_IN_BACK –

  Ease-in curve with a slight initial backward overshoot.

• EASE_IN_CIRC –

  Circular ease-in curve.

• EASE_IN_CUBIC –

  Cubic ease-in curve.

• EASE_IN_EXPO –

  Exponential ease-in curve.

• EASE_IN_OUT –

  Symmetric ease-in/ease-out curve.

• EASE_IN_OUT_BACK –

  Ease-in/ease-out curve with overshoot near both ends.

• EASE_IN_OUT_CIRC –

  Circular ease-in/ease-out curve.

• EASE_IN_OUT_CUBIC –

  Cubic ease-in/ease-out curve.

• EASE_IN_OUT_CUBIC_EMPHASIZED –

  Material 3 emphasized cubic ease-in/ease-out curve.

• EASE_IN_OUT_EXPO –

  Exponential ease-in/ease-out curve.

• EASE_IN_OUT_QUAD –

  Quadratic ease-in/ease-out curve.

• EASE_IN_OUT_QUART –

  Quartic ease-in/ease-out curve.

• EASE_IN_OUT_QUINT –

  Quintic ease-in/ease-out curve.

• EASE_IN_OUT_SINE –

  Sinusoidal ease-in/ease-out curve.

• EASE_IN_QUAD –

  Quadratic ease-in curve.

• EASE_IN_QUART –

  Quartic ease-in curve.

• EASE_IN_QUINT –

  Quintic ease-in curve.

• EASE_IN_SINE –

  Sinusoidal ease-in curve.

• EASE_IN_TO_LINEAR –

  Transitions from ease-in motion into linear motion.

• EASE_OUT –

  Starts quickly and decelerates to the end.

• EASE_OUT_BACK –

  Ease-out curve with trailing overshoot.

• EASE_OUT_CIRC –

  Circular ease-out curve.

• EASE_OUT_CUBIC –

  Cubic ease-out curve.

• EASE_OUT_EXPO –

  Exponential ease-out curve.

• EASE_OUT_QUAD –

  Quadratic ease-out curve.

• EASE_OUT_QUART –

  Quartic ease-out curve.

• EASE_OUT_QUINT –

  Quintic ease-out curve.

• EASE_OUT_SINE –

  Sinusoidal ease-out curve.

• ELASTIC_IN –

  Elastic spring-like ease-in curve.

• ELASTIC_IN_OUT –

  Elastic spring-like ease-in/ease-out curve.

• ELASTIC_OUT –

  Elastic spring-like ease-out curve.

• FAST_LINEAR_TO_SLOW_EASE_IN –

  Starts linear and then eases into a slower end.

• FAST_OUT_SLOWIN –

  Material motion curve: quick start, gentle finish.

• LINEAR –

  Constant speed with no easing.

• LINEAR_TO_EASE_OUT –

  Starts linear and transitions to an ease-out tail.

• SLOW_MIDDLE –

  Slows in the middle section of the animation.

Examples

Showcase

import asyncio

import flet as ft


def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    duration_ms = 1200
    track_width = 248
    racer_size = 26
    lane_padding = 10
    lane_inner_width = track_width
    lane_width = lane_inner_width + lane_padding * 2
    travel_units = (lane_inner_width - racer_size) / racer_size
    card_animations: list = []

    def showcase_card(curve: ft.AnimationCurve) -> ft.Container:
        state = {"forward": False}
        progress = ft.Container(
            width=0,
            height=6,
            border_radius=3,
            bgcolor=ft.Colors.PRIMARY_CONTAINER,
            animate=ft.Animation(duration_ms, curve=curve),
        )
        racer = ft.Container(
            width=racer_size,
            height=racer_size,
            border_radius=13,
            bgcolor=ft.Colors.PRIMARY,
            shadow=ft.BoxShadow(
                blur_radius=12, spread_radius=1, color=ft.Colors.PRIMARY
            ),
            alignment=ft.Alignment.CENTER,
            content=ft.Icon(ft.Icons.BOLT, size=14, color=ft.Colors.ON_PRIMARY),
            offset=ft.Offset(0, 0),
            rotate=0,
            scale=1,
            animate_offset=ft.Animation(duration_ms, curve=curve),
            animate_rotation=ft.Animation(duration_ms, curve=curve),
            animate_scale=ft.Animation(duration_ms, curve=curve),
        )
        status = ft.Text("idle", size=11, color=ft.Colors.ON_SURFACE_VARIANT)

        def animate(forward: bool):
            state["forward"] = forward
            racer.offset = ft.Offset(travel_units if forward else 0, 0)
            racer.rotate = 1 if forward else 0
            racer.scale = 1.25 if forward else 1
            progress.width = track_width if forward else 0
            status.value = "forward" if forward else "reverse"
            racer.update()
            progress.update()
            status.update()

        def replay(e):
            animate(not state["forward"])

        card_animations.append(animate)

        return ft.Container(
            width=340,
            padding=12,
            border=ft.Border.all(1, ft.Colors.RED),
            border_radius=10,
            bgcolor=ft.Colors.SURFACE_CONTAINER_LOW,
            content=ft.Column(
                spacing=9,
                controls=[
                    ft.Text(curve.name, weight=ft.FontWeight.BOLD),
                    ft.Container(
                        width=track_width,
                        height=6,
                        border_radius=3,
                        bgcolor=ft.Colors.SURFACE_CONTAINER_HIGH,
                        content=progress,
                    ),
                    ft.Container(
                        width=lane_width,
                        height=48,
                        padding=lane_padding,
                        border=ft.Border.all(1, ft.Colors.OUTLINE),
                        border_radius=8,
                        clip_behavior=ft.ClipBehavior.HARD_EDGE,
                        bgcolor=ft.Colors.SURFACE,
                        content=ft.Stack(
                            controls=[
                                ft.Row(
                                    spacing=0,
                                    alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
                                    controls=[
                                        ft.Container(
                                            width=4,
                                            height=22,
                                            bgcolor=ft.Colors.OUTLINE,
                                        ),
                                        ft.Container(
                                            width=4,
                                            height=22,
                                            bgcolor=ft.Colors.OUTLINE,
                                        ),
                                    ],
                                ),
                                racer,
                            ],
                        ),
                    ),
                    ft.Row(
                        alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
                        controls=[
                            status,
                            ft.Button("Replay", icon=ft.Icons.REPLAY, on_click=replay),
                        ],
                    ),
                ],
            ),
        )

    def play_all(e):
        for animate in card_animations:
            animate(True)

    def reverse_all(e):
        for animate in card_animations:
            animate(False)

    async def wave_all():
        for animate in card_animations:
            animate(True)
            await asyncio.sleep(0.04)

    page.appbar = ft.AppBar(title="AnimationCurve Showcase")
    page.add(
        ft.Text(
            "Curve Lab: compare timing profiles across motion, progress, and spin."
        ),
        ft.Row(
            wrap=True,
            spacing=8,
            alignment=ft.MainAxisAlignment.CENTER,
            controls=[
                ft.Button("Play all", icon=ft.Icons.PLAY_ARROW, on_click=play_all),
                ft.Button("Reverse all", icon=ft.Icons.REPLAY, on_click=reverse_all),
                ft.Button("Wave", on_click=lambda e: page.run_task(wave_all)),
            ],
        ),
        ft.Row(
            wrap=True,
            spacing=12,
            expand=True,
            scroll=ft.ScrollMode.AUTO,
            alignment=ft.MainAxisAlignment.CENTER,
            controls=[showcase_card(curve) for curve in ft.AnimationCurve],
        ),
    )


ft.run(main)

Properties

BOUNCE_IN = 'bounceIn' class-attribute instance-attribute

Easing that enters with a bounce effect.

BOUNCE_IN_OUT = 'bounceInOut' class-attribute instance-attribute

Easing that bounces both at the beginning and the end.

BOUNCE_OUT = 'bounceOut' class-attribute instance-attribute

Easing that exits with a bounce effect.

DECELERATE = 'decelerate' class-attribute instance-attribute

Starts quickly, then slows down toward the end.

EASE = 'ease' class-attribute instance-attribute

Standard symmetric ease-in/ease-out curve.

EASE_IN = 'easeIn' class-attribute instance-attribute

Starts slowly and accelerates.

EASE_IN_BACK = 'easeInBack' class-attribute instance-attribute

Ease-in curve with a slight initial backward overshoot.

EASE_IN_CIRC = 'easeInCirc' class-attribute instance-attribute

Circular ease-in curve.

EASE_IN_CUBIC = 'easeInCubic' class-attribute instance-attribute

Cubic ease-in curve.

EASE_IN_EXPO = 'easeInExpo' class-attribute instance-attribute

Exponential ease-in curve.

EASE_IN_OUT = 'easeInOut' class-attribute instance-attribute

Symmetric ease-in/ease-out curve.

EASE_IN_OUT_BACK = 'easeInOutBack' class-attribute instance-attribute

Ease-in/ease-out curve with overshoot near both ends.

EASE_IN_OUT_CIRC = 'easeInOutCirc' class-attribute instance-attribute

Circular ease-in/ease-out curve.

EASE_IN_OUT_CUBIC = 'easeInOutCubic' class-attribute instance-attribute

Cubic ease-in/ease-out curve.

EASE_IN_OUT_CUBIC_EMPHASIZED = 'easeInOutCubicEmphasized' class-attribute instance-attribute

Material 3 emphasized cubic ease-in/ease-out curve.

EASE_IN_OUT_EXPO = 'easeInOutExpo' class-attribute instance-attribute

Exponential ease-in/ease-out curve.

EASE_IN_OUT_QUAD = 'easeInOutQuad' class-attribute instance-attribute

Quadratic ease-in/ease-out curve.

EASE_IN_OUT_QUART = 'easeInOutQuart' class-attribute instance-attribute

Quartic ease-in/ease-out curve.

EASE_IN_OUT_QUINT = 'easeInOutQuint' class-attribute instance-attribute

Quintic ease-in/ease-out curve.

EASE_IN_OUT_SINE = 'easeInOutSine' class-attribute instance-attribute

Sinusoidal ease-in/ease-out curve.

EASE_IN_QUAD = 'easeInQuad' class-attribute instance-attribute

Quadratic ease-in curve.

EASE_IN_QUART = 'easeInQuart' class-attribute instance-attribute

Quartic ease-in curve.

EASE_IN_QUINT = 'easeInQuint' class-attribute instance-attribute

Quintic ease-in curve.

EASE_IN_SINE = 'easeInSine' class-attribute instance-attribute

Sinusoidal ease-in curve.

EASE_IN_TO_LINEAR = 'easeInToLinear' class-attribute instance-attribute

Transitions from ease-in motion into linear motion.

EASE_OUT = 'easeOut' class-attribute instance-attribute

Starts quickly and decelerates to the end.

EASE_OUT_BACK = 'easeOutBack' class-attribute instance-attribute

Ease-out curve with trailing overshoot.

EASE_OUT_CIRC = 'easeOutCirc' class-attribute instance-attribute

Circular ease-out curve.

EASE_OUT_CUBIC = 'easeOutCubic' class-attribute instance-attribute

Cubic ease-out curve.

EASE_OUT_EXPO = 'easeOutExpo' class-attribute instance-attribute

Exponential ease-out curve.

EASE_OUT_QUAD = 'easeOutQuad' class-attribute instance-attribute

Quadratic ease-out curve.

EASE_OUT_QUART = 'easeOutQuart' class-attribute instance-attribute

Quartic ease-out curve.

EASE_OUT_QUINT = 'easeOutQuint' class-attribute instance-attribute

Quintic ease-out curve.

EASE_OUT_SINE = 'easeOutSine' class-attribute instance-attribute

Sinusoidal ease-out curve.

ELASTIC_IN = 'elasticIn' class-attribute instance-attribute

Elastic spring-like ease-in curve.

ELASTIC_IN_OUT = 'elasticInOut' class-attribute instance-attribute

Elastic spring-like ease-in/ease-out curve.

ELASTIC_OUT = 'elasticOut' class-attribute instance-attribute

Elastic spring-like ease-out curve.

FAST_LINEAR_TO_SLOW_EASE_IN = 'fastLinearToSlowEaseIn' class-attribute instance-attribute

Starts linear and then eases into a slower end.

FAST_OUT_SLOWIN = 'fastOutSlowIn' class-attribute instance-attribute

Material motion curve: quick start, gentle finish.

LINEAR = 'linear' class-attribute instance-attribute

Constant speed with no easing.

LINEAR_TO_EASE_OUT = 'linearToEaseOut' class-attribute instance-attribute

Starts linear and transitions to an ease-out tail.

SLOW_MIDDLE = 'slowMiddle' class-attribute instance-attribute

Slows in the middle section of the animation.