WPF实现加载的动态效果

       

 思路：

1.创建一个画布，长宽100*100；

?

1	<Canvas Width="100" Height="100">

2.画布上创建一个圆，直径25，位于正上方中间，底色浅灰；

?

1 2 3 4 5 6 7 8

<Style TargetType="Ellipse">     <Setter Property="Width" Value="25"/>     <Setter Property="Height" Value="25"/>     <Setter Property="Fill" Value="LightGray"/>     <Setter Property="Canvas.Left" Value="37.5"/>     <Setter Property="Canvas.Top" Value="0"/>     <Setter Property="RenderTransformOrigin" Value="0.5,2"/> </Style>

3.以上圆的0.5，2为圆心进行角度旋转，旋转7次，角度为45*N，得到共8个一模一样的圆；

            <Ellipse/>
            <Ellipse>
                <Ellipse.RenderTransform>
                    <RotateTransform Angle="45"/>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse>
                <Ellipse.RenderTransform>
                    <RotateTransform Angle="90"/>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse>
                <Ellipse.RenderTransform>
                    <RotateTransform Angle="135"/>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse>
                <Ellipse.RenderTransform>
                    <RotateTransform Angle="180"/>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse>
                <Ellipse.RenderTransform>
                    <RotateTransform Angle="225"/>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse>
                <Ellipse.RenderTransform>
                    <RotateTransform Angle="270"/>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse>
                <Ellipse.RenderTransform>
                    <RotateTransform Angle="315"/>
                </Ellipse.RenderTransform>
            </Ellipse>

4.再按上述方法分别创建4个圆，旋转至上图红线中4处，底色黑色，设置不同的不透明度Opacity；

            <Ellipse x:Name="ell1" Fill="Black" Opacity="0.2">
                <Ellipse.RenderTransform>
                    <RotateTransform Angle="0"/>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse x:Name="ell2" Fill="Black" Opacity="0.4">
                <Ellipse.RenderTransform>
                    <RotateTransform Angle="45"/>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse x:Name="ell3" Fill="Black" Opacity="0.6">
                <Ellipse.RenderTransform>
                    <RotateTransform Angle="90"/>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse x:Name="ell4" Fill="Black" Opacity="0.8">
                <Ellipse.RenderTransform>
                    <RotateTransform Angle="135"/>
                </Ellipse.RenderTransform>
            </Ellipse>

5.为画布Canvas增加Load动画，不停地更改上述4个圆的角度，实现旋转的视觉效果，中间写进度或者提示文字均可；

            <Canvas.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard RepeatBehavior="Forever">
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ell1"
                                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)">
                                <DiscreteDoubleKeyFrame KeyTime="0:0:0.1" Value="45"/>
                                <DiscreteDoubleKeyFrame KeyTime="0:0:0.2" Value="90"/>
                                <DiscreteDoubleKeyFrame KeyTime="0:0:0.3" Value="135"/>
                                <DiscreteDoubleKeyFrame KeyTime="0:0:0.4" Value="180"/>
                                <DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="225"/>
                                <DiscreteDoubleKeyFrame KeyTime="0:0:0.6" Value="270"/>
                                <DiscreteDoubleKeyFrame KeyTime="0:0:0.7" Value="315"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                    //另三个不再赘述
                </EventTrigger>
            </Canvas.Triggers>  

6.Canvas放在窗体中心平时隐藏需要时调出 或 以窗口形式弹出均可；

?

1	<load:LoadingWindow x:Name="loadingWD" Visibility="Hidden"/>

需要时调出　　

?

1	loadingWD.Visibility = flag ? Visibility.Visible : Visibility.Hidden;