如何运行在同一时间运行多个色彩绽放动画？

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