动画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> 

但动画所有这些行开始在同一时间和结束在不同time.Animation结束后一个another.I不知道如何持续时间已经采取了每一行。

任何人都可以告诉我动画多行具有相同的持续时间？

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> 

你可以阅读更多关于动画使用关键帧here..