Transition (submodule)

The asynckivy.transition submodule provides various transition effects for creating smooth visual transitions for Kivy widgets.

from asynckivy import transition

async with transition.slide(label):
    label.text = "new text"

You can recreate the ScreenManager by adding or removing widgets from a layout inside the with-block:

from asynckivy import transition

async def switch_between_widgets(layout, out_child, in_child):
    async with transition.slide(layout):
        child_idx = layout.children.index(out_child)
        layout.remove_widget(out_child)
        layout.add_widget(in_child, index=child_idx)

Actually, ScreenManager does more than just transitions — it also blocks touch events during transitions and clips its drawing area. To recreate those behaviors as well:

import asynckivy as ak

async def switch_between_widgets(layout, out_child, in_child):
    with (
        ak.block_touch_events(layout),
        ak.stencil_widget_mask(layout, canvas_layer="inner_outer"),
    ):
        child_idx = layout.children.index(out_child)
        async with transition.slide(layout, canvas_layer="inner_outer"):
            layout.remove_widget(out_child)
            layout.add_widget(in_child, index=child_idx)

We are not done yet, as this only works for non-relative layouts. See recreating_the_screen_manager.py for a complete example.

API Reference

fade(target: kivy.core.window.WindowBase | kivy.uix.widget.Widget | kivy.graphics.Canvas = kivy.core.window.Window.canvas, *, goal_opacity=0.0, duration=1.0, out_curve='linear', in_curve='linear')

Fades out the target, executes the code inside the with-block, and then fades it back in.

Added in version 0.9.0.

Changed in version 0.9.1: Now accepts Canvas as target.

fade_multiple(*widgets, duration=1.0, out_curve='linear', in_curve='linear')

Fades out the widgets simultaneously, executes the code inside the with-block, and then fades them back in.

Added in version 0.10.0.

gl_transitions_dot_com(target: kivy.uix.widget.Widget, fs: str, *, duration=1.0, uniforms: Mapping = None)

A transition that uses a GLSL fragment shader from https://gl-transitions.com/.

cross_warp = """
// Author: Eke Péter <peterekepeter@gmail.com>
// License: MIT
vec4 transition(vec2 p) {
    float x = progress;
    x=smoothstep(.0,1.0,(x*2.0+p.x-1.0));
    return mix(getFromColor((p-.5)*(1.-x)+.5), getToColor((p-.5)*x+.5), x);
}
"""

async with gl_transitions_dot_com(widget, fs=cross_warp):
    ...

See shader() for details.

Added in version 0.9.3.

iris(target: kivy.core.window.WindowBase = kivy.core.window.Window, *, duration=1, out_curve='in_cubic', in_curve='out_cubic', color: Sequence[float] = kivy.utils.colormap.white, circle_center: Sequence[float] = None, overlay: kivy.graphics.VertexInstruction = None)

縮む円によって target が見える範囲を絞っていき、完全に見えなくなったらwithブロック内を実行し、その後円を広げて target を再び見せる。

Added in version 0.9.0.

scale(target: kivy.core.window.WindowBase | kivy.uix.widget.Widget = kivy.core.window.Window, *, duration=1, out_curve='out_quad', in_curve='in_quad', canvas_layer='inner')

Shrinks the target, executes the code inside the with-block, and then restores it to its original size.

Added in version 0.9.0.

shader(target: kivy.uix.widget.Widget, fs: str, *, duration=1.0, uniforms: Mapping = None, progress_var: str = 'progress', out_texture_var: str = 'out_tex', in_texture_var: str = 'in_tex')

A transition that uses a GLSL fragment shader.

fade = """
/* Outputs from the vertex shader */
varying vec4 frag_color;
varying vec2 tex_coord0;

uniform float t;
uniform sampler2D out_tex;
uniform sampler2D in_tex;

void main(void) {
    vec4 cout = texture2D(out_tex, tex_coord0);
    vec4 cin = texture2D(in_tex, tex_coord0);
    gl_FragColor = mix(cout, cin, t);
}
"""

async with shader(widget, fs=fade, progress_var='t', out_texture_var='out_tex', in_texture_var='in_tex'):
    ...
Parameters:

  • fs – The GLSL fragment shader code to use.

  • progress_var – Name of the uniform float variable representing the normalized progress (elapsed time divided by duration).

  • out_texture_var – Name of the uniform sampler2D variable for the outgoing texture. This corresponds to the rendered content of the target before __aenter__.

  • in_texture_var – Name of the uniform sampler2D variable for the incoming texture. This corresponds to the rendered content of the target before __aexit__.

  • uniforms – Additional uniform variables to be set on the shader.

Warning

Do not modify the target’s parent — such as adding or removing widgets or graphics instructions — while the transition is in progress. Modifying the target itself is fine.

Added in version 0.9.3.

slide(target: kivy.core.window.WindowBase | kivy.uix.widget.Widget = kivy.core.window.Window, *, duration=1.0, out_curve='in_back', in_curve='out_back', x_direction: Literal['left', 'right', None] = 'left', y_direction: Literal['down', 'up', None] = None, canvas_layer='inner')

Slides the target out, executes the code inside the with-block, and then slides it back in.

Added in version 0.9.0.

Changed in version 0.9.2: The default value of out_curve has changed from 'in_cubic' to 'in_back'. The default value of in_curve has changed from 'out_cubic' to 'out_back'.