WPF炫酷科技感的加载动画

WPF炫酷科技感的加载动画

使用多个圆形和圆环叠加实现，最后给整个控件添加SkewTransform 变形实现。
圆环使用Microsoft.Expression.Drawing.dll库中的Arc绘制。
可以在Nuget中搜索“Microsoft.Expression.Drawing.dll”获得该dll。

<UserControl x:Class="TDS.Controls.UserControl9"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:ed="clr-namespace:Microsoft.Expression.Shapes;assembly=Microsoft.Expression.Drawing"
             xmlns:local="clr-namespace:TDS.Controls"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Effect>
        <DropShadowEffect Color="#FF6DFFFF" Direction="-45" ShadowDepth="2" BlurRadius="8"/>
    </UserControl.Effect>
    <UserControl.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard RepeatBehavior="Forever">
                    <DoubleAnimation From="0" To="360" Storyboard.TargetProperty="RenderTransform.Children[0].Angle" Storyboard.TargetName="ellispe1"/>
                    <DoubleAnimation From="0" To="360" Storyboard.TargetProperty="RenderTransform.Children[0].Angle" Storyboard.TargetName="arc1"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </UserControl.Triggers>
    <Grid>
        <Grid.RenderTransform>
            <TransformGroup>
                <SkewTransform AngleX="-45"/>
            </TransformGroup>
        </Grid.RenderTransform>
        <Ellipse Stroke="{StaticResource AccentBrush}" StrokeThickness="1" RenderTransformOrigin="0.5,0.5">
        </Ellipse>

        <Ellipse Stroke="{StaticResource AccentBrush}" Margin="16" StrokeThickness="1" RenderTransformOrigin="0.5,0.5">
        </Ellipse>

        <Ellipse Stroke="{StaticResource AccentBrushDark}" Margin="28" RenderTransformOrigin="0.5,0.5">
        </Ellipse>

        <Ellipse x:Name="ellispe1" StrokeDashArray="0.2,1" Margin="6" StrokeThickness="6" RenderTransformOrigin="0.5,0.5">
            <Ellipse.Stroke>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#CE3AFAEE"/>
                    <GradientStop Color="#6B25C185" Offset="0.2"/>
                    <GradientStop Color="Transparent" Offset="1"/>
                </LinearGradientBrush>
            </Ellipse.Stroke>
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <RotateTransform Angle="45"/>
                </TransformGroup>
            </Ellipse.RenderTransform>
        </Ellipse>

        <ed:Arc x:Name="arc1" StartAngle="0" EndAngle="135" ArcThickness="5" Margin="16" Stretch="None" RenderTransformOrigin="0.5,0.5">
            <ed:Arc.Fill>
                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <GradientStop Color="Transparent" Offset="0"/>
                    <GradientStop Color="#F1EEEEEE" Offset="1"/>
                </LinearGradientBrush>
            </ed:Arc.Fill>
            <ed:Arc.RenderTransform>
                <TransformGroup>
                    <RotateTransform Angle="45"/>
                    <TranslateTransform X="-32" Y="-22"/>
                </TransformGroup>
            </ed:Arc.RenderTransform>
        </ed:Arc>

        <Ellipse Stroke="{StaticResource AccentBrush}" Margin="18" StrokeThickness="1" RenderTransformOrigin="0.5,0.5">
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <TranslateTransform X="-32" Y="-22"/>
                </TransformGroup>
            </Ellipse.RenderTransform>
        </Ellipse>
    </Grid>
</UserControl>