使用情节提要动画化代码中的矩形位置

Question

我正在Windows Phone 8上制作c＃/ xaml益智游戏。我有一个包含行和列的网格，每个网格中都有一个矩形。 （我在运行时添加了这些矩形）

我已经有一个代码，如果我点击它，它将把一个矩形移到另一列或另一行。

我正在尝试使用情节提要使此过渡成为平滑的动画。

这是一个无效的代码，但显示了我想做什么。

    private void AnimateRectangle(Rectangle rectangle, int sourceColumn, int sourceRow, int targetColumn, int targetRow)
    {
        Storyboard s = new Storyboard();
        DoubleAnimation doubleAniColumn = new DoubleAnimation();
        doubleAniColumn.From = sourceColumn;
        doubleAniColumn.To = targetColumn;
        doubleAniColumn.Duration = new Duration(TimeSpan.FromMilliseconds(500));
        Storyboard.SetTarget(doubleAniColumn, rectangle);
        Storyboard.SetTargetProperty(doubleAniColumn, new PropertyPath("(Grid.SetColumn)"));

        DoubleAnimation doubleAniRow = new DoubleAnimation();
        doubleAniRow.From = sourceRow;
        doubleAniRow.To = targetRow;
        doubleAniRow.Duration = new Duration(TimeSpan.FromMilliseconds(500));
        Storyboard.SetTarget(doubleAniRow, rectangle);
        Storyboard.SetTargetProperty(doubleAniRow, new PropertyPath("(Grid.SetRow)"));

        s.Children.Add(doubleAniColumn);
        s.Children.Add(doubleAniRow);

        s.Begin();
    }

任何帮助将不胜感激。

Answer 1

好吧，您不能为Grid.Row属性设置动画，因为0.5没有意义。 它是第0行或第1行。

您在这里可以做的是设置其位置的动画，一旦完成更改行和列。 像这样：

private void AnimateRectangle(Rectangle rectangle, int sourceColumn, int sourceRow, int targetColumn, int targetRow)
{
rectangle.RenderTransform = new CompositeTransform();

    Storyboard s = new Storyboard();
    DoubleAnimation doubleAniColumn = new DoubleAnimation();
    doubleAniColumn.From = 0;
    doubleAniColumn.To = ...; // calculate correct offset here
    doubleAniColumn.Duration = new Duration(TimeSpan.FromMilliseconds(500));
    Storyboard.SetTarget(doubleAniColumn, rectangle);
    Storyboard.SetTargetProperty(doubleAniColumn, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.TranslateY)"));

    DoubleAnimation doubleAniRow = new DoubleAnimation();
    doubleAniRow.From = 0;
    doubleAniRow.To = ...; // calculate correct offset here
    doubleAniRow.Duration = new Duration(TimeSpan.FromMilliseconds(500));
    Storyboard.SetTarget(doubleAniRow, rectangle);
    Storyboard.SetTargetProperty(doubleAniRow, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.TranslateX)"));

    s.Children.Add(doubleAniColumn);
    s.Children.Add(doubleAniRow);

    EventHandler eventHandler = null;
    eventHandler = (sender, o) =>
    {
        s.Completed -= eventHandler;
        Grid.SetRow(rectangle, targetRow);
        Grid.SetColumn(rectangle, targetColumn);
        rectangle.RenderTransform = new CompositeTransform();
    };
    s.Completed += eventHandler;
    s.Begin();
}

我是从头开始编写此代码的，因此不要介意某些东西一开始是否无法编译。