Apply a continuous animation to a Canvas in WPF

Question

I want to apply a continuous FadeIn/FadeOut animation to a specific Canvas in my WPF.

I'm able to do the FadeOut part but then the FadeIn part executes immediately after that and ruins the animation.

I also want all of this to be in a smooth loop without interfering with my normal operations.

Look at it as an animated background.

What's the best method to do this? Should I use While? or should I use Timer? ...

var duration = new Duration(TimeSpan.FromMilliseconds(1000));
var fadeOut = new DoubleAnimation(0.0, duration);
var fadeIn = new DoubleAnimation(1.0, duration);
MyCanvas.BeginAnimation(OpacityProperty, fadeOut);
MyCanvas.BeginAnimation(OpacityProperty, fadeIn);

Answer 1

You can set the AutoReverse and RepeatBehavior properties of a single DoubleAnimation to get a continous effect:

var fadeInOutAnimation = new DoubleAnimation
{
    From = 0,
    To = 1,
    Duration = TimeSpan.FromSeconds(1),
    AutoReverse = true,
    RepeatBehavior = RepeatBehavior.Forever,
};

MyCanvas.BeginAnimation(OpacityProperty, fadeInOutAnimation);

---

In your approach you would have to set the BeginTime property of the second animation to the Duration of the first one.