WPF 加载等待动画

 

效果图如下:(喜欢的点个赞)

 主要运用矩阵路径移动方法,不同小球设置不用加速度:(代码如下).可自行将路径由直线改为圆形.

<Viewbox>
        <Grid>
            <Grid.Resources>
                <PathGeometry Figures="M0,0 200,0" x:Key="path"/>
                <Style x:Key="EllipseStyle" TargetType="Ellipse">
                    <Setter Property="Width" Value="10"/>
                    <Setter Property="Height" Value="10"/>
                    <Setter Property="HorizontalAlignment" Value="Left"/>
                    <Setter Property="VerticalAlignment" Value="Top"/>
                    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
                </Style>
            </Grid.Resources>
            <Ellipse   Fill="Red" Style="{StaticResource EllipseStyle}">
                <Ellipse.RenderTransform>
                    <MatrixTransform x:Name="MyTranslateTransform">
                        <MatrixTransform.Matrix>
                            <Matrix OffsetX="0" OffsetY="0" />
                        </MatrixTransform.Matrix>
                    </MatrixTransform>
                </Ellipse.RenderTransform>
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Loaded">
                        <BeginStoryboard>
                            <Storyboard >
                                <MatrixAnimationUsingPath Storyboard.TargetName="MyTranslateTransform"  AccelerationRatio="0.5"    IsAdditive="True" Duration="0:0:3" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetProperty="Matrix" PathGeometry="{StaticResource path}"/>
                                <MatrixAnimationUsingPath Storyboard.TargetName="MyTranslateTransform1"  AccelerationRatio="0.3"   IsAdditive="True" Duration="0:0:3" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetProperty="Matrix" PathGeometry="{StaticResource path}"/>
                                <MatrixAnimationUsingPath Storyboard.TargetName="MyTranslateTransform2"  AccelerationRatio="0.25"  IsAdditive="True" Duration="0:0:3" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetProperty="Matrix" PathGeometry="{StaticResource path}"/>
                                <MatrixAnimationUsingPath Storyboard.TargetName="MyTranslateTransform3"  AccelerationRatio="0.2"   IsAdditive="True" Duration="0:0:3" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetProperty="Matrix" PathGeometry="{StaticResource path}"/>
                                <MatrixAnimationUsingPath Storyboard.TargetName="MyTranslateTransform4"  AccelerationRatio="0"    IsAdditive="True" Duration="0:0:3" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetProperty="Matrix" PathGeometry="{StaticResource path}"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>
            <Ellipse Style="{StaticResource EllipseStyle}"  Fill="Green" > 
                <Ellipse.RenderTransform>
                    <MatrixTransform x:Name="MyTranslateTransform1">
                        <MatrixTransform.Matrix>
                            <Matrix OffsetX="10" OffsetY="0" />
                        </MatrixTransform.Matrix>
                    </MatrixTransform>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse Style="{StaticResource EllipseStyle}"  Fill="Blue" >
                <Ellipse.Effect >
                    <DropShadowEffect Color="Transparent" BlurRadius="20" Direction="0" ShadowDepth="0"/>
                </Ellipse.Effect>
                <Ellipse.RenderTransform>
                    <MatrixTransform x:Name="MyTranslateTransform2">
                        <MatrixTransform.Matrix>
                            <Matrix OffsetX="20" OffsetY="0" />
                        </MatrixTransform.Matrix>
                    </MatrixTransform>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse Style="{StaticResource EllipseStyle}"  Fill="Green" >
                <Ellipse.RenderTransform>
                    <MatrixTransform x:Name="MyTranslateTransform3">
                        <MatrixTransform.Matrix>
                            <Matrix OffsetX="30" OffsetY="0" />
                        </MatrixTransform.Matrix>
                    </MatrixTransform>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse Style="{StaticResource EllipseStyle}"  Fill="Blue" >
                <Ellipse.RenderTransform>
                    <MatrixTransform x:Name="MyTranslateTransform4">
                        <MatrixTransform.Matrix>
                            <Matrix OffsetX="40" OffsetY="0" />
                        </MatrixTransform.Matrix>
                    </MatrixTransform>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Grid>
    </Viewbox>