複数のカラー・ブルーム・アニメーションを同時に実行するには？

Question

最近私は新しいWindows.UI.Composition APIを試していました。また、カラーブルームアニメーションを使用しているときには、画面の両側から同時に4つを実行しようとしていました。私はそれらのすべての4つのボタンをクリックするだけで実行させることができましたが、私はいつも始めた最後の遷移は、例えば、最終的に表示を引き継ぎ：

これは何が起こるかです：

しかし、何が起こるべきかは、すべての色が同時に画面に表示されることです。どのように私はそれを行うことができるでしょうか？あなたが言ったように、あなたは最近、新しい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

：

これは私がアニメーションを開始するために使用されるコードです。

surroundButtonTransitionについてのコードを投稿していないので、私はColorBloomTransitionHelperをGitHubから使用しています。 ContainerVisual.Children.InsertAtTopメソッドを使用して、ビジュアルコレクションの上部に新しいビジュアルを挿入します。

ContainerVisual.Childrenには、他のビジュアルと同じzindexで新しいビジュアルを追加する方法もありません。 VisualCollection classの方法を確認してください。

すべての色が同時に画面に表示されるようにするには、色のアルファ値を変更する必要があります。例えば

：

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