Comment exécuter plusieurs animations de bloom de couleur qui s'exécutent en même temps?

Question

J'ai essayé les nouvelles API Windows.UI.Composition récemment et lorsque j'utilise l'animation de bloom de couleur, j'ai essayé d'exécuter quatre d'entre elles simultanément de chaque côté de l'écran. Je suis en mesure de faire tous les quatre d'entre eux courent à un clic d'un bouton, mais la dernière transition que j'ai commencé toujours sur l'affichage prend à la fin par exemple:

Voici ce qui se passe:

Mais ce qui devrait arriver, c'est que toutes les couleurs doivent remplir l'écran en même temps. Comment serais-je capable de faire ça?

Ceci est le code que j'utilisé pour démarrer les animations:

private void surroundBloomButton_Click(object sender, RoutedEventArgs e) 
    { 

     //all of these headers are actually textblocks I've placed on the sides of the grid. 
     var header = topFlower; 

     var headerPosition = topFlower.TransformToVisual(UICanvas).TransformPoint(new Windows.Foundation.Point(0d, 0d)); 

     var header2 = rightFlower; 

     var header2Position = rightFlower.TransformToVisual(UICanvas).TransformPoint(new Windows.Foundation.Point(0d, 0d)); 

     var header3 = bottomFlower; 

     var header3Position = bottomFlower.TransformToVisual(UICanvas).TransformPoint(new Windows.Foundation.Point(0d, 0d)); 

     var header4 = leftFlower; 

     var header4Position = leftFlower.TransformToVisual(UICanvas).TransformPoint(new Windows.Foundation.Point(0d, 0d)); 




     //Uses values of the textBlock size 


     var initialBounds = new Windows.Foundation.Rect() 
     { 
      Width = header.RenderSize.Width, 
      Height = header.RenderSize.Height, 
      X = headerPosition.X, 
      Y = headerPosition.Y 
     }; 

     var finalBounds = Window.Current.Bounds; // maps to the bounds of the current window 
     //The code is super easy to understand if you set a break point here and 
     //check to see what happens step by step ;) 
     surroundButtonTransition.Start((Windows.UI.Color.FromArgb(255, 255, 0, 0)), // the color for the circlular bloom 
          initialBounds,         // the initial size and position 
            finalBounds);        // the area to fill over the animation duration 

     // Add item to queue of transitions 

     initialBounds = new Rect() 
     { 
      Width = header2.RenderSize.Width, 
      Height = header2.RenderSize.Height, 
      X = header2Position.X, 
      Y = header2Position.Y 
     }; 

     surroundButtonTransition.Start((Windows.UI.Color.FromArgb(255, 255, 150, 0)), // the color for the circlular bloom 
          initialBounds,         // the initial size and position 
           finalBounds);        // the area to fill over the animation duration 

     initialBounds = new Rect() 
     { 
      Width = header3.RenderSize.Width, 
      Height = header3.RenderSize.Height, 
      X = header3Position.X, 
      Y = header3Position.Y 
     }; 

     surroundButtonTransition.Start((Windows.UI.Color.FromArgb(255, 0, 255, 0)), // the color for the circlular bloom 
          initialBounds,         // the initial size and position 
           finalBounds);        // the area to fill over the animation duration 

     initialBounds = new Rect() 
     { 
      Width = header4.RenderSize.Width, 
      Height = header4.RenderSize.Height, 
      X = header4Position.X, 
      Y = header4Position.Y 
     }; 

     surroundButtonTransition.Start((Windows.UI.Color.FromArgb(255, 0, 0, 255)), // the color for the circlular bloom 
          initialBounds,         // the initial size and position 
           finalBounds);        // the area to fill over the animation duration 
    } 

    private void SurroundButtonTransition_ColorBloomTransitionCompleted(object sender, EventArgs e) 
    { 
     //Changes colour of background to "White Smoke " when 
     //the animations have finished. 
     UICanvas.Background = new SolidColorBrush(Windows.UI.Colors.WhiteSmoke); 
    } 

Answer 1

Comme vous l'avez dit, vous essayez les nouvelles API de Windows.UI.Composition ces derniers temps et lors de l'utilisation de l'animation de fleurs de couleur.

Puisque vous n'avez pas posté votre code sur le surroundButtonTransition que j'utilise le ColorBloomTransitionHelper du GitHub. Il utilise la méthode ContainerVisual.Children.InsertAtTop pour insérer un nouveau visuel en haut de la collection visuelle.

Il n'y a pas non plus de méthode pour ajouter de nouveaux visuels au même zindex que les autres visuels dans ContainerVisual.Children. Veuillez vérifier la méthode au VisualCollection class.

Si vous voulez que toutes les couleurs remplissent l'écran en même temps, vous devriez pouvoir changer la valeur alpha de votre couleur.

Par exemple:

surroundButtonTransition.Start((Windows.UI.Color.FromArgb(100, 255, 0, 0)), initialBounds, finalBounds); 
surroundButtonTransition.Start((Windows.UI.Color.FromArgb(100, 255, 150, 0)), initialBounds, finalBounds); 
surroundButtonTransition.Start((Windows.UI.Color.FromArgb(100, 0, 255, 0)), initialBounds, finalBounds); 
surroundButtonTransition.Start((Windows.UI.Color.FromArgb(100, 0, 0, 255)), initialBounds, finalBounds);