AnimatedAppComponent White Background Problem


I recently switched one of my components that is heavily animated over to inheriting from the AnimatedAppComponent class. The component itself is a circle, but since switching, there is always a solid white background that fills the component’s bounds. Is there a way to get rid of this background/am I missing something obvious?


Hi qscacheri,

If you look at the code for the AnimatedAppComponent you’ll see it’s basically little more than a regular component with a Timer and an update() function, and some little things like keeping track of the time since the last update, etc (if I recall correctly)

So the problem with the white background (which tbh I don’t fully understand) is probably coming from your code somewhere.

Why not try going back to your precious version of the code that didn’t use the AnimatedAppComponent and try implementing the Timer (have it call repaint() yourself)?

Thanks for your response,

The problem specifically is I am drawing a circular shape within the rectangular bounds, so there is space within the bounds that is not covered by the circle. This space outside has a white background instead of just being empty. If I flip-flop back and forth between implementing the timer myself vs inheriting from the AnimatedAppComponent without changing anything else, the white background appears while inheriting and disappears when I implement the timer myself.

Sounds like your component is opaque. Try setOpaque(false); on the component, perhaps AnimatedAppComponent is setting the opposite and explains what you’re seeing.

It does in its constructor. I guess AnimatedAppComponent is meant to be used as the main component for an animated app (hence the name?). But calling setOpaque (false); should do the job.

The “problem” with that is, that a repaint() of non-opaque components triggers a repaint() of the parent instead, defeating the setup of the AnimatedAppComponent.
(It is not a real problem, it works, but paints more than you expect it to)

Ideally you would use just a normal Component, set it to what you need it to be, and add your own timer. JUCE will do the right thing, painting whatever needs to be painted according to the flags.

Ah, this all makes sense. I’ll just use the timer. Thanks!