如何運行在同一時間運行多個色彩綻放動畫？

Question

最近我一直在嘗試使用新的Windows.UI.Composition API，並且在使用彩色布盧姆動畫時，我一直試圖從屏幕的每一邊同時運行其中的四個。我已經能夠讓他們四個運行在按鈕的點擊，但我已經開始總是接管顯示器到底例如最後過渡：

這是發生了什麼：

但是應該發生的是，所有的顏色應該在同一時間填滿整個屏幕。我將如何能夠做到這一點？

這是我用來啓動動畫代碼：

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

正如你所說，你最近嘗試新Windows.UI.Composition API和使用顏色盛開動畫時。

由於您還沒有發佈您的代碼，所以我使用GitHub中的ColorBloomTransitionHelper來代替surroundButtonTransition。它使用ContainerVisual.Children.InsertAtTop方法插入一個新的視覺在視覺收集的頂部。

此外，沒有方法在與ContainerVisual.Children中的其他視覺效果相同的zindex中添加新視覺效果。請檢查VisualCollection class中的方法。

如果你想要所有的顏色應該同時填滿屏幕，你應該能夠改變你的顏色的alpha值。

例如：

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