C #, UWP Storyboard - динамически добавлять DoubleAnimationUsingKeyFrames

Question

У меня есть некоторые элементы, которые динамически добавляются в представление UWP.Эта информация поступает из API.Теоретически я могу добавить любое количество элементов.

Часть описания элемента - это анимация входа - например, fade in - изменяет непрозрачность с 0 до element opacity value

* 1007.* Обычно, когда я делаю это в коде, я пишу что-то вроде:

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();
}