WPF仿win10加载动画 可用于loading加载

直接上xaml 没有cs代码 (自己琢磨了好久感觉这样能接受😂)

<UserControl x:Class="WpfApp1.Loading"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Name="uclLoad" Width="50" Height="50">
    <UserControl.Resources>
        <Storyboard x:Key="stb1" BeginTime="0:0:0" Duration="0:0:05.43" RepeatBehavior="Forever">
            <DoubleAnimation Storyboard.TargetName="rot1" Storyboard.TargetProperty="Angle" Duration="0:0:2.00" From="0" To="180">
                <DoubleAnimation.EasingFunction>
                    <QuadraticEase EasingMode="EaseOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="rot1" Storyboard.TargetProperty="Angle" BeginTime="0:0:1.80" Duration="0:0:2.00" From="180" To="540">
                <DoubleAnimation.EasingFunction>
                    <QuadraticEase EasingMode="EaseInOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="rot1" Storyboard.TargetProperty="Angle" BeginTime="0:0:3.75" Duration="0:0:1.00" From="540" To="720">
                <DoubleAnimation.EasingFunction>
                    <QuadraticEase EasingMode="EaseIn"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="grd1" Storyboard.TargetProperty="Opacity" BeginTime="0:0:0.00" Duration="0:0:0.00" From="0" To="1"/>
            <DoubleAnimation Storyboard.TargetName="grd1" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.75" Duration="0:0:0.00" From="1" To="0"/>
        </Storyboard>
        <Storyboard x:Key="stb2" BeginTime="0:0:0.17" Duration="0:0:05.43" RepeatBehavior="Forever">
            <DoubleAnimation Storyboard.TargetName="rot2" Storyboard.TargetProperty="Angle" Duration="0:0:2.00" From="-25" To="155">
                <DoubleAnimation.EasingFunction>
                    <QuadraticEase EasingMode="EaseOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="rot2" Storyboard.TargetProperty="Angle" BeginTime="0:0:1.80" Duration="0:0:2.00" From="155" To="515">
                <DoubleAnimation.EasingFunction>
                    <QuadraticEase EasingMode="EaseInOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="rot2" Storyboard.TargetProperty="Angle" BeginTime="0:0:3.75" Duration="0:0:1.00" From="515" To="720">
                <DoubleAnimation.EasingFunction>
                    <QuadraticEase EasingMode="EaseIn"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="grd2" Storyboard.TargetProperty="Opacity" BeginTime="0:0:0.00" Duration="0:0:0.00" From="0" To="1"/>
            <DoubleAnimation Storyboard.TargetName="grd2" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.75" Duration="0:0:0.00" From="1" To="0"/>
        </Storyboard>
        <Storyboard x:Key="stb3" BeginTime="0:0:0.34" Duration="0:0:05.43" RepeatBehavior="Forever">
            <DoubleAnimation Storyboard.TargetName="rot3" Storyboard.TargetProperty="Angle" Duration="0:0:2.00" From="-50" To="130">
                <DoubleAnimation.EasingFunction>
                    <QuadraticEase EasingMode="EaseOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="rot3" Storyboard.TargetProperty="Angle" BeginTime="0:0:1.80" Duration="0:0:2.00" From="130" To="490">
                <DoubleAnimation.EasingFunction>
                    <QuadraticEase EasingMode="EaseInOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="rot3" Storyboard.TargetProperty="Angle" BeginTime="0:0:3.75" Duration="0:0:1.00" From="490" To="720">
                <DoubleAnimation.EasingFunction>
                    <QuadraticEase EasingMode="EaseIn"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="grd3" Storyboard.TargetProperty="Opacity" BeginTime="0:0:0.25" Duration="0:0:0.00" From="0" To="1"/>
            <DoubleAnimation Storyboard.TargetName="grd3" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.75" Duration="0:0:0.00" From="1" To="0"/>
        </Storyboard>
        <Storyboard x:Key="stb4" BeginTime="0:0:0.51" Duration="0:0:05.43" RepeatBehavior="Forever">
            <DoubleAnimation Storyboard.TargetName="rot4" Storyboard.TargetProperty="Angle" Duration="0:0:2.00" From="-75" To="105">
                <DoubleAnimation.EasingFunction>
                    <QuadraticEase EasingMode="EaseOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="rot4" Storyboard.TargetProperty="Angle" BeginTime="0:0:1.80" Duration="0:0:2.00" From="105" To="465">
                <DoubleAnimation.EasingFunction>
                    <QuadraticEase EasingMode="EaseInOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="rot4" Storyboard.TargetProperty="Angle" BeginTime="0:0:3.75" Duration="0:0:1.00" From="465" To="720">
                <DoubleAnimation.EasingFunction>
                    <QuadraticEase EasingMode="EaseIn"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="grd4" Storyboard.TargetProperty="Opacity" BeginTime="0:0:0.50" Duration="0:0:0.00" From="0" To="1"/>
            <DoubleAnimation Storyboard.TargetName="grd4" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.75" Duration="0:0:0.00" From="1" To="0"/>
        </Storyboard>
        <Storyboard x:Key="stb5" BeginTime="0:0:0.68" Duration="0:0:05.43" RepeatBehavior="Forever">
            <DoubleAnimation Storyboard.TargetName="rot5" Storyboard.TargetProperty="Angle" Duration="0:0:2.00" From="-100" To="80">
                <DoubleAnimation.EasingFunction>
                    <QuadraticEase EasingMode="EaseOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="rot5" Storyboard.TargetProperty="Angle" BeginTime="0:0:1.80" Duration="0:0:2.00" From="80" To="440">
                <DoubleAnimation.EasingFunction>
                    <QuadraticEase EasingMode="EaseInOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="rot5" Storyboard.TargetProperty="Angle" BeginTime="0:0:3.75" Duration="0:0:1.00" From="440" To="720">
                <DoubleAnimation.EasingFunction>
                    <QuadraticEase EasingMode="EaseIn"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="grd5" Storyboard.TargetProperty="Opacity" BeginTime="0:0:0.75" Duration="0:0:0.00" From="0" To="1"/>
            <DoubleAnimation Storyboard.TargetName="grd5" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.75" Duration="0:0:0.00" From="1" To="0"/>
        </Storyboard>
    </UserControl.Resources>
    <UserControl.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard Storyboard="{StaticResource stb1}"/>
            <BeginStoryboard Storyboard="{StaticResource stb2}"/>
            <BeginStoryboard Storyboard="{StaticResource stb3}"/>
            <BeginStoryboard Storyboard="{StaticResource stb4}"/>
            <BeginStoryboard Storyboard="{StaticResource stb5}"/>
        </EventTrigger>
    </UserControl.Triggers>
    <Grid>
        <Grid x:Name="grd1" Width="50" Height="50" Opacity="0">
            <Grid.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="rot1" Angle="0" CenterX="25" CenterY="25"/>
                </TransformGroup>
            </Grid.RenderTransform>
            <Ellipse Width="6" Height="6" Fill="{Binding ElementName=uclLoad,Path=Foreground}">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X="0" Y="18"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Grid>
        <Grid x:Name="grd2" Width="50" Height="50" Opacity="0">
            <Grid.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="rot2" Angle="0" CenterX="25" CenterY="25"/>
                </TransformGroup>
            </Grid.RenderTransform>
            <Ellipse Width="6" Height="6" Fill="{Binding ElementName=uclLoad,Path=Foreground}">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X="0" Y="18"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Grid>
        <Grid x:Name="grd3" Width="50" Height="50" Opacity="0">
            <Grid.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="rot3" Angle="0" CenterX="25" CenterY="25"/>
                </TransformGroup>
            </Grid.RenderTransform>
            <Ellipse Width="6" Height="6" Fill="{Binding ElementName=uclLoad,Path=Foreground}">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X="0" Y="18"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Grid>
        <Grid x:Name="grd4" Width="50" Height="50" Opacity="0">
            <Grid.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="rot4" Angle="0" CenterX="25" CenterY="25"/>
                </TransformGroup>
            </Grid.RenderTransform>
            <Ellipse Width="6" Height="6" Fill="{Binding ElementName=uclLoad,Path=Foreground}">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X="0" Y="18"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Grid>
        <Grid x:Name="grd5" Width="50" Height="50" Opacity="0">
            <Grid.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="rot5" Angle="0" CenterX="25" CenterY="25"/>
                </TransformGroup>
            </Grid.RenderTransform>
            <Ellipse Width="6" Height="6" Fill="{Binding ElementName=uclLoad,Path=Foreground}">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X="0" Y="18"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Grid>
    </Grid>
</UserControl>

 直接放到STA线程去不怕主线程卡顿了 美滋滋