WPF 自己画图实现动画旋转Loading

发布时间 2023-09-08 19:22:15作者: 潇潇烟雨

实现效果图:

 

1、创建一个用户控件,实现动画旋转:

<UserControl x:Class="K.Controls.Controls.LoadingWait"
             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:local="clr-namespace:K.Controls.Controls"
             mc:Ignorable="d" 
             >
    <UserControl.Background>
        <SolidColorBrush Color="Transparent"/>
        
    </UserControl.Background>
    <Grid Width="36" Height="36">
        <Grid.Resources>
            <DrawingBrush x:Key="brush" Stretch="None" AlignmentX="Center" AlignmentY="Top">
                <DrawingBrush.Drawing>
                    <GeometryDrawing Brush="{DynamicResource LoadingWaitBrush}">
                        <GeometryDrawing.Geometry>
                            <EllipseGeometry RadiusX="2" RadiusY="7"/>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </Grid.Resources>

        <Rectangle x:Name="r01" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="0"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="r02" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="30"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="r03" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="60"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="r04" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="90"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="r05" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="120"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="r06" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="150"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="r07" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="180"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="r08" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="210"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="r09" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="240"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="r10" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="270"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="r11" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="300"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="r12" Fill="{StaticResource brush}" Opacity="1" RenderTransformOrigin="0.5,0.5">
            <Rectangle.RenderTransform>
                <RotateTransform Angle="330"/>
            </Rectangle.RenderTransform>
        </Rectangle>

        <Grid.Triggers>
            <EventTrigger RoutedEvent="Grid.Loaded">
                <BeginStoryboard>
                    <Storyboard RepeatBehavior="Forever">
                        <DoubleAnimation Storyboard.TargetName="r01" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.00000" To="0"/>
                        <DoubleAnimation Storyboard.TargetName="r02" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.08333" To="0"/>
                        <DoubleAnimation Storyboard.TargetName="r03" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.16666" To="0"/>
                        <DoubleAnimation Storyboard.TargetName="r04" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.24999" To="0"/>
                        <DoubleAnimation Storyboard.TargetName="r05" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.33332" To="0"/>
                        <DoubleAnimation Storyboard.TargetName="r06" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.41665" To="0"/>
                        <DoubleAnimation Storyboard.TargetName="r07" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.49998" To="0"/>
                        <DoubleAnimation Storyboard.TargetName="r08" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.58331" To="0"/>
                        <DoubleAnimation Storyboard.TargetName="r09" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.66664" To="0"/>
                        <DoubleAnimation Storyboard.TargetName="r10" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.74997" To="0"/>
                        <DoubleAnimation Storyboard.TargetName="r11" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.83330" To="0"/>
                        <DoubleAnimation Storyboard.TargetName="r12" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.91663" To="0"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Grid.Triggers>
    </Grid>
</UserControl>

 

2、资源文件中设置Loading的颜色------Brush="{DynamicResource LoadingWaitBrush}"

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:cal="clr-namespace:K.Controls.Controls"
                    xmlns:o="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
                    >
   <!--加载等待-->
    <SolidColorBrush o:Freeze="True" x:Key="LoadingWaitBrush" Color="#FFFFFF"/>

</ResourceDictionary>

  

 

3、其他界面引用上述用户控件

<controls:PopupEx IsOpen="{Binding ShowLoading}" PlacementTarget="{Binding ElementName=bdMain}" Placement="Center" VerticalAlignment="Center" VerticalOffset="0" AllowsTransparency="True" StaysOpen="True">
     <Grid Background="{DynamicResource PayVipCouponsLoadingBackground}" Width="{Binding ElementName=bdMain,Path=ActualWidth}" Height="{Binding ElementName=bdMain,Path=ActualHeight}" >
           <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
                <controls:LoadingWait Width="48" Height="48"/>
                <TextBlock FontSize="26" Foreground="{DynamicResource PayVipCouponsLoadingForBrush}" VerticalAlignment="Center" HorizontalAlignment="Center" Text="请稍等,正在为您计算优惠券" Margin="15,0,0,0"/>
           </StackPanel>
     </Grid>
</controls:PopupEx>