动画路径已被切断

我正在尝试制作一个动画的路径,该路径看起来似乎是无限的。 路径绘制在按钮的顶部,但是问题在于,当路径移动时,您看不到所有路径,只是在按钮的宽度处切开了。 这里要演示的是图片:

动画路径已被切断

路径非常简单,并排有10条对角线。

故事板:

   <Storyboard x:Key="StoryboardPath" RepeatBehavior="Forever">
      <DoubleAnimationUsingPath Duration="0:0:0:1" 
                              Source="X" 
                              Storyboard.TargetProperty="(TranslateTransform.X)" 
                              Storyboard.TargetName="pathTranslateTranform">
         <DoubleAnimationUsingPath.PathGeometry>
            <PathGeometry Figures="M-120,0 L0,0"/>
         </DoubleAnimationUsingPath.PathGeometry>
      </DoubleAnimationUsingPath>
   </Storyboard>

按钮的数据模板:

   <DataTemplate DataType="{x:Type controls:Button}">
      <Grid ClipToBounds="True">
         <Button Content="Test Button"/>
         <Path x:Name="busyIndicator"
               Fill="Brown">
            <Path.RenderTransform>
               <TransformGroup>
                  <TranslateTransform x:Name="pathTranslateTranform"/>
               </TransformGroup>
            </Path.RenderTransform>
            <Path.Data>
               M 0 0   l 20 0   l 80 100   l -20 0 z
               M 40 0  l 20 0   l 80 100   l -20 0 z
               M 80 0  l 20 0   l 80 100   l -20 0 z
               M 120 0 l 20 0   l 80 100   l -20 0 z
               M 160 0 l 20 0   l 80 100   l -20 0 z
               M 200 0 l 20 0   l 80 100   l -20 0 z
               M 240 0 l 20 0   l 80 100   l -20 0 z
               M 280 0 l 20 0   l 80 100   l -20 0 z
               M 320 0 l 20 0   l 80 100   l -20 0 z
               M 360 0 l 20 0   l 80 100   l -20 0 z
               M 400 0 l 20 0   l 80 100   l -20 0 z
            </Path.Data>
         </Path>
      </Grid>

      <DataTemplate.Triggers>
         <DataTrigger Binding="{Binding IsBusy.Value}" Value="False">
            <DataTrigger.Enteractions>
               <BeginStoryboard>
                  <Storyboard>
                     <StaticResource ResourceKey="StoryboardPath"/>
                  </Storyboard>
               </BeginStoryboard>
            </DataTrigger.Enteractions>
         </DataTrigger>
      </DataTemplate.Triggers>
   </DataTemplate>
littlejade 回答:动画路径已被切断

这是我找到的解决方案:
在右侧放置负的Margin值可解决此问题。
所以这对我有用:

<Path x:Name="busyIndicator"
        Visibility="{Binding Visibility}"
        Fill="Red"
        Opacity="0.2"
        Margin="0,-160,0">
...
</Path>

如果任何人都感兴趣,要使动画无缝,我必须调整StoryBoard。
将顶部的替换为:

<PathGeometry Figures="M-160,0 L-80,0"/>

结果如下:
Solution

这里是gif,显示了动画的外观:
https://i.imgur.com/TrrhboT.gifv

本文链接:https://www.f2er.com/3145402.html

大家都在问