对 WPF 路径进行动画处理

Question

我用<controlTemplate>画了多条线，我正在尝试以特定的持续时间同时对所有这些线进行动画处理（这里我将 50 秒设置为持续时间），如下所示。

   <ControlTemplate TargetType="{x:Type srcview:myView}">
        <Canvas>
             <Path x:Name="path"  Data="{TemplateBinding PathData}" Stroke="red" StrokeThickness="2" StrokeDashOffset="{TemplateBinding StrokeDashOffset}" StrokeDashArray="{TemplateBinding StrokeDashArray}">
                 <Path.Triggers>
                     <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                          <BeginStoryboard>
                               <Storyboard >
                                   <DoubleAnimation From="220" To="0" Duration="00:00:50" Storyboard.TargetProperty="(Shape.StrokeDashOffset)"/>
                               </Storyboard>
                          </BeginStoryboard>
                     </EventTrigger>
                 </Path.Triggers>
             </Path>
        </Canvas>
   </ControlTemplate>

但是所有这些台词的动画同时开始，在不同的时间结束。动画一个接一个地结束。我不知道每行的持续时间是如何计算的。

谁能告诉我以相同的持续时间为多行制作动画的方法？

Answer 1

您可以使用关键帧进行动画。

     <ControlTemplate TargetType="{x:Type srcview:myView}">
        <Canvas>
            <Path x:Name="path"  Data="{TemplateBinding PathData}" Stroke="red" StrokeThickness="2" StrokeDashOffset="{TemplateBinding StrokeDashOffset}" StrokeDashArray="{TemplateBinding StrokeDashArray}">
                <Path.Triggers>
                    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                        <BeginStoryboard>
                            <Storyboard >
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.StrokeDashOffset)" Duration="00:00:50">
                                    <LinearDoubleKeyFrame Value="220" KeyTime="0:0:0:0" />
                                    <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0:50" />
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Path.Triggers>
            </Path>
        </Canvas>
    </ControlTemplate>

您可以在此处阅读有关使用关键帧的动画的更多信息。