Easing enum

This page explains the Easing enum class.

What class is this?

The Easing enum class defines each easing function. These are used at the animation interfaces, for example, the animation_move interface.

Basic usage

Each animation method interface, such as the animation_move, animation_x, has the easing argument. You can specify any of the Easing enums, as follows:

import apysc as ap


def on_animation_complete_1(e: ap.AnimationEvent[ap.Rectangle], options: dict) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_move: ap.AnimationMove = e.this.target.animation_move(
        x=50, y=50, duration=1000, easing=ap.Easing.EASE_OUT_QUINT
    )
    animation_move.animation_complete(on_animation_complete_2)
    animation_move.start()


def on_animation_complete_2(e: ap.AnimationEvent[ap.Rectangle], options: dict) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_move: ap.AnimationMove = e.this.target.animation_move(
        x=100, y=100, duration=1000, easing=ap.Easing.EASE_OUT_QUINT
    )
    animation_move.animation_complete(on_animation_complete_1)
    animation_move.start()


ap.Stage(
    stage_width=200,
    stage_height=200,
    background_color=ap.Color("#333"),
    stage_elem_id="stage",
)
sprite: ap.Sprite = ap.Sprite()
sprite.graphics.begin_fill(color=ap.Color("#0af"))
rectangle: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=50, width=50, height=50)

animation_move: ap.AnimationMove = rectangle.animation_move(
    x=100, y=100, duration=1000, easing=ap.Easing.EASE_OUT_QUINT
)
animation_move.animation_complete(on_animation_complete_1)
animation_move.start()

ap.save_overall_html(dest_dir_path="./easing_enum_basic_usage/")

If you skip the specification of the easing argument, the animation becomes a linear one:

import apysc as ap


def on_animation_complete_1(e: ap.AnimationEvent[ap.Rectangle], options: dict) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_move: ap.AnimationMove = e.this.target.animation_move(
        x=50, y=50, duration=1000
    )
    animation_move.animation_complete(on_animation_complete_2)
    animation_move.start()


def on_animation_complete_2(e: ap.AnimationEvent[ap.Rectangle], options: dict) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_move: ap.AnimationMove = e.this.target.animation_move(
        x=100, y=100, duration=1000
    )
    animation_move.animation_complete(on_animation_complete_1)
    animation_move.start()


ap.Stage(
    stage_width=200,
    stage_height=200,
    background_color=ap.Color("#333"),
    stage_elem_id="stage",
)
sprite: ap.Sprite = ap.Sprite()
sprite.graphics.begin_fill(color=ap.Color("#0af"))
rectangle: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=50, width=50, height=50)

animation_move: ap.AnimationMove = rectangle.animation_move(x=100, y=100, duration=1000)
animation_move.animation_complete(on_animation_complete_1)
animation_move.start()

ap.save_overall_html(dest_dir_path="./easing_enum_default_setting/")

What difference between the ease-in, ease-out, and ease-in-out

  • Ease-in starts with slow speed and stops with fast speed.

  • Ease-out starts with fast speed and stops with slow speed.

  • Ease-in-out starts and stops with slow speed, and it gets faster on the way.

The following example shows the difference between the EASE_IN_QUINT, EASE_OUT_QUINT, and EASE_IN_OUT_QUINT.

Display the code block:
from typing_extensions import TypedDict

import apysc as ap


class _EasingOptions(TypedDict):
    easing: ap.Easing


DURATION: int = 1000
EASING_1: ap.Easing = ap.Easing.EASE_IN_QUINT
EASING_2: ap.Easing = ap.Easing.EASE_OUT_QUINT
EASING_3: ap.Easing = ap.Easing.EASE_IN_OUT_QUINT


def on_animation_complete_1(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=50, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_2, options=options)
    animation_x.start()


def on_animation_complete_2(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=100, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_1, options=options)
    animation_x.start()


ap.Stage(
    stage_width=200,
    stage_height=350,
    background_color=ap.Color("#333"),
    stage_elem_id="stage",
)
sprite: ap.Sprite = ap.Sprite()
sprite.graphics.begin_fill(color=ap.Color("#0af"))
rectangle_1: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=50, width=50, height=50)
rectangle_2: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=150, width=50, height=50)
rectangle_3: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=250, width=50, height=50)

