UI元素的动画？

Question

我是 Windows Phone 开发的新手，所以我对 Storyboards 不是很熟悉，不知道他们是否适合我这种情况。

我有一个Canvas，我在上面放置了一个Rectangle。当我调用它的 move 方法时，我希望 Rectangle 在随机方向上平滑移动（通过处理平移和选择 x 和 y 来处理）。

我在游戏 Breakout 之前制作了一个简单的 Java 应用程序，我通过在 while 循环中将球移动到非常靠近的位置并暂停 while 循环一定量来处理球的运动，以便您可以看到球的动画窗内的动静。我想知道在这种情况下是否可以使用 while 循环来做同样的事情，因为我相信这将是我计划用我的应用程序做的最好的事情。

点击矩形时我尝试了以下操作：

private void TestRectangle_Tapped(object sender, TappedRoutedEventArgs e)
{
    int x = 1;
    while (x < 50)
    {
         double d = Canvas.GetLeft(TestRectangle);
         Canvas.SetLeft(TestRectangle, d + 1);
         TestCanvas.UpdateLayout();
         System.Threading.Tasks.Task.Delay(5).Wait();
         x++;
    }
   /*
    int y = 1;
    while(y < 200)
    {
        dragTranslation.Y += 1;
        TestCanvas.UpdateLayout();
        System.Threading.Tasks.Task.Delay(1).Wait();
        y++;
    }
    * */  
}

问题是它的更新速度不够快，所以当矩形移动时我没有得到平滑的动画，点击时它几乎跳到了它的最终位置。

我如何才能做到这一点，因为我最终希望使 Rectangle 在屏幕周围随机移动并与 Canvas 的边缘发生碰撞？

如果我不得不求助于Storyboard，有人可以指出一个沿随机路径移动对象的示例（使用 C# 而不是 XAML）。

Answer 1

XAML 和 Expression Blend 是创建动画的简单方法。

这是定义情节提要和动画的 XAML。

XAML

<Page.Resources>
  <Storyboard x:Name="MoveRectangleStoryboard"
              Completed='MoveRectangle_Completed'>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                                    Storyboard.TargetName="TestRectangle">
      <EasingDoubleKeyFrame KeyTime="0"
                            Value="0"
                            x:Name='xKey1' />
      <EasingDoubleKeyFrame KeyTime="0:0:2"
                            Value="165.423"
                            x:Name='xKey2' />

    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                                    Storyboard.TargetName="TestRectangle">
      <EasingDoubleKeyFrame KeyTime="0"
                            Value="0"
                            x:Name='yKey1' />
      <EasingDoubleKeyFrame KeyTime="0:0:2"
                            Value="68.408"
                            x:Name='yKey2' />

    </DoubleAnimationUsingKeyFrames>
  </Storyboard>
</Page.Resources>

  <Canvas x:Name='MainCanvas'>
    <Rectangle x:Name="TestRectangle"
               Fill='Orange'
               Tapped='rectangle_Tapped'
               Width='60'
               Height='80'
               RenderTransformOrigin="0.0,0.0">
      <Rectangle.RenderTransform>
        <CompositeTransform />
      </Rectangle.RenderTransform>
    </Rectangle>
  </Canvas>

代码

Random ran = new Random();
private void MoveRectangle_Completed(object sender, object e) {
  xKey1.Value = xKey2.Value;
  xKey2.Value = ran.NextDouble() * (MainCanvas.ActualWidth - TestRectangle.ActualWidth);
  yKey1.Value = yKey2.Value;
  yKey2.Value = ran.NextDouble() * (MainCanvas.ActualHeight - TestRectangle.ActualHeight);

}

private void rectangle_Tapped(object sender, TappedRoutedEventArgs e) {
  MoveRectangleStoryboard.Begin();
}

Answer 2

代码中 UIElement 的 Canvas.Left 和 Canvas.Top 属性的简单动画如下所示：

public void MoveElement(
    UIElement element, double offsetX, double offsetY, TimeSpan duration)
{
    var xAnimation = new DoubleAnimation
    {
        To = Canvas.GetLeft(element) + offsetX,
        Duration = duration,
    };

    var yAnimation = new DoubleAnimation
    {
        To = Canvas.GetTop(element) + offsetY,
        Duration = duration,
    };

    Storyboard.SetTarget(xAnimation, element);
    Storyboard.SetTargetProperty(xAnimation, "(Canvas.Left)");
    Storyboard.SetTarget(yAnimation, element);
    Storyboard.SetTargetProperty(yAnimation, "(Canvas.Top)");

    var storyboard = new Storyboard();
    storyboard.Children.Add(xAnimation);
    storyboard.Children.Add(yAnimation);
    storyboard.Begin();
}

您可以像这样在您的 Tapped 处理程序中使用它：

private void TestRectangle_Tapped(object sender, TappedRoutedEventArgs e)
{
    MoveElement(TestRectangle, 50, 50, TimeSpan.FromSeconds(0.25));
}

或者不命名矩形，像这样：

private void TestRectangle_Tapped(object sender, TappedRoutedEventArgs e)
{
    MoveElement((UIElement)sender, 50, 50, TimeSpan.FromSeconds(0.25));
}