How to temporarily pause between two separate animations in WPF

Question

I'm a beginner in Windows Presentation Foundation and C#. As a startup project, I decided to create, or shall I say recreate the 'Simon' game in WPF.

Simon game image:

Below is a portion of the code handling the flashes:

        {

            if (watchMode)
            {
                // In watch mode the user can't click on the simon button.
                return;
            }

            DoubleAnimation opacityClickAnimation = new DoubleAnimation
            {
                From = 0,
                To = 1,
                Duration = new Duration(TimeSpan.FromSeconds(0.3)),
                AutoReverse = true

            };
            List<int> clickList = new List<int>();

            Path objButton = (Path)sender;

            // Switching all the possible options - determining them by name.
            // This method is much easier than creating 4 different events.
            switch (objButton.Name)
            {
                case "RedBlock":
                    RedBlockGradient.BeginAnimation(RadialGradientBrush.OpacityProperty, opacityClickAnimation);
                    await Task.Delay(taskDelay);
                    clickList.Add(redButtonValue);

                    lightValueClicked = redButtonValue;

                    break;
                case "BlueBlock":
                    BlueBlockGradient.BeginAnimation(RadialGradientBrush.OpacityProperty, opacityClickAnimation);
                    await Task.Delay(taskDelay);
                    clickList.Add(blueButtonValue);

                    lightValueClicked = blueButtonValue;

                    break;
                case "OrangeBlock":
                    OrangeBlockGradient.BeginAnimation(RadialGradientBrush.OpacityProperty, opacityClickAnimation);
                    await Task.Delay(taskDelay);
                    clickList.Add(orangeButtonValue);

                    lightValueClicked = orangeButtonValue;

                    break;
                case "GreenBlock":
                    GreenBlockGradient.BeginAnimation(RadialGradientBrush.OpacityProperty, opacityClickAnimation);
                    await Task.Delay(taskDelay);
                    clickList.Add(greenButtonValue);

                    lightValueClicked = greenButtonValue;

                    break;

            }

I hope whoever is reading this that you are familiar with how Simon works, if not, please have a search online. I have created a double animation, (opacityClickAnimation)

   DoubleAnimation opacityClickAnimation = new DoubleAnimation
            {
                From = 0,
                To = 1,
                Duration = new Duration(TimeSpan.FromSeconds(0.3)),
                AutoReverse = true

            };

Above is the opacity animation for the flash.

So in Simon each colour flashes, and there is always a slight pause in between. First of all, I'm not entirely sure how to go around this. What I am doing right now works but I was wondering if there was an alternative to this. I am not interested in async methods and stuff like that - my program is synchronous - I am looking for a synchronous alternative in pausing between flashes.

Also I do realise that this code is not perfect - I should be using Tasks instead of an async void method - this is why I am looking for a synchronous alternative

Does this answer your question? [How to run and interact with an async Task from a WPF gui](https://stackoverflow.com/questions/27089263/how-to-run-and-interact-with-an-async-task-from-a-wpf-gui) — Bizhan, Jul 13 '20 at 07:36
If you like creating animation in code, I had a much better time using Artefact Animator (instead of the built in methods) in the past: https://archive.codeplex.com/?p=artefactanimator - it gives you much better control over timing... though I'm not sure if it still works all these years later. — Patrick Klug, Jul 13 '20 at 07:42
You are using animation which is asynchronous, if the reason for you not to use async is to not learn async, then it's a very very poor decision. — Bizhan, Jul 13 '20 at 07:49
Hello Bizhan, I am taking a course on asynchronous programming. Thanks. — Tom Joney, Jul 13 '20 at 20:37

score 1 · Accepted Answer · answered Jul 13 '20 at 07:57

You can queue your animations by attaching to the Completed event:

<Storyboard x:Name="MyStoryboard" Completed="MyStoryboardCompleted" ...>

and in your code behind

private async void MyStoryboardCompleted(object sender, EventArgs e)
{
    await Task.Delay(delay); // wait
    StartMyNextAnimation();  // start next
}

How to temporarily pause between two separate animations in WPF

1 Answers1