Magic

Magic#

#

Magical effects for buttons.

Warning

Magic effects do not work correctly with KivyMD buttons!

To apply magic effects, you must create a new class that is inherited from the widget to which you apply the effect and from the MagicBehavior class.

class MagicButton(MagicBehavior, MDButton):
    ...

The MagicBehavior class provides five effects:

Example#

from kivy.lang import Builder
from kivy.properties import StringProperty

from kivymd.app import MDApp
from kivymd.uix.behaviors import MagicBehavior
from kivymd.uix.button import MDButton, MDButtonText

KV = '''
MDScreen:
    md_bg_color: app.theme_cls.backgroundColor

    MagicButtonGrowEffect:
        on_release: self.grow()
        pos_hint: {"center_x": .5, "center_y": .4}

    MagicButtonShakeEffect:
        on_release: self.shake()
        pos_hint: {"center_x": .5, "center_y": .5}

    MagicButtonTwistEffect:
        on_release: self.twist()
        pos_hint: {"center_x": .5, "center_y": .6}

    MagicButtonShrinkEffect:
        on_release: self.shrink()
        pos_hint: {"center_x": .5, "center_y": .7}

    MagicButtonWobbleEffect:
        on_release: self.wobble()
        pos_hint: {"center_x": .5, "center_y": .8}
'''


class BaseMagicButton(MDButton):
    '''
    A base button class with customizable text and outlined style.

    This class serves as a foundation for creating magic-effect buttons
    (like grow, shake, twist) with predefined styling and structure.
    It automatically initializes a button with MDButtonText as its child widget.
    '''

    text = StringProperty()
    style = "outlined"

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.widgets = [
            MDButtonText(
                text=self.text
            )
        ]
        super().__init__(*args, **kwargs)


class MagicButtonGrowEffect(MagicBehavior, BaseMagicButton):
    scale_value = 1.03
    text = "Grow Effect"


class MagicButtonShakeEffect(MagicBehavior, BaseMagicButton):
    translate_value = 15
    text = "Shake Effect"


class MagicButtonTwistEffect(MagicBehavior, BaseMagicButton):
    rotate_value = 6
    text = "Twist Effect"


class MagicButtonShrinkEffect(MagicBehavior, BaseMagicButton):
    scale_value = 0.95
    text = "Shrink Effect"


class MagicButtonWobbleEffect(MagicBehavior, BaseMagicButton):
    scale_value = 0.95
    text = "Wobble Effect"


class Example(MDApp):
    def build(self):
        return Builder.load_string(KV)


Example().run()
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/magic-button-3.gif

API - kivymd.uix.behaviors.magic_behavior#

class kivymd.uix.behaviors.magic_behavior.MagicBehavior#

A mixin class that provides animated visual effects for Kivy/KivyMD widgets.

MagicBehavior adds interactive animation effects that enhance user interface feedback and engagement. These animations include:

  • grow(): Expands the widget slightly and returns to its original size.

  • shake(): Shakes the widget horizontally.

  • wobble(): Squashes and stretches the widget briefly.

  • twist(): Rotates the widget and resets its angle.

  • shrink(): Shrinks the widget temporarily and restores it.

scale_value#

Scale factor for animation effects.

Added in version 2.0.0.

scale_value is a NumericProperty and defaults to 1.

translate_value#

Translation distance for animation effects.

Added in version 2.0.0.

translate_value is a NumericProperty and defaults to 1.

rotate_value#

Rotation angle in degrees for animation effects.

Added in version 2.0.0.

rotate_value is a NumericProperty and defaults to 25.

magic_speed#

Animation playback speed.

magic_speed is a NumericProperty and defaults to 1.

grow() → None#

Grow effect animation.

shake() → None#

Shake effect animation.

wobble() → None#

Wobble effect animation.

twist() → None#

Twist effect animation.

shrink() → None#

Shrink effect animation.

on_touch_up(*args)#
Contents