x: int = 100
animation_x: ap.AnimationX = rectangle_1.animation_x(
    x=x, duration=DURATION, easing=EASING_1
)
options: _EasingOptions = {"easing": EASING_1}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

animation_x = rectangle_2.animation_x(x=x, duration=DURATION, easing=EASING_2)
options = {"easing": EASING_2}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

animation_x = rectangle_3.animation_x(x=x, duration=DURATION, easing=EASING_3)
options = {"easing": EASING_3}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

ap.save_overall_html(dest_dir_path="./easing_enum_ease_difference/")

Ease-in examples

This section shows each ease-in setting result with the x-coordinate animation.

The following is the example of the EASE_IN_SINE, EASE_IN_QUAD, and EASE_IN_CUBIC:

Display the code block:
from typing_extensions import TypedDict

import apysc as ap


class _EasingOptions(TypedDict):
    easing: ap.Easing


DURATION: int = 1000
EASING_1: ap.Easing = ap.Easing.EASE_IN_SINE
EASING_2: ap.Easing = ap.Easing.EASE_IN_QUAD
EASING_3: ap.Easing = ap.Easing.EASE_IN_CUBIC


def on_animation_complete_1(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=50, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_2, options=options)
    animation_x.start()


def on_animation_complete_2(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=100, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_1, options=options)
    animation_x.start()


ap.Stage(
    stage_width=200,
    stage_height=350,
    background_color=ap.Color("#333"),
    stage_elem_id="stage",
)
sprite: ap.Sprite = ap.Sprite()
sprite.graphics.begin_fill(color=ap.Color("#0af"))
rectangle_1: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=50, width=50, height=50)
rectangle_2: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=150, width=50, height=50)
rectangle_3: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=250, width=50, height=50)

x: int = 100
animation_x: ap.AnimationX = rectangle_1.animation_x(
    x=x, duration=DURATION, easing=EASING_1
)
options: _EasingOptions = {"easing": EASING_1}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

animation_x = rectangle_2.animation_x(x=x, duration=DURATION, easing=EASING_2)
options = {"easing": EASING_2}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

animation_x = rectangle_3.animation_x(x=x, duration=DURATION, easing=EASING_3)
options = {"easing": EASING_3}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

ap.save_overall_html(dest_dir_path="./easing_enum_ease_in_1/")

The following is the example of the EASE_IN_QUART, EASE_IN_QUINT, and EASE_IN_EXPO:

Display the code block:
from typing_extensions import TypedDict

import apysc as ap


class _EasingOptions(TypedDict):
    easing: ap.Easing


DURATION: int = 1000
EASING_1: ap.Easing = ap.Easing.EASE_IN_QUART
EASING_2: ap.Easing = ap.Easing.EASE_IN_QUINT
EASING_3: ap.Easing = ap.Easing.EASE_IN_EXPO


def on_animation_complete_1(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=50, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_2, options=options)
    animation_x.start()


def on_animation_complete_2(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=100, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_1, options=options)
    animation_x.start()


ap.Stage(
    stage_width=200,
    stage_height=350,
    background_color=ap.Color("#333"),
    stage_elem_id="stage",
)
sprite: ap.Sprite = ap.Sprite()
sprite.graphics.begin_fill(color=ap.Color("#0af"))
rectangle_1: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=50, width=50, height=50)
rectangle_2: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=150, width=50, height=50)
rectangle_3: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=250, width=50, height=50)

x: int = 100
animation_x: ap.AnimationX = rectangle_1.animation_x(
    x=x, duration=DURATION, easing=EASING_1
)
options: _EasingOptions = {"easing": EASING_1}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

animation_x = rectangle_2.animation_x(x=x, duration=DURATION, easing=EASING_2)
options = {"easing": EASING_2}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

animation_x = rectangle_3.animation_x(x=x, duration=DURATION, easing=EASING_3)
options = {"easing": EASING_3}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

