Question

我正在尝试实现一个动画，我使用for循环将控件从一行移动到另一行。

    private void AnimateStoryBoard(int number)
    {
        Storyboard _currentStoryBoard = new Storyboard();

       //Row Animation
        Int32Animation newrowanimation = new Int32Animation();
        newrowanimation.From = number;
        newrowanimation.To = number+1;
        newrowanimation.Duration = new TimeSpan(0, 0, 0, 0, 500);

        Storyboard.SetTargetProperty(newrowanimation, new PropertyPath("(Grid.Row)"));

        _currentStoryBoard.Children.Add(newrowanimation);

        Storyboard.SetTarget(newrowanimation, myrectangle);

        _currentStoryBoard.Begin();
    }

我正在使用

来调用它

        for (int i = 0; i < 10; i++)
        {
            AnimateStoryBoard(i);
        }

现在当我运行这个时，我希望动画从1到2然后是2到3然后是3到4 ... 9-10。但是动画会直接跳到9，然后是10。

另外我怎样才能在XAML中做到这一点？请注意，这里的数字10只是一个例子。数字必须来自代码隐藏，它会不断变化。

Answer 1

正如亚历山大·克莱尔在评论中所提到的，你必须在故事板中设置几个动画。使用循环的解决方案不起作用，因为您的方法在运行循环时不会返回，因此UI线程无法呈现故事板/动画所引起的更改。

一个解决方案是单个Storyboard实例，其中包含可变数量的动画（每行一个动画）。使用BeginTime属性错开动画。我建议你在这些动画之间使用40ms到100ms之间的值（我不会低于20ms）。

在代码中，这看起来像这样：

private void AnimateStoryboard(int number)
{
    // Create the storyboard that will be played
    var storyboard = new Storyboard();

    // Create the animation objects for each row change and add them to the storyboard
    var currentBeginTime = TimeSpan.Zero;
    for (var i = 0; i < number; i++)
    {
        var animation = new Int32Animation();
        // Set all the properties that you set on your animation objects before, and additionally use BeginTime
        animation.BeginTime = currentBeginTime;
        storyboard.Children.Add(animation);

        // Update the currentBeginTime to achieve the staggering effect
        currentBeginTime += TimeSpan.FromMilliseconds(50);
    }

    // Finally, start the Storyboard to run all animations
    storyboard.Begin();

}

Answer 2

恕我直言，没有必要重新发明轮子：key frame animation也是为了这个目的。

因此，要创建所需的动画，可以使用以下内容：

Storyboard storyBoard = new Storyboard();
int gridRowLimit = 5; // here you can set how many rows your grid has

Int32AnimationUsingKeyFrames intKeyFrame = new Int32AnimationUsingKeyFrames();
intKeyFrame.Duration = new TimeSpan(0, 0, 0, 0, gridRowLimit * 500);

for (int i = 1; i < gridRowLimit; i++)
{
    intKeyFrame.KeyFrames.Add(new DiscreteInt32KeyFrame(i));
}

Storyboard.SetTargetProperty(intKeyFrame, new PropertyPath("(Grid.Row)"));
Storyboard.SetTarget(intKeyFrame, yourControl);

storyBoard.Children.Add(intKeyFrame);
storyBoard.Begin();

我希望它有所帮助。

在for循环中动画wpf控件

2 个答案: