canvasbackgroundkivypulse

Pulsing Background Color in Kivy


I'm new to kivy, but I really stuck on this. Is there any way to have a Pulsing background on a canvas similar to this effect in CSS:

https://codepen.io/LukeAskew/pen/gabgom

body {
  background-color: #222;
  animation-name: color;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes color {
  0% {
    background-color: #222;
  }
  50% {
    background-color: #4285f4;
  }
  100 {
    background-color: #222;
  }
}

Is it even possible to do something like this using kivy?


Solution

  • You can use kivy.Animation to animate the background color:

    from kivy.animation import Animation
    from kivy.app import App
    from kivy.clock import Clock
    from kivy.lang import Builder
    from kivy.properties import ObjectProperty
    from kivy.uix.widget import Widget
    
    
    class Pulser(Widget):
        bg_color = ObjectProperty([1, 1, 1, 1])
    
        def __init__(self, **kwargs):
            super(Pulser, self).__init__(**kwargs)
            Clock.schedule_once(self.start_pulsing, 2)
    
        def start_pulsing(self, *args):
            anim = Animation(bg_color=[1,0,0,1]) + Animation(bg_color=[1,1,1,1])
            anim.repeat = True
            anim.start(self)
    
    
    theRoot = Builder.load_string('''
    Pulser:
        canvas:
            Color:
                rgba: self.bg_color
            Rectangle:
                pos: self.pos
                size: self.size
    
    ''')
    
    class PulserApp(App):
        def build(self):
            return theRoot
    
    if __name__ == "__main__":
        PulserApp().run()