ap.save_overall_html(dest_dir_path="./easing_enum_ease_in_2/")

The following is the example of the EASE_IN_CIRC and EASE_IN_BACK:

Display the code block:
from typing_extensions import TypedDict

import apysc as ap


class _EasingOptions(TypedDict):
    easing: ap.Easing


DURATION: int = 1000
EASING_1: ap.Easing = ap.Easing.EASE_IN_CIRC
EASING_2: ap.Easing = ap.Easing.EASE_IN_BACK


def on_animation_complete_1(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=50, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_2, options=options)
    animation_x.start()


def on_animation_complete_2(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=100, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_1, options=options)
    animation_x.start()


ap.Stage(
    stage_width=200,
    stage_height=250,
    background_color=ap.Color("#333"),
    stage_elem_id="stage",
)
sprite: ap.Sprite = ap.Sprite()
sprite.graphics.begin_fill(color=ap.Color("#0af"))
rectangle_1: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=50, width=50, height=50)
rectangle_2: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=150, width=50, height=50)
rectangle_3: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=250, width=50, height=50)

x: int = 100
animation_x: ap.AnimationX = rectangle_1.animation_x(
    x=x, duration=DURATION, easing=EASING_1
)
options: _EasingOptions = {"easing": EASING_1}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

animation_x = rectangle_2.animation_x(x=x, duration=DURATION, easing=EASING_2)
options = {"easing": EASING_2}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

ap.save_overall_html(dest_dir_path="./easing_enum_ease_in_3/")

The following is the example of the EASE_IN_ELASTIC and EASE_IN_BOUNCE:

Display the code block:
from typing_extensions import TypedDict

import apysc as ap


class _EasingOptions(TypedDict):
    easing: ap.Easing


DURATION: int = 1000
EASING_1: ap.Easing = ap.Easing.EASE_IN_ELASTIC
EASING_2: ap.Easing = ap.Easing.EASE_IN_BOUNCE


def on_animation_complete_1(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=50, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_2, options=options)
    animation_x.start()


def on_animation_complete_2(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=100, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_1, options=options)
    animation_x.start()


ap.Stage(
    stage_width=200,
    stage_height=250,
    background_color=ap.Color("#333"),
    stage_elem_id="stage",
)
sprite: ap.Sprite = ap.Sprite()
sprite.graphics.begin_fill(color=ap.Color("#0af"))
rectangle_1: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=50, width=50, height=50)
rectangle_2: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=150, width=50, height=50)
rectangle_3: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=250, width=50, height=50)

x: int = 100
animation_x: ap.AnimationX = rectangle_1.animation_x(
    x=x, duration=DURATION, easing=EASING_1
)
options: _EasingOptions = {"easing": EASING_1}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

animation_x = rectangle_2.animation_x(x=x, duration=DURATION, easing=EASING_2)
options = {"easing": EASING_2}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

ap.save_overall_html(dest_dir_path="./easing_enum_ease_in_4/")

Ease-out examples

This section shows each ease-out result with the x-coordinate animation.

The following is the example of the EASE_OUT_SINE, EASE_OUT_QUAD, and EASE_OUT_CUBIC:

Display the code block:
from typing_extensions import TypedDict

import apysc as ap


class _EasingOptions(TypedDict):
    easing: ap.Easing


DURATION: int = 1000
EASING_1: ap.Easing = ap.Easing.EASE_OUT_SINE
EASING_2: ap.Easing = ap.Easing.EASE_OUT_QUAD
EASING_3: ap.Easing = ap.Easing.EASE_OUT_CUBIC


def on_animation_complete_1(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=50, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_2, options=options)
    animation_x.start()


def on_animation_complete_2(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=100, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_1, options=options)
    animation_x.start()


ap.Stage(
    stage_width=200,
    stage_height=350,
    background_color=ap.Color("#333"),
    stage_elem_id="stage",
)
sprite: ap.Sprite = ap.Sprite()
sprite.graphics.begin_fill(color=ap.Color("#0af"))
rectangle_1: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=50, width=50, height=50)
rectangle_2: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=150, width=50, height=50)
rectangle_3: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=250, width=50, height=50)

