kivymd / KivyMD

KivyMD is a collection of Material Design compliant widgets for use with Kivy, a framework for cross-platform, touch-enabled graphical applications. https://youtube.com/c/KivyMD https://twitter.com/KivyMD https://habr.com/ru/users/kivymd https://stackoverflow.com/tags/kivymd
https://kivymd.readthedocs.io
MIT License
2.26k stars 674 forks source link

Fixed shadow appearing before main widget appears #1686

Closed FuadAbid closed 3 months ago

FuadAbid commented 7 months ago

Fade Effect of Widget that inherits from CommonElevationBehavior class

Widgets that inherit from CommonElevationBehavior class (eg. MDButton and MDCard) produce bad look when their opacity is set low. It happens because their shadow color merges with main widget and gives a darker shade look. As to why it doesn't look good when using fade effect to show the widget. This has been fixed in this version.

Method to solve the problem

I wanted shadow start fading when opacity of the widget is more than by 70-80% and then by the time opacity of the widget reaches 100%, it's shadow opacity reaches 100% as well. That's why I used logistic function with shadow color opacity that increases very low at first and after a certain point it starts increasing faster.

Reproducing the problem

from kivymd.app import MDApp
from kivy.lang.builder import Builder
from kivy.animation import Animation

KV = '''
MDScreen:
    md_bg_color: self.theme_cls.backgroundColor
    MDButton:
        pos_hint: {'center_x': .5}
        on_press: app.show_widget(card)
        MDButtonText:
            text: 'Show'
    MDCard:
        id: card
        style: 'elevated'
        size_hint: .75, .75
        pos_hint: {'center_x': .5, 'center_y': .5}
        RelativeLayout:
            MDButton:
                pos_hint: {'center_x': .5, 'center_y': .5}
                on_press: app.hide_widget(card)
                MDButtonText:
                    text: 'Hide'
'''

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

    def show_widget(self, widget):
        Animation(opacity=1, d=2, t='out_quad').start(widget)

    def hide_widget(self, widget):
        Animation(opacity=0, d=2, t='out_quad').start(widget)

MyApp().run()

Showing the problem

fade_effect_problem

Changes to code

in kivymd/uix/behaviors/elevation.py file on line 391 solution code

rgba: self.shadow_color[:3] + [self.shadow_color[3]*(1/(1+100*(.8**((self.opacity-.7)*100))))]

instead of

rgba: self.shadow_color

After applying the solution

fade_effect_solution