Indeterminate ProgressRing动画如何运作？

Question

我试图了解Progress Ring动画的工作原理。我想为Windows 7进度条创建类似的东西，我不能使用第三方风格，我需要自己创建它。 This is the style我正在寻找我工作的基础。

ProgressRing的模板有一个网格，画布内有6个椭圆。 这里有一个椭圆的画布

<Canvas RenderTransformOrigin=".5,.5">
    <Canvas.RenderTransform>
        <RotateTransform x:Name="E1R" />
    </Canvas.RenderTransform>
    <Ellipse x:Name="E1" Style="{StaticResource ProgressRingEllipseStyle}"
             Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}"
             Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}"
             Margin="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseOffset}"
             Fill="{TemplateBinding Foreground}"/>
</Canvas>

我知道RenderTransformOrigin=".5,.5"已设置，因此动画与容器的中心对齐，因此椭圆会旋转居中。

动画本身有两个部分，首先是椭圆的不透明度随时间的变化。

<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="E1"
Storyboard.TargetProperty="Opacity"
BeginTime="0">
    <DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
    <DiscreteDoubleKeyFrame KeyTime="0:0:3.21" Value="1" />
    <DiscreteDoubleKeyFrame KeyTime="0:0:3.22" Value="0" />
    <DiscreteDoubleKeyFrame KeyTime="0:0:3.47" Value="0" />
</DoubleAnimationUsingKeyFrames>

然后改变角度：

<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="E1R"
BeginTime="0"
Storyboard.TargetProperty="Angle">
    <SplineDoubleKeyFrame KeyTime="0" Value="-110" KeySpline="0.13,0.21,0.1,0.7"/>
    <SplineDoubleKeyFrame KeyTime="0:0:0.433" Value="10" KeySpline="0.02,0.33,0.38,0.77"/>
    <SplineDoubleKeyFrame KeyTime="0:0:1.2" Value="93"/>
    <SplineDoubleKeyFrame KeyTime="0:0:1.617" Value="205" KeySpline="0.57,0.17,0.95,0.75"/>
    <SplineDoubleKeyFrame KeyTime="0:0:2.017" Value="357" KeySpline="0,0.19,0.07,0.72"/>
    <SplineDoubleKeyFrame KeyTime="0:0:2.783" Value="439"/>
    <SplineDoubleKeyFrame KeyTime="0:0:3.217" Value="585" KeySpline="0,0,0.95,0.37"/>
</DoubleAnimationUsingKeyFrames>

我的理解是这个动画会超时改变角度，而KeySpline告诉WPF Bezier曲线的点加速运动。

但是，我看不出一般动画的半径是如何决定的。 通过微调，您可以使this style上的动画与WPF ProgressBar一起使用，然后如果设置如下：

 <ProgressBar x:Name="Progress" Width="100" Height="100" Background="Aquamarine" IsIndeterminate="True">

您可以看到Ellipses围绕ProgressBar的100x100 Square旋转。

我不知道如何决定使用什么Radius，我觉得我错过了一些非常明显的东西。我想让动画太阳订阅100x100 Box，而不是让动画跟随的曲线走出它的边界。 我怎样才能做到这一点？如何确定半径？

Answer 1

我不熟悉动画，所以我可能只会让事情变得更糟。但由于它使用围绕正方形中心的旋转，半径应该是从原始椭圆到中心的距离。它看起来像是＆＃34; set＆＃34;这里：

ld-linux.so

我猜测这会将第一个椭圆放在角落里，使其在正方形外旋转。你希望它设置在一边以保持它。我猜测 Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}" Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}" Margin="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseOffset}" 确定了它的位置。