Question

我有一些元素正在动态添加到UWP视图中。此信息来自API。从理论上讲，我可以添加任意数量的元素。

元素描述的一部分是入口动画-例如fade in-将不透明度从0更改为element opacity value

通常，当我在后面的代码中执行此操作时，我会写以下内容：

Storyboard sb = new Storyboard();
KeyTime keyTime1 = KeyTime.FromTimeSpan(new TimeSpan(0));
KeyTime keyTime2 = KeyTime.FromTimeSpan(new TimeSpan(0, 0, 0, 1, 500));

DoubleAnimationUsingKeyFrames daRoot = new DoubleAnimationUsingKeyFrames();
daRoot.KeyFrames.Add(keyTime1.GetKeyFrame(0));
daRoot.KeyFrames.Add(keyTime2.GetKeyFrame(1));
Storyboard.SetTargetProperty(daRoot, "Opacity");
Storyboard.SetTarget(daRoot, this.Root);

sb.Children.Add(daRoot);
sb.Begin();

GetKeyFrame()是一个扩展方法，它返回一个EasingDoubleKeyFrame

我的想法是要对许多元素执行此操作，我应该能够将其放入循环中，如下所示：

Storyboard sb = new Storyboard();
KeyTime keyTime1 = KeyTime.FromTimeSpan(new TimeSpan(0));
KeyTime keyTime2 = KeyTime.FromTimeSpan(new TimeSpan(0, 0, 0, 1, 500));

foreach(var el in elements)
{
    DoubleAnimationUsingKeyFrames da = new DoubleAnimationUsingKeyFrames();
    da.KeyFrames.Add(keyTime1.GetKeyFrame(0));
    da.KeyFrames.Add(keyTime2.GetKeyFrame(1));
    Storyboard.SetTargetProperty(da, "Opacity");
    Storyboard.SetTarget(da, el);

    sb.Children.Add(da);
}
sb.Begin();

尽管会发生动画，但它只会在集合中的最后一个元素上发生。

我认为这是因为以下几行：

Storyboard.SetTargetProperty(da, "Opacity");
Storyboard.SetTarget(da, el);

我猜想是因为da和el具有相同的“变量名”，因此在循环的每次迭代中它们都是相同的对象。

是否有一种很好的方法来执行上述操作，以便无论我有10个元素还是100个元素，它在每个元素上都执行相同的动画？

预先感谢

Answer 1

不能100％确定您的确切要求，但是此代码段将循环遍历每个元素并将动画分别添加到每个元素，并且还将等待当前动画完成后再循环到下一个。

请进行测试，让我知道它是否符合您的要求。

private async void btn1_Tapped(object sender, TappedRoutedEventArgs e)
{
    foreach(var el in elements)
    {            
        AnimateOpacity(el.Opacity - 1);
        await Task.Delay(250); 
       //Wait for StoryBoard to complete before moving on to next element
    }
}


//TODO Add this to a class
public void AnimateOpacity(double to, double miliseconds = 250)
{
    var storyboard = new Storyboard();
    var doubleAnimation = new DoubleAnimation();
    doubleAnimation.Duration = TimeSpan.FromMilliseconds(miliseconds);
    doubleAnimation.EnableDependentAnimation = true;
    doubleAnimation.To = to;
    Storyboard.SetTargetProperty(doubleAnimation, "Opacity");
    Storyboard.SetTarget(doubleAnimation, el);
    storyboard.Children.Add(doubleAnimation);
    storyboard.Begin();
}

C＃，UWP故事板-动态添加DoubleAnimationUsingKeyFrames

1 个答案: