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