x: int = 100
animation_x: ap.AnimationX = rectangle_1.animation_x(
    x=x, duration=DURATION, easing=EASING_1
)
options: _EasingOptions = {"easing": EASING_1}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

animation_x = rectangle_2.animation_x(x=x, duration=DURATION, easing=EASING_2)
options = {"easing": EASING_2}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

animation_x = rectangle_3.animation_x(x=x, duration=DURATION, easing=EASING_3)
options = {"easing": EASING_3}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

ap.save_overall_html(dest_dir_path="./easing_enum_ease_out_1/")

The following is the example of the EASE_OUT_QUART, EASE_OUT_QUINT, and EASE_OUT_EXPO:

Display the code block:
from typing_extensions import TypedDict

import apysc as ap


class _EasingOptions(TypedDict):
    easing: ap.Easing


DURATION: int = 1000
EASING_1: ap.Easing = ap.Easing.EASE_OUT_QUART
EASING_2: ap.Easing = ap.Easing.EASE_OUT_QUINT
EASING_3: ap.Easing = ap.Easing.EASE_OUT_EXPO


def on_animation_complete_1(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=50, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_2, options=options)
    animation_x.start()


def on_animation_complete_2(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=100, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_1, options=options)
    animation_x.start()


ap.Stage(
    stage_width=200,
    stage_height=350,
    background_color=ap.Color("#333"),
    stage_elem_id="stage",
)
sprite: ap.Sprite = ap.Sprite()
sprite.graphics.begin_fill(color=ap.Color("#0af"))
rectangle_1: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=50, width=50, height=50)
rectangle_2: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=150, width=50, height=50)
rectangle_3: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=250, width=50, height=50)

x: int = 100
animation_x: ap.AnimationX = rectangle_1.animation_x(
    x=x, duration=DURATION, easing=EASING_1
)
options: _EasingOptions = {"easing": EASING_1}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

animation_x = rectangle_2.animation_x(x=x, duration=DURATION, easing=EASING_2)
options = {"easing": EASING_2}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

animation_x = rectangle_3.animation_x(x=x, duration=DURATION, easing=EASING_3)
options = {"easing": EASING_3}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

ap.save_overall_html(dest_dir_path="./easing_enum_ease_out_2/")

The following is the example of the EASE_OUT_CIRC and EASE_OUT_BACK:

Display the code block:
from typing_extensions import TypedDict

import apysc as ap


class _EasingOptions(TypedDict):
    easing: ap.Easing


DURATION: int = 1000
EASING_1: ap.Easing = ap.Easing.EASE_OUT_CIRC
EASING_2: ap.Easing = ap.Easing.EASE_OUT_BACK


def on_animation_complete_1(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=50, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_2, options=options)
    animation_x.start()


def on_animation_complete_2(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=100, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_1, options=options)
    animation_x.start()


ap.Stage(
    stage_width=200,
    stage_height=250,
    background_color=ap.Color("#333"),
    stage_elem_id="stage",
)
sprite: ap.Sprite = ap.Sprite()
sprite.graphics.begin_fill(color=ap.Color("#0af"))
rectangle_1: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=50, width=50, height=50)
rectangle_2: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=150, width=50, height=50)
rectangle_3: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=250, width=50, height=50)

x: int = 100
animation_x: ap.AnimationX = rectangle_1.animation_x(
    x=x, duration=DURATION, easing=EASING_1
)
options: _EasingOptions = {"easing": EASING_1}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

animation_x = rectangle_2.animation_x(x=x, duration=DURATION, easing=EASING_2)
options = {"easing": EASING_2}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

ap.save_overall_html(dest_dir_path="./easing_enum_ease_out_3/")

The following is the example of the EASE_OUT_ELASTIC and EASE_OUT_BOUNCE:

Display the code block:
from typing_extensions import TypedDict

import apysc as ap


class _EasingOptions(TypedDict):
    easing: ap.Easing


DURATION: int = 1000
EASING_1: ap.Easing = ap.Easing.EASE_OUT_ELASTIC
EASING_2: ap.Easing = ap.Easing.EASE_OUT_BOUNCE


