WPF圆动画旋转边框内容渲染

Posted 2020-09-21 X3

    <Grid>
        <Viewbox Margin="20">

            <Ellipse x:Name="ellipse1" Width="150" Height="150" StrokeThickness="10" RenderTransformOrigin="0.5,0.5">
                <Ellipse.Effect>
                    <DropShadowEffect ShadowDepth="0" BlurRadius="50" Color="Blue" />
                </Ellipse.Effect>
                <Ellipse.RenderTransform>
                    <RotateTransform x:Name="rotate1" Angle="0" />
                </Ellipse.RenderTransform>
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Loaded" SourceName="ellipse1">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard RepeatBehavior="Forever">
                                    <!--Fill-->
                                    <DoubleAnimation Storyboard.TargetName="gs31" Storyboard.TargetProperty="Offset" From="0" To="0.7" Duration="0:0:5" BeginTime="00:00:00.1" />
                                    <DoubleAnimation Storyboard.TargetName="gs32" Storyboard.TargetProperty="Offset" From="0" To="0.7" Duration="0:0:5" BeginTime="00:00:00.1" />
                                    <DoubleAnimation Storyboard.TargetName="gs41" Storyboard.TargetProperty="Offset" From="0" To="0.7" Duration="0:0:5" BeginTime="00:00:0" />
                                    <DoubleAnimation Storyboard.TargetName="gs42" Storyboard.TargetProperty="Offset" From="0" To="0.7" Duration="0:0:5" BeginTime="00:00:0"  />
                                    <DoubleAnimation Storyboard.TargetName="gs31" Storyboard.TargetProperty="Offset" From="0.7" To="1" Duration="0:0:5" BeginTime="00:00:06" />
                                    <DoubleAnimation Storyboard.TargetName="gs32" Storyboard.TargetProperty="Offset" From="0.7" To="1" Duration="0:0:5" BeginTime="00:00:06" />
                                    <DoubleAnimation Storyboard.TargetName="gs41" Storyboard.TargetProperty="Offset" From="0.7" To="1" Duration="0:0:5" BeginTime="00:00:5" />
                                    <DoubleAnimation Storyboard.TargetName="gs42" Storyboard.TargetProperty="Offset" From="0.7" To="1" Duration="0:0:5" BeginTime="00:00:5"  />
                                    <!--Stroke-->
                                    <DoubleAnimation Storyboard.TargetName="gs51" Storyboard.TargetProperty="Offset" From="0" To="0.7" Duration="0:0:5" BeginTime="00:00:00.1" />
                                    <DoubleAnimation Storyboard.TargetName="gs52" Storyboard.TargetProperty="Offset" From="0" To="0.7" Duration="0:0:5" BeginTime="00:00:00.1" />
                                    <DoubleAnimation Storyboard.TargetName="gs61" Storyboard.TargetProperty="Offset" From="0" To="0.7" Duration="0:0:5" BeginTime="00:00:0" />
                                    <DoubleAnimation Storyboard.TargetName="gs62" Storyboard.TargetProperty="Offset" From="0" To="0.7" Duration="0:0:5" BeginTime="00:00:0"  />
                                    <DoubleAnimation Storyboard.TargetName="gs51" Storyboard.TargetProperty="Offset" From="0.7" To="1" Duration="0:0:5" BeginTime="00:00:06" />
                                    <DoubleAnimation Storyboard.TargetName="gs52" Storyboard.TargetProperty="Offset" From="0.7" To="1" Duration="0:0:5" BeginTime="00:00:06" />
                                    <DoubleAnimation Storyboard.TargetName="gs61" Storyboard.TargetProperty="Offset" From="0.7" To="1" Duration="0:0:5" BeginTime="00:00:5" />
                                    <DoubleAnimation Storyboard.TargetName="gs62" Storyboard.TargetProperty="Offset" From="0.7" To="1" Duration="0:0:5" BeginTime="00:00:5"  />
                                    <!--Rotate-->
                                    <DoubleAnimation Storyboard.TargetName="rotate1" Storyboard.TargetProperty="Angle" From="0" To="360" Duration="0:0:10" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Ellipse.Triggers>
                <Ellipse.Stroke>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                        <GradientStop Offset="0" Color="Blue" />
                        <GradientStop x:Name="gs51" Offset="0" Color="Blue" />
                        <GradientStop x:Name="gs52" Offset="0" Color="Aqua" />
                        <GradientStop x:Name="gs61" Offset="0" Color="Aqua" />
                        <GradientStop x:Name="gs62" Offset="0" Color="Blue" />
                        <GradientStop Offset="1" Color="Blue" />
                    </LinearGradientBrush>
                </Ellipse.Stroke>
                <Ellipse.Fill>
                    <RadialGradientBrush>
                        <GradientStop Offset="0" Color="Blue" />
                        <GradientStop x:Name="gs31" Offset="0" Color="Blue" />
                        <GradientStop x:Name="gs32" Offset="0" Color="Aqua" />
                        <GradientStop x:Name="gs41" Offset="0" Color="Aqua" />
                        <GradientStop x:Name="gs42" Offset="0" Color="Blue" />
                        <GradientStop Offset="1" Color="Blue" />
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
        </Viewbox>
    </Grid>