我正在为WPF应用程序进行倒计时控制。以下xaml演示了我的目标：
<Canvas>
<Canvas>
<Ellipse Width="110" Height="110" Fill="Black" Canvas.Left="95" Canvas.Top="95" />
<Ellipse Width="100" Height="100" Fill="Red" Canvas.Left="100" Canvas.Top="100" />
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="72" Canvas.Left="131" Canvas.Top="100">3</TextBlock>
</Canvas>
<Canvas>
<Path Stroke="Blue" Fill="White">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="150,150">
<LineSegment Point="200,150" />
<ArcSegment x:Name="arc1" Point="200,150" Size="50,50" SweepDirection="Clockwise" />
<ArcSegment x:Name="arc2" Point="200,150" Size="50,50" SweepDirection="Clockwise" />
<LineSegment Point="150,150" />
</PathFigure>
</PathGeometry>
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard Duration="0:0:1" Storyboard.TargetProperty="Point" RepeatBehavior="Forever">
<PointAnimationUsingPath Duration="0:0:0.5" Storyboard.TargetName="arc1">
<PointAnimationUsingPath.PathGeometry>
<PathGeometry>
<PathFigure StartPoint="200,150">
<ArcSegment Size="50,50" Point="100,150" SweepDirection="Clockwise" />
</PathFigure>
</PathGeometry>
</PointAnimationUsingPath.PathGeometry>
</PointAnimationUsingPath>
<PointAnimationUsingPath Duration="0:0:0.5" Storyboard.TargetName="arc2">
<PointAnimationUsingPath.PathGeometry>
<PathGeometry>
<PathFigure StartPoint="200,150">
<ArcSegment Size="50,50" Point="100,150" SweepDirection="Clockwise" />
</PathFigure>
</PathGeometry>
</PointAnimationUsingPath.PathGeometry>
</PointAnimationUsingPath>
<PointAnimationUsingPath BeginTime="0:0:0.5" Duration="0:0:0.5" Storyboard.TargetName="arc2">
<PointAnimationUsingPath.PathGeometry>
<PathGeometry>
<PathFigure StartPoint="100,150">
<ArcSegment Size="50,50" Point="200,150" SweepDirection="Clockwise" />
</PathFigure>
</PathGeometry>
</PointAnimationUsingPath.PathGeometry>
</PointAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Canvas>
</Canvas>
现在，我不想把整个事情变成白色，而是想“揭示”倒计时中的下一个数字。我认为使用OpacityMask会起作用，但是当我尝试时，事情变得奇怪了。这是我正在研究的xaml：
<Canvas>
<Canvas>
<Ellipse Width="110" Height="110" Fill="Black" Canvas.Left="95" Canvas.Top="95" />
<Ellipse Width="100" Height="100" Fill="Red" Canvas.Left="100" Canvas.Top="100" />
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="72" Canvas.Left="131" Canvas.Top="100">3</TextBlock>
</Canvas>
<Canvas>
<Ellipse Width="110" Height="110" Fill="Black" Canvas.Left="95" Canvas.Top="95" />
<Ellipse Width="100" Height="100" Fill="Yellow" Canvas.Left="100" Canvas.Top="100" />
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="72" Canvas.Left="131" Canvas.Top="100">2</TextBlock>
<Canvas.OpacityMask>
<VisualBrush>
<VisualBrush.Visual>
<Path Stroke="Blue" Fill="White">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="150,150">
<LineSegment Point="200,150" />
<ArcSegment x:Name="arc1" Point="200,150" Size="50,50" SweepDirection="Clockwise" />
<ArcSegment x:Name="arc2" Point="200,150" Size="50,50" SweepDirection="Clockwise" />
<LineSegment Point="150,150" />
</PathFigure>
</PathGeometry>
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard Duration="0:0:10" Storyboard.TargetProperty="Point" RepeatBehavior="Forever">
<PointAnimationUsingPath Duration="0:0:5" Storyboard.TargetName="arc1">
<PointAnimationUsingPath.PathGeometry>
<PathGeometry>
<PathFigure StartPoint="200,150">
<ArcSegment Size="50,50" Point="100,150" SweepDirection="Clockwise" />
</PathFigure>
</PathGeometry>
</PointAnimationUsingPath.PathGeometry>
</PointAnimationUsingPath>
<PointAnimationUsingPath Duration="0:0:5" Storyboard.TargetName="arc2">
<PointAnimationUsingPath.PathGeometry>
<PathGeometry>
<PathFigure StartPoint="200,150">
<ArcSegment Size="50,50" Point="100,150" SweepDirection="Clockwise" />
</PathFigure>
</PathGeometry>
</PointAnimationUsingPath.PathGeometry>
</PointAnimationUsingPath>
<PointAnimationUsingPath BeginTime="0:0:5" Duration="0:0:5" Storyboard.TargetName="arc2">
<PointAnimationUsingPath.PathGeometry>
<PathGeometry>
<PathFigure StartPoint="100,150">
<ArcSegment Size="50,50" Point="200,150" SweepDirection="Clockwise" />
</PathFigure>
</PathGeometry>
</PointAnimationUsingPath.PathGeometry>
</PointAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</VisualBrush.Visual>
</VisualBrush>
</Canvas.OpacityMask>
</Canvas>
</Canvas>
我不确定如何描述正在发生的事情，或者为什么它以这种方式表现，但它不是我想要的，也不是我所期望的。我有什么简单的遗失吗？或者任何人都可以提供一种可以实现我想要的替代方法吗？
答案 0 :(得分：0)
我发现了这个问题。它与我用于创建不透明蒙版的可视笔刷的视口/视图框相关。以下是相关的变化：
<Canvas.OpacityMask>
<VisualBrush Viewbox="0,0,300,300" ViewboxUnits="Absolute" Viewport="0,0,300,300" ViewportUnits="Absolute"> ...
我不是WPF的专家，但我对错误的理解如下。画笔的默认视口从边界容器的左上角开始。在我的例子中，边界容器是我动画的路径。在动画期间，容器的左上角正在变化。构成路径的不同段是相对于这个变化的左上角定义的。基本上，它们是相对于移动目标绘制的。视图框设置用于指示我们希望使用与其使用的相同坐标系统来处理整个原始视觉效果。
如果您对可以提供更明确解释的内容有更好的了解，请随时编辑此答案或添加评论。