def on_animation_complete_1(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=50, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_2, options=options)
    animation_x.start()


def on_animation_complete_2(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=100, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_1, options=options)
    animation_x.start()


ap.Stage(
    stage_width=200,
    stage_height=250,
    background_color=ap.Color("#333"),
    stage_elem_id="stage",
)
sprite: ap.Sprite = ap.Sprite()
sprite.graphics.begin_fill(color=ap.Color("#0af"))
rectangle_1: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=50, width=50, height=50)
rectangle_2: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=150, width=50, height=50)
rectangle_3: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=250, width=50, height=50)

x: int = 100
animation_x: ap.AnimationX = rectangle_1.animation_x(
    x=x, duration=DURATION, easing=EASING_1
)
options: _EasingOptions = {"easing": EASING_1}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

animation_x = rectangle_2.animation_x(x=x, duration=DURATION, easing=EASING_2)
options = {"easing": EASING_2}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

ap.save_overall_html(dest_dir_path="./easing_enum_ease_out_4/")

Ease-in-out examples

This section shows each ease-in-out setting result with the x-coordinate animation.

The following is the example of the EASE_IN_OUT_SINE, EASE_IN_OUT_QUAD, and EASE_IN_OUT_CUBIC:

Display the code block:
from typing_extensions import TypedDict

import apysc as ap


class _EasingOptions(TypedDict):
    easing: ap.Easing


DURATION: int = 1000
EASING_1: ap.Easing = ap.Easing.EASE_IN_OUT_SINE
EASING_2: ap.Easing = ap.Easing.EASE_IN_OUT_QUAD
EASING_3: ap.Easing = ap.Easing.EASE_IN_OUT_CUBIC


def on_animation_complete_1(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=50, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_2, options=options)
    animation_x.start()


def on_animation_complete_2(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=100, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_1, options=options)
    animation_x.start()


ap.Stage(
    stage_width=200,
    stage_height=350,
    background_color=ap.Color("#333"),
    stage_elem_id="stage",
)
sprite: ap.Sprite = ap.Sprite()
sprite.graphics.begin_fill(color=ap.Color("#0af"))
rectangle_1: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=50, width=50, height=50)
rectangle_2: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=150, width=50, height=50)
rectangle_3: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=250, width=50, height=50)

x: int = 100
animation_x: ap.AnimationX = rectangle_1.animation_x(
    x=x, duration=DURATION, easing=EASING_1
)
options: _EasingOptions = {"easing": EASING_1}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

animation_x = rectangle_2.animation_x(x=x, duration=DURATION, easing=EASING_2)
options = {"easing": EASING_2}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

animation_x = rectangle_3.animation_x(x=x, duration=DURATION, easing=EASING_3)
options = {"easing": EASING_3}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

ap.save_overall_html(dest_dir_path="./easing_enum_ease_in_out_1/")

The following is the example of the EASE_IN_OUT_QUART, EASE_IN_OUT_QUINT, and EASE_IN_OUT_EXPO:

Display the code block:
from typing_extensions import TypedDict

import apysc as ap


class _EasingOptions(TypedDict):
    easing: ap.Easing


DURATION: int = 1000
EASING_1: ap.Easing = ap.Easing.EASE_IN_OUT_QUART
EASING_2: ap.Easing = ap.Easing.EASE_IN_OUT_QUINT
EASING_3: ap.Easing = ap.Easing.EASE_IN_OUT_EXPO


def on_animation_complete_1(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=50, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_2, options=options)
    animation_x.start()


def on_animation_complete_2(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=100, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_1, options=options)
    animation_x.start()


ap.Stage(
    stage_width=200,
    stage_height=350,
    background_color=ap.Color("#333"),
    stage_elem_id="stage",
)
sprite: ap.Sprite = ap.Sprite()
sprite.graphics.begin_fill(color=ap.Color("#0af"))
rectangle_1: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=50, width=50, height=50)
rectangle_2: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=150, width=50, height=50)
rectangle_3: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=250, width=50, height=50)

x: int = 100
animation_x: ap.AnimationX = rectangle_1.animation_x(
    x=x, duration=DURATION, easing=EASING_1
)
options: _EasingOptions = {"easing": EASING_1}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

animation_x = rectangle_2.animation_x(x=x, duration=DURATION, easing=EASING_2)
options = {"easing": EASING_2}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

animation_x = rectangle_3.animation_x(x=x, duration=DURATION, easing=EASING_3)
options = {"easing": EASING_3}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

ap.save_overall_html(dest_dir_path="./easing_enum_ease_in_out_2/")

The following is the example of the EASE_IN_OUT_CIRC and EASE_IN_OUT_BACK:

Display the code block:
from typing_extensions import TypedDict

import apysc as ap


class _EasingOptions(TypedDict):
    easing: ap.Easing


DURATION: int = 1000
EASING_1: ap.Easing = ap.Easing.EASE_IN_OUT_CIRC
EASING_2: ap.Easing = ap.Easing.EASE_IN_OUT_BACK


def on_animation_complete_1(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=50, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_2, options=options)
    animation_x.start()


def on_animation_complete_2(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=100, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_1, options=options)
    animation_x.start()


ap.Stage(
    stage_width=200,
    stage_height=250,
    background_color=ap.Color("#333"),
    stage_elem_id="stage",
)
sprite: ap.Sprite = ap.Sprite()
sprite.graphics.begin_fill(color=ap.Color("#0af"))
rectangle_1: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=50, width=50, height=50)
rectangle_2: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=150, width=50, height=50)
rectangle_3: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=250, width=50, height=50)

x: int = 100
animation_x: ap.AnimationX = rectangle_1.animation_x(
    x=x, duration=DURATION, easing=EASING_1
)
options: _EasingOptions = {"easing": EASING_1}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

animation_x = rectangle_2.animation_x(x=x, duration=DURATION, easing=EASING_2)
options = {"easing": EASING_2}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

ap.save_overall_html(dest_dir_path="./easing_enum_ease_in_out_3/")

The following is the example of the EASE_IN_OUT_ELASTIC and EASE_IN_OUT_BOUNCE:

Display the code block:
from typing_extensions import TypedDict

import apysc as ap


class _EasingOptions(TypedDict):
    easing: ap.Easing


DURATION: int = 1000
EASING_1: ap.Easing = ap.Easing.EASE_IN_OUT_ELASTIC
EASING_2: ap.Easing = ap.Easing.EASE_IN_OUT_BOUNCE


def on_animation_complete_1(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=50, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_2, options=options)
    animation_x.start()


def on_animation_complete_2(
    e: ap.AnimationEvent[ap.Rectangle], options: _EasingOptions
) -> None:
    """
    The handler that the animation calls when its end.

    Parameters
    ----------
    e : ap.AnimationEvent
        Event instance.
    options : dict
        Optional arguments dictionary.
    """
    animation_x: ap.AnimationX = e.this.target.animation_x(
        x=100, duration=DURATION, easing=options["easing"]
    )
    animation_x.animation_complete(on_animation_complete_1, options=options)
    animation_x.start()


ap.Stage(
    stage_width=200,
    stage_height=250,
    background_color=ap.Color("#333"),
    stage_elem_id="stage",
)
sprite: ap.Sprite = ap.Sprite()
sprite.graphics.begin_fill(color=ap.Color("#0af"))
rectangle_1: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=50, width=50, height=50)
rectangle_2: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=150, width=50, height=50)
rectangle_3: ap.Rectangle = sprite.graphics.draw_rect(x=50, y=250, width=50, height=50)

x: int = 100
animation_x: ap.AnimationX = rectangle_1.animation_x(
    x=x, duration=DURATION, easing=EASING_1
)
options: _EasingOptions = {"easing": EASING_1}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

animation_x = rectangle_2.animation_x(x=x, duration=DURATION, easing=EASING_2)
options = {"easing": EASING_2}
animation_x.animation_complete(on_animation_complete_1, options=options)
animation_x.start()

ap.save_overall_html(dest_dir_path="./easing_enum_ease_in_out_4/")