是否可以在 Silverlight 中为 PolyLineSegment 设置动画，即 PointCollection？答案

【问题标题】：Is it possible to animate a PolyLineSegment in Silverlight, i.e. the PointCollection?是否可以在 Silverlight 中为 PolyLineSegment 设置动画，即 PointCollection？
【发布时间】：2011-01-03 05:29:37
【问题描述】：

我正在用PathGeometry 中的菱形PolyLineSegment 剪裁我的画布。我正在尝试为它的 PointCollection 设置动画，但似乎无法解析 TargetProperty。这是所有谷歌发现的唯一其他参考资料，这几乎就是我想要做的事情，同样PropertyPath：http://forums.silverlight.net/forums/p/22239/78225.aspx

是否有可能从 PointCollection 获取 Point 以更改动画中的值？

【问题讨论】：

标签： silverlight animation pathgeometry

【解决方案1】：

不幸的是，我认为 Polyline.Points 无法设置动画...

这些点对象来自“System.Windows.Point”，问题是它们的“X”和“Y”属性不是依赖属性。不幸的是，无法使用 DoubleAnimation 为不是依赖属性的属性设置动画。

在您提供的示例中，动画基于 PathFigure Segment（具有依赖属性）而不是 System.Windows.Point。

如果你想为它们设置动画，我会尽量避免在你的路径中使用 PolyLineSegement。

【讨论】：

【解决方案2】：

您可以像这样为点集合设置动画：

      <Canvas Background="Tan" Width="100" Height="300" Margin="5,0,0,0">
        <Path Stroke="RosyBrown" StrokeThickness="4" >
          <Path.Data>
            <PathGeometry>
              <PathGeometry.Figures>
                <PathFigure StartPoint="5,50">
                  <PolyLineSegment x:Name="PLS" ></PolyLineSegment>
                </PathFigure>
              </PathGeometry.Figures>
            </PathGeometry>
          </Path.Data>
        </Path>
        <Canvas.Triggers>
          <EventTrigger RoutedEvent="Canvas.Loaded" >
            <BeginStoryboard>
              <Storyboard x:Name="sbPathUpDown" BeginTime="0:0:0">
                <ObjectAnimationUsingKeyFrames x:Name="objAni"
                                  Duration="0:0:2"
                                 AutoReverse="True"  RepeatBehavior="Forever"
                                  Storyboard.TargetName="PLS"
                                  Storyboard.TargetProperty="Points"  >
                  <DiscreteObjectKeyFrame Value="10,50 90,50" KeyTime="0:0:0.05"></DiscreteObjectKeyFrame>
                  <DiscreteObjectKeyFrame Value="10,60 90,50" KeyTime="0:0:0.5"></DiscreteObjectKeyFrame>
                  <DiscreteObjectKeyFrame Value="10,70 105,50" KeyTime="0:0:0.9"></DiscreteObjectKeyFrame>
                  <DiscreteObjectKeyFrame Value="10,60 100,40" KeyTime="0:0:1.2"></DiscreteObjectKeyFrame>
                  <DiscreteObjectKeyFrame Value="10,50 100,50" KeyTime="0:0:1.5"></DiscreteObjectKeyFrame>
                  <DiscreteObjectKeyFrame Value="10,60 90,50" KeyTime="0:0:1.7" ></DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Canvas.Triggers>
      </Canvas>

（动画一些线点 - 看起来很糟糕，但说明了点：o）

如果您想计算点并使其更平滑等，您可以在代码中填写：

  objAni.KeyFrames.Clear();
  double offsetx = 10.0; double offsety = 50;
  double w = 40; double h = 40;
  for (int i = 0; i < 20; i++)
  {
    var scale = i * 0.1;
    var ww = w * scale;
    var hh = h * scale;
    var pts = new PointCollection();
    pts.Add(new Point(offsetx, offsety));
    pts.Add(new Point(offsetx + ww, offsety));
    pts.Add(new Point(offsetx + ww, offsety + hh));
    pts.Add(new Point(offsetx, offsety + hh));
    pts.Add(new Point(offsetx, offsety));

    objAni.KeyFrames.Add(new DiscreteObjectKeyFrame { Value = pts, KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(i / 10.0)) });
  }

绘制一个改变大小的框 - 您可以在其中添加任何点并获得或多或少想要的效果。

【讨论】：

有了这个，对你的身材进行类似变形的改变应该很容易。使用变换更容易缩放和旋转。