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>

您可以阅读有关动画使用关键帧here..

的更多信息

动画WPF路径

1 个答案: