Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed shadow appearing before main widget appears #1686

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

FuadAbid
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant