AnimationCurve

Animation curves.

Inherits: enum.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.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.SafeArea(
            content=ft.Column(
                controls=[
                    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],
                    ),
                ]
            )
        )
    )


if __name__ == "__main__":
    ft.run(main)

Properties

buildBOUNCE_INclass-attributeinstance-attribute

Easing that enters with a bounce effect.

buildBOUNCE_IN_OUTclass-attributeinstance-attribute

Easing that bounces both at the beginning and the end.

buildBOUNCE_OUTclass-attributeinstance-attribute

Easing that exits with a bounce effect.

buildDECELERATEclass-attributeinstance-attribute

Starts quickly, then slows down toward the end.

buildEASEclass-attributeinstance-attribute

Standard symmetric ease-in/ease-out curve.

buildEASE_INclass-attributeinstance-attribute

Starts slowly and accelerates.

buildEASE_IN_BACKclass-attributeinstance-attribute

Ease-in curve with a slight initial backward overshoot.

buildEASE_IN_CIRCclass-attributeinstance-attribute

Circular ease-in curve.

buildEASE_IN_CUBICclass-attributeinstance-attribute

Cubic ease-in curve.

buildEASE_IN_EXPOclass-attributeinstance-attribute

Exponential ease-in curve.

buildEASE_IN_OUTclass-attributeinstance-attribute

Symmetric ease-in/ease-out curve.

buildEASE_IN_OUT_BACKclass-attributeinstance-attribute

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

buildEASE_IN_OUT_CIRCclass-attributeinstance-attribute

Circular ease-in/ease-out curve.

buildEASE_IN_OUT_CUBICclass-attributeinstance-attribute

Cubic ease-in/ease-out curve.

buildEASE_IN_OUT_CUBIC_EMPHASIZEDclass-attributeinstance-attribute

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

buildEASE_IN_OUT_EXPOclass-attributeinstance-attribute

Exponential ease-in/ease-out curve.

buildEASE_IN_OUT_QUADclass-attributeinstance-attribute

Quadratic ease-in/ease-out curve.

buildEASE_IN_OUT_QUARTclass-attributeinstance-attribute

Quartic ease-in/ease-out curve.

buildEASE_IN_OUT_QUINTclass-attributeinstance-attribute

Quintic ease-in/ease-out curve.

buildEASE_IN_OUT_SINEclass-attributeinstance-attribute

Sinusoidal ease-in/ease-out curve.

buildEASE_IN_QUADclass-attributeinstance-attribute

Quadratic ease-in curve.

buildEASE_IN_QUARTclass-attributeinstance-attribute

Quartic ease-in curve.

buildEASE_IN_QUINTclass-attributeinstance-attribute

Quintic ease-in curve.

buildEASE_IN_SINEclass-attributeinstance-attribute

Sinusoidal ease-in curve.

buildEASE_IN_TO_LINEARclass-attributeinstance-attribute

Transitions from ease-in motion into linear motion.

buildEASE_OUTclass-attributeinstance-attribute

Starts quickly and decelerates to the end.

buildEASE_OUT_BACKclass-attributeinstance-attribute

Ease-out curve with trailing overshoot.

buildEASE_OUT_CIRCclass-attributeinstance-attribute

Circular ease-out curve.

buildEASE_OUT_CUBICclass-attributeinstance-attribute

Cubic ease-out curve.

buildEASE_OUT_EXPOclass-attributeinstance-attribute

Exponential ease-out curve.

buildEASE_OUT_QUADclass-attributeinstance-attribute

Quadratic ease-out curve.

buildEASE_OUT_QUARTclass-attributeinstance-attribute

Quartic ease-out curve.

buildEASE_OUT_QUINTclass-attributeinstance-attribute

Quintic ease-out curve.

buildEASE_OUT_SINEclass-attributeinstance-attribute

Sinusoidal ease-out curve.

buildELASTIC_INclass-attributeinstance-attribute

Elastic spring-like ease-in curve.

buildELASTIC_IN_OUTclass-attributeinstance-attribute

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

buildELASTIC_OUTclass-attributeinstance-attribute

Elastic spring-like ease-out curve.

buildFAST_LINEAR_TO_SLOW_EASE_INclass-attributeinstance-attribute

Starts linear and then eases into a slower end.

buildFAST_OUT_SLOWINclass-attributeinstance-attribute

Material motion curve: quick start, gentle finish.

buildLINEARclass-attributeinstance-attribute

Constant speed with no easing.

buildLINEAR_TO_EASE_OUTclass-attributeinstance-attribute

Starts linear and transitions to an ease-out tail.

buildSLOW_MIDDLEclass-attributeinstance-attribute

Slows in the middle section of the animation.