Question

所以我有一个项目，我正在制作一个项目列表，可以扩展以显示其他信息。到目前为止，我已经想出了一种方法将角度旋转180度，以指示信息面板是打开还是关闭，但我觉得它看起来有点人为。 Gif demonstration here.理想情况下，我希望我的角度（＆lt;）变成指向相反的方向。所以让我们说坐标是-5,0 0,5和5,0（红色）我想动画它们到-5,5 0,0和5,5（蓝色）。

我使用像animation / path / morph / storyboard这样的关键字一直在谷歌上搜索一段时间。我现在的理论是，可以有一种方法可以单独命名Path数据中的每个点，并为它们添加样式，它们将根据公共数据触发器移动位置。目前，它们全部连接如下所示，并且它们都链接到附加到Path的样式。我更愿意在XAML中完成所有这些，所以任何帮助都表示赞赏。

<DataTrigger Binding="{Binding RevealAdditionalInformation}" Value="False">
  <DataTrigger.EnterActions>
    <StopStoryboard BeginStoryboardName="ArrowPointUp"/>
    <BeginStoryboard Name="ArrowPointDown">
      <Storyboard>
        <DoubleAnimation Storyboard.TargetProperty="(LayoutTransform).(RotateTransform.Angle)" From="180" To="0" Duration="0:0:0.6"/>
      </Storyboard>
    </BeginStoryboard>
  </DataTrigger.EnterActions>
</DataTrigger>

更新：

我一直试图找到一种新方法来绘制我的路径，而不仅仅是 <Path Data="m 0 0 5 5 5 -5">。所以现在我以不同的方式写出相同的形状。也许这会更容易分别操纵每个点。这里存在的问题是我不允许使用Name="Something"来命名这些点，因此很难访问它们。

<Path Stroke="Black" StrokeThickness="1" Grid.Column="1">
  <Path.Data>
    <PathGeometry>
      <PathGeometry.Figures>
        <PathFigureCollection>
          <PathFigure IsClosed="False" StartPoint="0,0">
            <PathFigure.Segments>
              <PathSegmentCollection>
                <LineSegment Point="5,5" />
                  <LineSegment Point="10,0" />
                </PathSegmentCollection>
              </PathFigure.Segments>
            </PathFigure>
          </PathFigureCollection>
        </PathGeometry.Figures>
      </PathGeometry>
    </Path.Data>
  </Path>

更新2 ：

<DataTrigger Binding="{Binding RevealAdditionalInformation}" Value="True">
  <DataTrigger.EnterActions>
    <BeginStoryboard Name="AnimateTrue">
      <Storyboard>
        <PointAnimationUsingPath Duration="0:0:0.5" Storyboard.TargetProperty="Figures">
          <PointAnimationUsingPath.PathGeometry>
            <PathGeometry Figures="m -5 0 0 5 5 0"/>
          </PointAnimationUsingPath.PathGeometry>
        </PointAnimationUsingPath>
      </Storyboard>
    </BeginStoryboard>
  </DataTrigger.EnterActions>
</DataTrigger>

这是我一直在试验的另一个问题，这里的问题似乎是Storyboard.Target属性，可能不需要另外一种类型的动画。我正在尝试此操作的路径是这样的，其中FiguresTest是使用上述数据触发器的样式。

<Path x:Name="_testPath" Stroke="Black" StrokeThickness="1" Style="{StaticResource FiguresTest}">
  <Path.Data>
    <PathGeometry Figures="m -5 5 0 0 5 5"/>
  </Path.Data>
</Path>

Answer 1

您可以为Path上的各个点制作动画。为此，您需要以一种方式定义Path，其中您想要动画的每个点都是命名元素的属性。这当然会导致更详细的定义，但可以获得您所追求的内容。例如：

<Path Stroke="Black" StrokeThickness="1">
    <Path.Data>
        <PathGeometry>
            <PathFigure x:Name="Figure" StartPoint="-5,5">
                <LineSegment x:Name="Line1" Point="0,0" />
                <LineSegment x:Name="Line2" Point="5,5" />
            </PathFigure>
        </PathGeometry>
    </Path.Data>
</Path>

然后动画看起来像这样：

<BeginStoryboard Name="AnimateTrue">
    <Storyboard>
        <PointAnimation To="-5,0" Duration="0:0:0.5"
                        Storyboard.TargetName="Figure"
                        Storyboard.TargetProperty="StartPoint" />
        <PointAnimation To="0,5" Duration="0:0:0.5"
                        Storyboard.TargetName="Line1"
                        Storyboard.TargetProperty="Point" />
        <PointAnimation To="5,0" Duration="0:0:0.5"
                        Storyboard.TargetName="Line2"
                        Storyboard.TargetProperty="Point" />
    </Storyboard>
</BeginStoryboard>

修改

由于您正在努力让事情发挥作用，以下是Path是ToggleButton模板一部分的示例。它似乎是一个很好的选择，因为它将用于切换扩展状态。

<ToggleButton> <ToggleButton.Template> <ControlTemplate TargetType="{x:Type ToggleButton}"> <ControlTemplate.Resources> <Duration x:Key="AnimationDuration">0:0:0.2</Duration> </ControlTemplate.Resources> <Border Background="Transparent"> <Path Stroke="Black" StrokeThickness="1" Width="10" Height="5"> <Path.Data> <PathGeometry> <PathFigure x:Name="Figure" StartPoint="0,0"> <LineSegment x:Name="Line1" Point="5,5" /> <LineSegment x:Name="Line2" Point="10,0" /> </PathFigure> </PathGeometry> </Path.Data> </Path> </Border> <ControlTemplate.Triggers> <Trigger Property="IsChecked" Value="True"> <Trigger.EnterActions> <BeginStoryboard Name="ToggleOn"> <Storyboard> <PointAnimation To="0,5" Duration="{StaticResource AnimationDuration}" Storyboard.TargetName="Figure" Storyboard.TargetProperty="StartPoint" /> <PointAnimation To="5,0" Duration="{StaticResource AnimationDuration}" Storyboard.TargetName="Line1" Storyboard.TargetProperty="Point" /> <PointAnimation To="10,5" Duration="{StaticResource AnimationDuration}" Storyboard.TargetName="Line2" Storyboard.TargetProperty="Point" /> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard Name="ToggleOff"> <Storyboard> <PointAnimation Duration="{StaticResource AnimationDuration}" Storyboard.TargetName="Figure" Storyboard.TargetProperty="StartPoint" /> <PointAnimation Duration="{StaticResource AnimationDuration}" Storyboard.TargetName="Line1" Storyboard.TargetProperty="Point" /> <PointAnimation Duration="{StaticResource AnimationDuration}" Storyboard.TargetName="Line2" Storyboard.TargetProperty="Point" /> </Storyboard> </BeginStoryboard> </Trigger.ExitActions> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </ToggleButton.Template> </ToggleButton>

请注意，动画仅由ToggleButton.IsChecked属性触发（与绑定到视图模型属性的数据触发器相反），因此此控件可能是可重用的（我建议您先将模板移动到样式中）。唯一要做的就是正确绑定ToggleButton.IsChecked属性。

WPF XAML使用Storyboard

1 个答案: