Pulsing Background Color in Kivy

Question

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?

Definitely. It won't be quite as simple as that CSS code but you can do it for sure. You'd probably want to set a function to be triggered every so often, and that function would change the color of a canvas. To schedule a function call, use the kivy.Clock.schedule_interval function (https://kivy.org/doc/stable/api-kivy.clock.html). If you want to take a stab at it first, do it! Let me know if you get stuck and I could post a small, complete example. — Erik, Feb 08 '19 at 18:44

John Anderson · Accepted Answer · 2019-02-08T19:45:01.787

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()

Pulsing Background Color in Kivy

1 Answers1

Linked