Wie laufen mehrere Farbbloom-Animationen, die gleichzeitig laufen?

Question

Ich habe in letzter Zeit die neuen APIs von Windows.UI.Composition ausprobiert, und bei der Verwendung der Farbbloom-Animation habe ich versucht, vier von ihnen gleichzeitig von jeder Seite des Bildschirms auszuführen. Ich habe in der Lage gewesen, alle vier von ihnen zu machen bei einem Klick auf eine Schaltfläche ausgeführt, aber den letzten Übergang ich angefangen habe, nehme immer über das Display am Ende zum Beispiel:

Dies ist, was passiert:

Aber was passieren sollte ist, dass alle Farben den Bildschirm gleichzeitig ausfüllen sollten. Wie könnte ich das tun?

Dies ist der Code, den ich verwenden, um die Animationen zu starten:

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

Wie Sie sagen, Sie sind in letzter Zeit die neue Windows.UI.Composition APIs Ausprobieren und wenn die Farbe der Blüte Animation mit.

Da Sie Ihren Code über surroundButtonTransition nicht veröffentlicht haben, verwende ich die ColorBloomTransitionHelper aus dem GitHub. Es verwendet die Methode ContainerVisual.Children.InsertAtTop, um ein neues visuelles Element an der Spitze der visuellen Sammlung einzufügen.

Auch gibt es keine Methode, um neue visuelle am gleichen zindex wie andere visuelle in ContainerVisual.Children hinzuzufügen. Bitte überprüfen Sie die Methode in VisualCollection class.

Wenn Sie möchten, dass alle Farben den Bildschirm gleichzeitig ausfüllen, sollten Sie den Alpha-Wert Ihrer Farbe ändern können.

Zum Beispiel:

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