WPF implementation of a Pacman Loading animation

The results of the run are as follows

Let's start by introducing the libraries we need

Search for "" on nuget and install the package.

Let's create a Window and introduce the package namespace.

Let's set the style of the form rendered by this loading animation

        xmlns:ed="/expression/2010/drawing"
        mc:Ignorable="d"
        WindowStyle="None"
        ResizeMode="NoResize"
        Background="#4C858585"
        WindowStartupLocation="CenterScreen"
        AllowsTransparency="True"
        Loaded="Window_Loaded"
        Title="Window1" Height="400" Width="400"

Then we're going to use one of the arc controls from the library we added.

        <ed:Arc x:Name="arc" Height="100" Width="100" StrokeThickness="50" ="1"
                StartAngle="-240" EndAngle="-300" Stretch="None"
                ArcThicknessUnit="Pixel">
            <ed:>
                <RadialGradientBrush GradientOrigin="0.3,0.3" RadiusX="0.7" RadiusY="0.7">
                    <GradientStop Color="#FFFFF00E" Offset="1"/>
                    <GradientStop Color="White" Offset="0"/>
                </RadialGradientBrush>
            </ed:>
        </ed:Arc>

The reason for setting the background color to a circular gradient is to make the control look like a sphere instead of a circle, resulting in the following effect.

Then go underneath and put a couple of balls.

<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" Width="200" Margin="200,0,0,0">
    <StackPanel x:Name="stackPanel" Orientation="Horizontal" RenderTransformOrigin="0.5,0.5">
<!--This is for later animation.,Because I'm usingblendAdded animations，So the generated code is as follows-->
        <>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </>
        <Ellipse/>
        <Ellipse Margin="20,0"/>
        <Ellipse />
        <Ellipse Margin="20,0"/>
        <Ellipse />
        <Ellipse Margin="20,0"/>
    </StackPanel>
</StackPanel>

Add the size and color of the balls to the resources.

        <Style TargetType="{x:Type Ellipse}">
            <Setter Property="Height" Value="20"/>
            <Setter Property="Width" Value="20"/>
            <Setter Property="Fill" Value="#FFFF5800"/>
        </Style>

You get the following

Let's add a little more animation to get these two parts moving

        <Storyboard x:Key="Storyboard1" RepeatBehavior="Forever" AutoReverse="True">
            <DoubleAnimationUsingKeyFrames ="arc" ="(ed:)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="-300"/>
                <EasingDoubleKeyFrame KeyTime="00:00:0.25" Value="-271"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames ="arc" ="(ed:)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="-240"/>
                <EasingDoubleKeyFrame KeyTime="00:00:0.25" Value="-270"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="Storyboard2" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames ="stackPanel" ="().()[3].()">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="-78"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

You also need to make the animation move, by adding the following code to the window's loaded event

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            var b = FindResource("Storyboard1") as Storyboard;
            ();

            var c = FindResource("Storyboard2") as Storyboard;
            ();
        }

Run this form at this time, you will find that the effect of eating beans has been realized, but because the animation is always in the loop, the small beans have been moving to the left when moving to a position will not move, the animation in the reset will make the

The animation looks like there is a delay, we can add a clip to the parent of this bean, so that the animation visually appears to be continuous (here you can compare the difference between the effect of adding a clip and not adding it).

<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" Width="200" Margin="200,0,0,0">
    <>
        <RectangleGeometry>
            <>
                <Rect X="0" Y="0" Width="150" Height="40"/>
            </>
        </RectangleGeometry>
    </>
    <StackPanel x:Name="stackPanel" Orientation="Horizontal" RenderTransformOrigin="0.5,0.5">
        <!--This is for later animation.,Because I'm usingblendAdded animations，So the generated code is as follows-->
        <>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </>
        <Ellipse/>
        <Ellipse Margin="20,0"/>
        <Ellipse />
        <Ellipse Margin="20,0"/>
        <Ellipse />
        <Ellipse Margin="20,0"/>
    </StackPanel>
</StackPanel>

Then it's all about how to apply this effect to our project

Let's add a window2 and add a button to it.

The button's click event code is as follows

We run window2, click the button, you will find that after 3 seconds, the Pacman animation disappears, that is, the data loading is complete, Pacman does not show up!

If there are a lot of places inside the project where this animation is going to be used, we can add a class to do this animation thing exclusively

The Actions inside the code are some of the time-consuming operations that we need to do

So the code inside our button's click becomes the following code

Well, here the implementation of this animation ends

Project github address:bearhanQ/WPFFramework: Share some experience ()

QQ technical exchange group: 332035933;